CODEWITHSUNDEEP
javascripthtmlcanvas2deaseljs
gdyrrahitis
gdyrrahitis

Reputation: 5978

What is the registration point in EaselJS?

Can anyone explain the purpose of the regX and regY in EaselJS? It gets me confused. Technically, this code snippet:

var shape = new createjs.Shape();
shape.graphics.beginFill("blue").drawRect(centerX - SIZE / 2, centerY - SIZE / 2, SIZE, SIZE);

and this code snippet:

var shape = new createjs.Shape();
shape.graphics.beginFill("blue").drawRect(centerX - SIZE / 2, centerY - SIZE / 2, SIZE, SIZE);
shape.regX = SIZE / 2;
shape.regY = SIZE / 2;

provide the exact same result. So, regX / regY actually subtract their value from the shape x / y?

To clarify, centerX, centerY are the represent the center of canvas and size is a property that represents the size of the shape.

Upvotes: 1

Views: 5532

Answers (2)

user3076137
user3076137

Reputation: 111

Simple answer: they are substitute x,y coordinates. The only use I know of is in rotating bitmaps. See the sample here.

Here's the code in the sample:

<!DOCTYPE html>
<html>
<head>
<script asrc="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script>
//this sample uses the timer to rotate a bitmap around its center

var stage, rect, img;		//declare global variables

function init() {
//this function is registered in the html body tag

    stage = new createjs.Stage("demoCanvas");	//create a Stage object to work with the canvas element			
    
    img = new Image();				//create an Image object, then set its source property
    img.src = 'green.jpg';
    
    img.onload = handleImageLoad;		//register a handler for the onload event     
}

function handleImageLoad(event) {
//this function rus when the onload event completes
    
    rect = new createjs.Bitmap(img);	//create a Bitmap object, then set properties
    rect.scaleX = .5;		
    rect.scaleY = .5;
    rect.x = 250;		
    rect.y = 250;
    
    rect.regX = img.width/2;		//move registration point to center of bitmap
    rect.regY = img.height/2;
    
    stage.addChild(rect);		//add the Bitmap object to the stage
    
    createjs.Ticker.setFPS(30);		//set the Ticker frame rate
    createjs.Ticker.on("tick", tick);	//add a Ticker event listener; 1st parameter specifies the event type, 
    					//2nd parameter registers the function that is called when the event fires
}

function tick(event) {
//this function is called when the tick event fires

    rect.rotation += 8;		//increments rotation by 8 degrees
    stage.update(event);	//update the stage
}

//samples list: http://www.clarksoncs.com/JavaScriptSamples/EaselJS/easelJsSamplesIndex.html

</script>
</head>
<body onLoad="init();">
    
    <!--add a canvas tag-->
    <canvas id="demoCanvas" width="2000" height="2000"></canvas>
</body>
</html>

Upvotes: 1

Lanny
Lanny

Reputation: 11294

The example you use is a Shape, which has a separate coordinate system that you draw points on. The regX / regY properties are on DisplayObject, so they apply to all objects on the stage. The same could be said for a Container, where you can draw your elements at [50,50], or draw them at [0,0], and offset the registration point.

Technically the two approaches accomplish the same result (offsetting the content visually), but the two have different purposes. The registration point can be changed after-the-fact, and simply offset where the element draws from.

This is more obvious for something like a Bitmap that is drawn at 0,0.

Upvotes: 3

Related Questions