Canvas 舞台围绕中心旋转

几天以来我遇到了一个问题，我想为我的游戏创建一个“相机跟随”，问题是Fontion阶段。画架的旋转围绕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是不可能的，因为函数setTransform也会移动旋转

---

你知道解决办法吗？谢谢

您需要将

regX

和

regY

设置为中心，这样您就有了一个旋转点。我建议您将内容放入容器中，并对其进行旋转，因为阶段转换可能是不可预测的

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

---

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

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

并非所有显示对象都可以计算其自己的边界（例如形状）。对于这些对象，您可以使用设置边界，以便在计算容器边界时将其包括在内

另见

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

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