Question

我有一个问题，因为几天，我想创建像一个＆＃34;相机跟随＆＃34;对于我的游戏，问题是功能阶段.exmpleljs旋转arround x = 0和y = 0 ... 我知道这个解决方案没有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);

但是对于easeljs来说这是不可能的，因为fonction setTransform也会移动旋转......

你知道解决方案吗？谢谢！

Answer 1

您需要将regX和regY设置为中心，这样您就可以旋转一下。我建议将您的内容放在Container中，然后旋转它，因为阶段转换可能是不可预测的。

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

Answer 2

使用下面的代码，您可以在容器周围绘制一个边界框，看看边界框中心是否真的是旋转的中心。

// 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();
}

“并非所有显示对象都可以计算自己的边界（例如Shape）。对于这些对象，您可以使用setBounds，以便在计算Container边界时包含它们。”

另见https://stackoverflow.com/a/45486355/1066234

有助于操纵舞台（或任何其他图形）的边界框：

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

围绕中心旋转

2 个答案: