Question

我在画布中绘制了一个图像，它被裁剪成4个不同的部分。例如，我想旋转中心最顶端周围的第二个裁剪区域。现在，如果我更改translate值，则轮换与之前相同，唯一的区别是posX，posY已更改。

绘图功能：

//Function that is called on each 'tick' event, 60fps
draw: function(){
    if(this.rotation != 0){
        _self.elements.context.save();      
        // what values to put here so that '2' would rotate correctly ???
        _self.elements.context.translate(0,0);      
        _self.elements.context.rotate(this.rotation);
        _self.elements.context.drawImage(
            _self.elements.image,this.sx, this.sy, this.sw, this.sh, this.dx, this.dy, this.sw, this.dh
        );
        _self.elements.context.restore();
    }else{
        _self.elements.context.drawImage(
            _self.elements.image, this.sx, this.sy, this.sw, this.sh, this.dx, this.dy, this.sw, this.dh
        );
    }
}

使用TweenMax旋转

//Rotate the '2' cropped image part   
TweenMax.to(_self.CanvasImages.collection[1], 2, {rotation:0.5});

我还在jsFiddle中提供了完整的代码，这些代码应该让我更加了解我正在谈论的内容。

Answer 1

如果我能够正确理解这一点，我认为你可以做到这一点：

在 _self.elements.context.drawImage(... 对象 draw 内的 _self.CanvasImage 对象中，而不是传递 this.dx 和 this.dy ，尝试传递 0 和 {{1 }} 即可。
然后在同一个函数内的 0 调用中，传递 _self.elements.context.translate(... 和 this.dx
这应该围绕 this.dy 点旋转对象。
但是，如果您想围绕 top-left 点移动它然后你可以做的是同样的上面提到的 top-center 来电，而非传递 _self.elements.context.drawImage(... 作为之前的替代品 0 值，传递 this.dx 。

JS代码更新＃1 （针对上述第1-3点）：

-(this.sw * 0.5)

<强> jsFiddle #1

JS代码更新＃2 （针对上述第4点）：

...
_self.elements.context.translate(this.dx, this.dy);
_self.elements.context.rotate(this.rotation);
_self.elements.context.drawImage(_self.elements.image, this.sx, this.sy, this.sw, this.sh, 0, 0, this.sw, this.dh);
...

<强> jsFiddle #2

希望这有帮助。

如何在单个画布中旋转裁剪的图像

1 个答案: