问

EaselJS - 围绕其中心旋转形状

帅宁发布于 2023-02-13 13:44

get

object

instance

list

我正在用EaselJS制作一个旋转的矩形,但它不像我想的那样工作.

我想,如果我想制作一个在x = 100,y = 100的位置绕其中心旋转的正方形(40x40),我需要将它的注册点设置为regX = 20,regY = 20.

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



http://jsfiddle.net/ZbZjL/14/



        
        1 个回答
        
                        
                你在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();
}


看小提琴.

        
                
                    2023-02-13 13:47  回答
                       Keai丶绿茶_890
                
            
                    
    
    
    
        撰写答案
        
            
                
                    回答问题...



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签