Javascript KonvaJS-围绕光标旋转矩形而不使用偏移

我使用KonvaJS将矩形拖放到预定义的插槽中。一些插槽需要旋转90度。我在垂直旋转的插槽周围有一个点击框，因此当用户将矩形拖动到该区域时，它将自动旋转90度（以匹配方向）。当它旋转时，它会从鼠标下方移出。这可以通过偏移来解决，但是在捕捉后，矩形在视觉上不会与长方体对齐。这可以（可能）用额外的代码来解决

我尝试旋转矩形，然后在鼠标下移动它。由于用户仍在拖动它，这似乎没有按我的计划工作

是否可以在不使用偏移量的情况下强制鼠标下方的矩形旋转？

这是一个显示问题的小提琴-可以通过将第一个变量设置为true来演示偏移问题。

var-width=window.innerWidth；
var height=window.innerHeight；
var rectangleLayer=新的Konva.Layer（）；
var holdingSlotsLayer=new Konva.Layer（）；
var controlLayer=new Konva.Layer（）；
var阶段=新Konva.阶段({
容器：'容器'，
宽度：宽度，
高度:高度,，
德拉格布尔：是的
});
//垂直等待点
holdingSlotsLayer.add（新的Konva.Rect({
x:300，
y:25，
宽度：130，
身高：25，
填写：“#fff”，
可拖动：错误，
轮换：90，
笔划：“#000”
}));
//水平等待点
holdingSlotsLayer.add（新的Konva.Rect({
x:25，
y:75，
宽度：130，
身高：25，
填写：“#fff”，
可拖动：错误，
轮换：0，
笔划：“#000”
}));
//蒙版，在不希望翻转矩形的位置周围设置边界
controlLayer.add（新Konva.Rect({
x:215，
y:15，
宽度：150，
身高：150，
填写：“#fff”，
可拖动：错误，
名称：‘A’，
不透明度：0.5
}));
阶段。添加（holdingSlotsLayer，controlLayer）；
//求交函数
函数交叉点（占位符、矩形、区域）{
if（rectangle.rotation==0 | | zone==true）{
回来(
矩形.x>占位符.x+占位符.width||
矩形.x+矩形.width<占位符.x||
矩形.y>占位符.y+占位符.height||
矩形.y+矩形.height<占位符.y
);
}否则{
回来(
矩形.x>占位符.x+25||
矩形.x+矩形.width<占位符.x||
矩形.y>占位符.y+占位符.height+90||
矩形.y+矩形.height<占位符.y
);
}
}
//函数创建矩形组（这样我们可以在矩形上放置文本）
函数矩形（角度）{
var rectangleGroup=新Konva.Group({
x:95，
y:95，
宽度：130，
身高：25，
旋转：角度，
真的，
});
矩形组。添加（新Konva.Rect({
宽度：130，
身高：25，
填充：“浅蓝色”
}));
矩形组。添加（新Konva.Text({
正文：“123”，
尺码：18，
fontFamily：“Calibri”，
填写：“#000”，
宽度：130，
填充：5，
对齐：“居中”
}));
//绑定到拖动移动事件的函数
矩形组.on（'dragmove'，（e）=>{
//用于占位符交叉点的收缩矩形复选框
变量维度={
“高度”：3，
“宽度”：5，
“x”：e.target.attrs.x，
“y”：e.target.attrs.y，
“旋转”：e.target.attrs.rotation
};
//在固定槽上循环，查看是否存在交叉点。
for（var i=0；holdingSlotsLayer.children.length>i；i++）{
//如果为true，请更改我们悬停的插槽的外观
if（haveIntersection（holdingSlotsLayer.children[i].attrs，dimensions，false））{
holdingSlotsLayer.children[i].attrs.fill='#C41230'；
holdingSlotsLayer.children[i].attrs.dash=[10,3]；
holdingSlotsLayer.children[i].attrs.stroke='#000'；
//否则，将属性设置回正常
}否则{
holdingSlotsLayer.children[i].attrs.fill='#fff'；
holdingSlotsLayer.children[i].attrs.dash=null；
holdingSlotsLayer.children[i].attrs.stroke=null；
}
}
//检查是否处于需要将矩形翻转90度的区域
if（haveIntersection（controlLayer.children[0].attrs，dimensions，true））{
如果（矩形组.attrs.rotation！=90）{
矩形组.attrs.rotation=90；
}
}否则{
矩形组.attrs.rotation=0；
}
stage.batchDraw（）；
});
矩形组.on（'dragend'，（e）=>{
for（var i=0；holdingSlotsLayer.children.length>i；i++）{
//如果停车层有亮起的元素，则捕捉到位置。。
if（holdingSlotsLayer.children[i].attrs.fill='#C41230'）{
矩形组位置({
x:holdingSlotsLayer.children[i].attrs.x，
y:holdingSlotsLayer.children[i].attrs.y
});
holdingSlotsLayer.children[i].attrs.fill='#fff'；
holdingSlotsLayer.children[i].attrs.dash=null；
holdingSlotsLayer.children[i].attrs.stroke=null；
}
}
stage.batchDraw（）；
});
矩形层。添加（矩形组）；
添加（矩形层）；
}

正文{
保证金：0；
填充：0；
溢出：隐藏；
背景色：#D3；
背景尺寸：封面；
}
#描述{
位置：绝对位置；
顶部：5px；
左：5px；
}

繁殖矩形

这里有一个简单的函数，可以在不使用konva offset（）的情况下旋转鼠标下的矩形。我使用了一个tween来应用移动，但是如果您不想使用tween，只需应用rect.rotate（），然后应用newPos x&y作为位置

编辑：OP指出，如果单击，按住鼠标，同时矩形完成动画，然后拖动，则矩形将跳开。有什么好处？当mousedown事件运行时，Konva会记录形状在其内部拖动函数中的初始位置。然后当我们开始实际拖动时

 rect.stopDrag(); 
 rect.startDrag();