Javascript Konva.js中的中心旋转箭头

我给你写信是因为我真的被卡住了。我必须用Konva.js创建一个箭头（我根据一个模型对我的箭头进行了个性化设置：）

我已经附加了我的JS文件（创建箭头）、CSS和HTML文件，它们通过调用JS文件来显示结果

这是我的问题：当我在HTML文件中输入一个值（风向）时，我希望我的箭头旋转所指示的角度（风向）。它可以是45°、90°、135°，。。。（所以东北、东、东南……）。但实际上，我的箭头会旋转，但也会在屏幕上围绕左上角点移动。我不知道为什么。我希望它只在自身上旋转。你会怎么做

我看到它可以与offsetX和offsetY一起工作，但不知道是否有更好的解决方案或如何使用它。这就是为什么我需要你的帮助

功能图\u fleche\u通风孔（方向）{
var方向=方向//新Konva.变压器({
//旋转暂停：[0,45,90,135,180,225,270,315,360]，
// });
//var-force=“”；
//得到
//var rotationSnaps=变压器。rotationSnaps（）；
//设置
//变压器旋转暂停（[0,45,90,135,180,225,270,315,360]）；
var阶段=新Konva.阶段({
容器：'容器'，
宽度：window.innerWidth，
高度：window.innerHeight
});
var layer=新Konva.layer（）；
/*
*通过定义三角形来创建三角形形状
*绘制三角形的绘图函数
*/
var三角形=新Konva.形状({
sceneFunc:函数（上下文、形状）{
context.beginPath（）；
上下文。移动到（225，10）；
lineTo（150190）；
二次曲线（230、90、300、190）；
closePath（）；
//偏移量（{context.width/2，context.height/2}）；
//位置（{context.width/2，context.height/2}）；
fillStrokeShape（形状）；
},
填写：“#FF5757”，
笔画：“黑色”，
冲程宽度：4
});
//var c=document.getElementById（上下文）；
//旋转（方向*Math.PI/180）；
三角形。旋转（方向）；
图层。添加（三角形）；
阶段。添加（层）；
//console.log（'ca marche'）；
//开关（方向）{
//案例0：
////ayer.add（三角形）；.add（方向）；
////将三角形形状添加到图层中
//图层。添加（三角形）；
////三角形。旋转（0）；
////将层添加到舞台
//阶段。添加（层）；
//console.log（'on est dans le switch 0'）；
//中断；
//案例45：
////context.rotate（）；
////将三角形形状添加到图层中
//图层。添加（三角形）；
//三角形。旋转（45）；
////将层添加到舞台
//阶段。添加（层）；
//console.log（'on est dans le switch 45'）；
//中断；
//案例90：
////context.rotate（Math.PI/180）；
////将三角形形状添加到图层中
//图层。添加（三角形）；
//三角形。旋转（90）；
////将层添加到舞台
//阶段。添加（层）；
//console.log（'on est dans le switch 90'）；
//中断；
//案例135：
////将三角形形状添加到图层中
//图层。添加（三角形）；
//三角形旋转（135）；
////将层添加到舞台
//阶段。添加（层）；
//console.log（'on est dans le switch 135'）；
//中断；
//案例180：
////将三角形形状添加到图层中
//图层。添加（三角形）；
//三角形。旋转（180）；
////将层添加到舞台
//阶段。添加（层）；
//console.log（'on est dans le switch 180'）；
//中断；
//案例225：
////将三角形形状添加到图层中
//图层。添加（三角形）；
//三角形。旋转（225）；
////将层添加到舞台
//阶段。添加（层）；
//控制台日志（“在est dans le开关225上”）；
//中断；
//案例270：
////将三角形形状添加到图层中
//图层。添加（三角形）；
//三角形。旋转（270）；
////将层添加到舞台
//阶段。添加（层）；
//console.log（'on est dans le switch 270'）；
//中断；
//案例315：
////将三角形形状添加到图层中
//图层。添加（三角形）；
//三角形旋转（315）；
////将层添加到舞台
//阶段。添加（层）；
//console.log（'on est dans le switch 315'）；
//中断；
//案例360：
////将三角形形状添加到图层中
//图层。添加（三角形）；
//三角形旋转（360度）；
////将层添加到舞台
//阶段。添加（层）；
//console.log（'on est dans le switch 360'）；
//中断；
// }
//将三角形形状添加到图层
//图层。添加（三角形）；
//将层添加到舞台
//阶段。添加（层）；
}
//函数旋转（）{
//三角形。旋转（45）；
//stage.draw（）；
//console.log（'loaded'）；
//}

正文{
保证金：0；
填充：0；
溢出：隐藏；
背景色：#f0；
}

箭试
抽气孔（45）；

几乎所有计算机绘图库的工作方式都是使用点和矩形。您需要考虑将箭头绘制在矩形空间中

请注意，Konva在图形库中有点不同寻常，因为椭圆绘制的形状的旋转点默认为其中心。Konva docs网站上有一个关于偏移/旋转场景的很好的解释

在创建三角形形状的代码中，使用

context.beginPath();
context.moveTo(225, 10);
...

起点（beginPath）是包含图形的矩形的左上角。这就是点（0,0）

应用于形状的任何位置更改或旋转更改都将该点用作移动中心

如您所见，这意味着旋转似乎意外地移动了形状

轮换

var dX = node.width()/2;
var dY = node.height()/2;
node.offset(dX, dY)

node.position({x:node.x() + dX, y: node.y() + dY})