Knovajs / HTML5 Canvas - 旋转起源 [英] Knovajs / HTML5 Canvas - Rotation origin

问题描述

我已经成功创建了一个按钮，可以顺时针或顺时针旋转图像。但是，此按钮只能使用一次。即如果我按CW我就不能再使用CCW还原图像。

I have successfully created a button which rotates an image either clockwise or C-Clockwise. However, this button can only be used once. i.e. if i press CW i cannot then use CCW to revert the image back.

任何想法？

$ rw = $（'＃rotate_right'）;

$ rw.on（' click'，function（event）{event.preventDefault？event.preventDefault（）：event.returnValue = false;

    darthVaderImg.offsetX(img_width / 2); 
    darthVaderImg.offsetY(img_height / 2);
    // when we are setting {x,y} properties we are setting position of top left corner of darthVaderImg.
    // but after applying offset when we are setting {x,y}
    // properties we are setting position of central point of darthVaderImg.
    // so we also need to move the image to see previous result
    darthVaderImg.x(darthVaderImg.x() + img_width / 2);
    darthVaderImg.y(darthVaderImg.y() + img_height / 2);

    darthVaderImg.rotation(90);

    stage.batchDraw();
    export_changes();
});

$rl = $('#rotate_left');
$rl.on('click', function(event) {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    //darthVaderImg.rotate(90);

    darthVaderImg.offsetX(img_width / 2); 
    darthVaderImg.offsetY(img_height / 2);
    // when we are setting {x,y} properties we are setting position of top left corner of darthVaderImg.
    // but after applying offset when we are setting {x,y}
    // properties we are setting position of central point of darthVaderImg.
    // so we also need to move the image to see previous result
    darthVaderImg.x(darthVaderImg.x() + img_width / 2);
    darthVaderImg.y(darthVaderImg.y() + img_height / 2);

    darthVaderImg.rotation(-90);

    stage.batchDraw();
    export_changes();
});`

推荐答案

轮换方法将设置形状的当前角度。如果你需要旋转更多，你可以使用它：

rotation method will set the current angle of a shape. if you need to rotate more you can use this:

var oldRotation = node.rotation();
node.rotation(oldRotation + 90);

或只是：

node.rotate(90);

这篇关于Knovajs / HTML5 Canvas - 旋转起源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！