我正在使用 KonvaJS 將矩形拖放到預(yù)定義的插槽中。一些插槽需要旋轉(zhuǎn) 90 度。我在垂直旋轉(zhuǎn)的插槽周圍有一個(gè)命中框，因此當(dāng)用戶將矩形拖入該區(qū)域時(shí)，它將自動(dòng)旋轉(zhuǎn) 90 度（以匹配方向）。當(dāng)它旋轉(zhuǎn)時(shí)，它會(huì)從鼠標(biāo)下方移出。這可以通過(guò)偏移來(lái)解決，但是在捕捉后矩形不會(huì)在視覺上與框?qū)R。這可以（可能）通過(guò)附加代碼來(lái)解決。我試圖旋轉(zhuǎn)矩形，然后在鼠標(biāo)下移動(dòng)它。由于用戶仍在拖動(dòng)它，這似乎沒(méi)有按我的計(jì)劃工作。是否可以在不使用偏移的情況下強(qiáng)制矩形在鼠標(biāo)下旋轉(zhuǎn)？這是一個(gè)顯示問(wèn)題的小提琴 - 可以通過(guò)將第一個(gè)變量設(shè)置為 true 來(lái)演示偏移問(wèn)題。 https://jsfiddle.net/ChaseRains/1k0aqs2j/78/var width = window.innerWidth;var height = window.innerHeight;var rectangleLayer = new Konva.Layer();var holdingSlotsLayer = new Konva.Layer();var controlLayer = new Konva.Layer();var stage = new Konva.Stage({ container: 'container', width: width, height: height, draggable: true});//vertical holding spotholdingSlotsLayer.add(new Konva.Rect({ x: 300, y: 25, width: 130, height: 25, fill: '#fff', draggable: false, rotation: 90, stroke: '#000'}));//horizontal holding spotholdingSlotsLayer.add(new Konva.Rect({ x: 25, y: 75, width: 130, height: 25, fill: '#fff', draggable: false, rotation: 0, stroke: '#000'}));//mask to set boundaries around where we wannt to flip the rectanglecontrolLayer.add(new Konva.Rect({ x: 215, y: 15, width: 150, height: 150, fill: '#fff', draggable: false, name: 'A', opacity: 0.5}));stage.add(holdingSlotsLayer, controlLayer);//function for finding intersectionsfunction haveIntersection(placeHolder, rectangle, zone) { if (rectangle.rotation == 0 || zone == true) { return !( rectangle.x > placeHolder.x + placeHolder.width || rectangle.x + rectangle.width < placeHolder.x || rectangle.y > placeHolder.y + placeHolder.height || rectangle.y + rectangle.height < placeHolder.y ); } else { return !( rectangle.x > placeHolder.x + 25 || rectangle.x + rectangle.width < placeHolder.x || rectangle.y > placeHolder.y + placeHolder.height + 90 || rectangle.y + rectangle.height < placeHolder.y ); }}
KonvaJS - 圍繞光標(biāo)旋轉(zhuǎn)矩形而不使用偏移
UYOU
2022-01-13 16:09:11
