Knovajs/HTML5画布-旋转原点

我已经成功地创建了一个按钮，它可以顺时针或C-顺时针旋转图像。但是，此按钮只能使用一次。i、 e.如果按CW键，则无法使用CCW还原图像

有什么想法吗

$rw=$（“#向右旋转”）

$rw.on（'click'，函数（事件）{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();
});`

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

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

或者只是：

node.rotate(90);

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

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

或者只是：

node.rotate(90);

根据@lavrton的回答，这里有一个工作片段。我想你需要注意旋转点-我使用楔子很容易。请参阅按钮单击事件中的简短代码，以了解如何操作


//添加一个阶段
var s=新Konva.阶段({
容器：'容器'，
宽度：800，
身高：200
});
//添加一层
var l=新的Konva.Layer（）；
s、 加（l）；
//在图层上添加一个绿色矩形，以显示舞台的边界。
var green=new Konva.Rect（{stroke:'lime'，宽度：799，高度：199，x:0，y:0}）；
l、 添加（绿色）；
//添加一个圆以包含楔块
var circle=新Konva.circle({
x:s.getWidth（）/2，
y:s.getHeight（）/2，
半径：70，
填充：“红色”，
笔画：“黑色”，
冲程宽度：4
});
l、 加（圈）；
//添加楔块-用作我们的旋转示例
var w=新孔瓦楔块({
x:s.getWidth（）/2，
y:s.getHeight（）/2，
半径：70，
角度：60，
填充：“石灰”，
笔画：“黑色”，
冲程宽度：4，
轮换：-120
});
l、 加（w）；
l、 draw（）；//重新绘制它所在的图层。
//把钮扣系好
var oldAngle=0；
$（文档）.ready（函数（）{
$（'#plus90'）。在（'click'，函数（e）上{
oldAngle=w.旋转（）；
w、 旋转（90）；
$（'#info'）.html（'旋转为'+oldAngle+'+90='+w.Rotation（））
l、 draw（）；
})
$（'#minus90'）。在（'click'，函数（e）上{
oldAngle=w.旋转（）；
w、 旋转（-90）；
$（'#info'）.html（'旋转为'+oldAngle+'-90='+w.Rotation（））
l、 draw（）；
})
$（'#info'）.html（'初始旋转='+w.rotation（））
})；
#容器{
边框：1px实心#ccc；
}
#信息{
高度：20px；
边框底部：1px实心#ccc；
}
#暗示{
字体：斜体；
}

提示：绿色为舞台，红色为静止圆圈，石灰楔旋转。单击按钮！

请注意在创建楔块时设置的初始旋转。
信息：
旋转-90度
旋转+90度
根据@lavrton的回答，这里有一个工作片段。我想你需要注意旋转点-我使用楔子时很容易。请参阅按钮单击事件中的简短代码，以了解如何操作


//添加一个阶段
var s=新Konva.阶段({
容器：'容器'，
宽度：800，
身高：200
});
//添加一层
var l=新的Konva.Layer（）；
s、 加（l）；
//在图层上添加一个绿色矩形，以显示舞台的边界。
var green=new Konva.Rect（{stroke:'lime'，宽度：799，高度：199，x:0，y:0}）；
l、 添加（绿色）；
//添加一个圆以包含楔块
var circle=新Konva.circle({
x:s.getWidth（）/2，
y:s.getHeight（）/2，
半径：70，
填充：“红色”，
笔画：“黑色”，
冲程宽度：4
});
l、 加（圈）；
//添加楔块-用作我们的旋转示例
var w=新孔瓦楔块({
x:s.getWidth（）/2，
y:s.getHeight（）/2，
半径：70，
角度：60，
填充：“石灰”，
笔画：“黑色”，
冲程宽度：4，
轮换：-120
});
l、 加（w）；
l、 draw（）；//重新绘制它所在的图层。
//把钮扣系好
var oldAngle=0；
$（文档）.ready（函数（）{
$（'#plus90'）。在（'click'，函数（e）上{
oldAngle=w.旋转（）；
w、 旋转（90）；
$（'#info'）.html（'旋转为'+oldAngle+'+90='+w.Rotation（））
l、 draw（）；
})
$（'#minus90'）。在（'click'，函数（e）上{
oldAngle=w.旋转（）；
w、 旋转（-90）；
$（'#info'）.html（'旋转为'+oldAngle+'-90='+w.Rotation（））
l、 draw（）；
})
$（'#info'）.html（'初始旋转='+w.rotation（））
})；
#容器{
边框：1px实心#ccc；
}
#信息{
高度：20px；
边框底部：1px实心#ccc；
}
#暗示{
字体：斜体；
}

提示：绿色为舞台，红色为静止圆圈，石灰楔旋转。单击按钮！

请注意在创建楔块时设置的初始旋转。
信息：
旋转-90度
旋转+90度
Superb。很好。有没有想法更改图像（不是正方形）并将其旋转偏移量更新到中心？例如，我在横向中计算出了中心。当第一次按“旋转”时，它会工作。但再次按“旋转”时，它会出错。很好。有没有想法更改图像（不是正方形）并将其旋转偏移量更新为中心？即，我在横向中计算出了中心。当第一次按“旋转”时，它会工作。但再次按“旋转”时，它会出错。。