Javascript 使用KonvaJS绘制和旋转图像

所以我一直在尝试使用Konva绘制大量的图像、文本和形状，在我尝试将旋转添加到混合之前，一切都很好。我知道Konva使用原点（默认情况下为左上角，可以通过偏移移动）旋转图像，但我需要位置始终为左上角

所以我试着计算，旋转，重新定位物体来模拟我想要的，但这总是导致图像位置与我的初始状态不同，这是一种不想要的行为

所以我的问题是，Konva能否从图像的中心旋转图像，同时在旋转后将原点位置保持在左上角

*使用代码示例进行编辑： 绿色框/文本已旋转，但位置完全错误。我需要这个位置在左边

const stage=新Konva.stage({
容器：'容器'，
宽度：window.innerWidth，
高度：window.innerHeight
});
const layer=新的Konva.layer（）；
阶段。添加（层）；
常数旋转点=（x，y，rad）=>{
const rcos=数学cos（rad）；
常数rsin=数学sin（rad）；
返回{
x:x*rcos-y*rsin，
y:y*rcos+x*rsin
}
}
常量rotateAroundCenter=（节点，旋转）=>{
const topLeft={x:-node.width（）/2，y:-node.height（）/2}；
const current=rotatePoint（topLeft.x，topLeft.y，Konva.getAngle（node.rotation（））；
const rotated=rotatePoint（topLeft.x，topLeft.y，Konva.getAngle（旋转））；
常数dx=旋转的.x-当前的.x，
dy=旋转的.y-当前的.y；
节点旋转（旋转）；
node.x（node.x（）+dx）；
node.y（node.y（）+dy）；
返回节点；
}
设x=100，
y=50，
宽度=50，
高度=50；
常数旋转=90；
常量文本={宽度，高度，字体大小：15，字体系列：'Calibri'，文本：'Simple text'，不透明度：0.5}；
const rect={width，height，strokeWidth:2}
设pos={x，y}；
添加（新的Konva.圆（{…位置，半径：5，填充：'黑色'}））；
添加（新的Konva.Text（{…pos，…Text，fill:'black'}））；
添加（新的Konva.Rect（{…pos，…Rect，stroke:'purple'}））；
添加（新的Konva.Text（{…pos，…Text，fill:'purple'，rotation:rotation}）；
添加（新的Konva.Rect（{…pos，…Rect，stroke:'purple'，rotation:rotation}））；
pos={x，y:150}；
添加（新的Konva.圆（{…位置，半径：5，填充：'黑色'}））；
添加（rotateAroundCenter（新的Konva.Text（{…pos，…Text，fill:'green'}），旋转））；
添加（rotateAroundCenter（新的Konva.Rect（{…pos，…Rect，stroke:'green'}），rotation））；
layer.draw（）
好的，基本上必须按照拉夫顿所说的做，将形状放在一组中（位置正确），然后形状在组内旋转和偏移


const stage=新Konva.stage({
容器：'容器'，
宽度：300，
身高：700
});
const layer=新的Konva.layer（）；
阶段。添加（层）；
常数旋转点=（{x，y}，rad）=>{
const rcos=数学cos（rad）；
常数rsin=数学sin（rad）；
返回{x:x*rcos-y*rsin，y:y*rcos+x*rsin}；
}
//将适用于具有左上角原点的形状，如矩形
常量rotateAroundCenter=（节点，旋转）=>{
//当前旋转原点（0，0）相对于所需原点-中心（node.width（）/2，node.height（）/2）
const topLeft={x:-node.width（）/2，y:-node.height（）/2}；
const current=rotatePoint（左上角，Konva.getAngle（node.rotation（））；
常量旋转=旋转点（左上角，Konva.getAngle（旋转））；
常数dx=旋转的.x-当前的.x，
dy=旋转的.y-当前的.y；
常数r=数学楼层（旋转/90）%4；
开关（r）{
案例1：
案例3：
node.x（node.x（）+dx+node.height（）/2）；
node.y（node.y（）+dy+node.width（）/2）；
打破
案例2：
违约：
node.x（node.x（）+dx+node.width（）/2）；
node.y（node.y（）+dy+node.height（）/2）；
打破
}
节点旋转（旋转）；
返回节点；
}
设x=200，y=250，width=30，height=75，text=“请提供一些代码或问题的最低表示形式。您只需手动将节点的位置移动到所需的数量，即可将节点保持在屏幕的预期位置。