CODEWITHSUNDEEP
canvascamerarotationeaseljscreatejs
Kaoder
Kaoder

Reputation: 61

Stage rotation around center

I have a problem since few days, I would like create like a "camera follow" for my game, the problem is the fonction stage.rotation of easeljs rotate arround x=0 and y=0... I know this solution without easeljs:

     // Move registration point to the center of the canvas
  context.translate(canvasWidth/2, canvasWidth/2);

  // Rotate 1 degree
  context.rotate(Math.PI / 180);

  // Move registration point back to the top left corner of canvas
  context.translate(-canvasWidth/2, -canvasWidth/2);

but it's impossible with easeljs because the fonction setTransform move also the rotation...

Do you know a solution ? Thanks !

Upvotes: 1

Views: 809

Answers (2)

Avatar
Avatar

Reputation: 15194

With the code below you can draw a bounding box around your container and see if the bounding box center is really the center for the rotation.

// container to hold the drawing, for rotation
var drawcontext = new createjs.Container();

// example shape 
var line_a = new createjs.Shape();
line_a.graphics.setStrokeStyle(1,'round').beginStroke('#E33');
line_a.graphics.moveTo(0, 0);
line_a.graphics.lineTo(100, 100);
drawcon.addChild(line_a);

// …

var drawcontent_box = drawcontent.getBounds();

var label = new createjs.Text("x", "14px Arial", "#000");
drawcontent.addChild(label);
label.x = drawcontent_box.x + drawcontent_box.width/2;
label.y = drawcontent_box.y - drawcontent_box.height/2;

var shape_rec = new createjs.Shape();
shape_rec.graphics.setStrokeStyle(1).beginStroke("#AAA").beginFill('#FCFCFC');
shape_rec.graphics.moveTo(0,0).drawRect(drawcontent_box.x, drawcontent_box.y, drawcontent_box.width, drawcontent_box.height);
shape_rec.graphics.endFill().endStroke();
stage.addChild(shape_rec);

// animation to understand the rotation point
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", onTick);

function onTick() {
    drawcontent.rotation++;
    stage.update();
}

"Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use setBounds so that they are included when calculating Container bounds."

See also https://stackoverflow.com/a/45486355/1066234

Helpful to manipulate the bounding box of the stage (or any other graphic): 

stage.setBounds(0,0,300,200);
stage.regX = 150;
stage.regY = 100;

Upvotes: 0

Lanny
Lanny

Reputation: 11294

You need to set the regX and regY to the center, which gives you a point to rotate around. I recommend putting your content in a Container, and rotating it, as stage transformation can be unpredictable.

var container = new createjs.Container();
container.regX = stage.canvas.width/2;
container.regY = stage.canvas.height/2
container.rotation = 45;

Upvotes: 2

Related Questions