我正在使用EaselJS制作旋转矩形,但它不像我想的那样工作。
正如我想的那样,如果我想制作一个在x = 100,y = 100的位置围绕其中心旋转的正方形(40x40),我需要将其注册点设置为regX = 20,regY = 20。 / p>
//Create a stage by getting a reference to the canvas
stage = new createjs.Stage("demoCanvas");
//Create a Shape DisplayObject.
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawRect(100, 100, 40, 40);
circle.regX = circle.regY = 20;
//Add Shape instance to stage display list.
stage.addChild(circle);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", onTick);
function onTick() {
circle.rotation++;
stage.update();
}
答案 0 :(得分:8)
你在100,100点的形状内绘制矩形,然后将注册点设置为20,20,这意味着你正在旋转一个巨大的形状,其中一个角落有一个矩形(或多或少) )对角的一个点。
下面我在新形状的原点绘制矩形,然后使用x和y属性放置形状本身:
//Create a stage by getting a reference to the canvas
stage = new createjs.Stage("demoCanvas");
//Create a Shape DisplayObject.
circle = new createjs.Shape();
circle.graphics.beginFill("red").drawRect(0, 0, 40, 40);
circle.regX = circle.regY = 20;
circle.x = circle.y = 100;
//Add Shape instance to stage display list.
stage.addChild(circle);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", onTick);
function onTick() {
circle.rotation++;
stage.update();
}
请参阅fiddle。