Как повернуть обрезанные изображения в одном холсте

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

Если бы я был в состоянии понять это правильно, вот что я думаю, что вы можете сделать:

1. В вашей линии с _self.elements.context.drawImage(... вызова внутри draw функции в _self.CanvasImage объекта, а от this.dx и this.dy, попробуйте пройти 0 и 0.
2. И тогда в вашем _self.elements.context.translate(... вызова внутри одной и той же функции, проходят this.dx и this.dy.
3. Это должно вращать объект вокруг его top-left пункт.
4. Однако, если вы хотите, чтобы переместить его вокруг своей top-center точки то, что вы можете сделать, это в том же _self.elements.context.drawImage(... вызова упомянутого выше, вместо передачи 0 в качестве замены к предыдущему this.dx значение, проход -(this.sw * 0.5).

JS код Обновление # 1 (для точек 1-3 выше):

... 
_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 #1.

JS код Обновление # 2 (для точки 4 выше):

... 
_self.elements.context.drawImage(_self.elements.image, this.sx, this.sy, this.sw, this.sh, -(this.sw * 0.5), 0, this.sw, this.dh); 
... 

jsFiddle #2.

Надеюсь, это поможет.