diff --git a/src/components/spray/trayGraph/index.vue b/src/components/spray/trayGraph/index.vue index a95d0b7..fa1096a 100644 --- a/src/components/spray/trayGraph/index.vue +++ b/src/components/spray/trayGraph/index.vue @@ -76,7 +76,8 @@ const addSelect = () => { }) // 在onMounted中rect创建后添加拖拽监听 - rect.value.on('dragmove', () => { + rect.value.on('dragmove', (event: any) => { + event.cancelBubble = true // 阻止事件冒泡 const pos = rect.value.position() const width = newWidth const height = newHeight @@ -91,13 +92,14 @@ const addSelect = () => { // 修正位置 rect.value.position({ x: newX, y: newY }) + layer.value.batchDraw() // 刷新层以反映更新后的位置 }) tr.value = new Konva.Transformer({ rotationEnabled: false, rotateEnabled: false, // 禁用旋转手势 - rotationSnaps: [], // 移除旋转刻度 - anchorSize: 20, + // rotationSnaps: [], // 移除旋转刻度 + anchorSize: 25, // enabledAnchors: ['top-center', 'bottom-center', 'middle-left', 'middle-right'], // 关键修改 enabledAnchors: props.editSelect ? ['top-center', 'bottom-center', 'middle-left', 'middle-right'] : [], boundBoxFunc(oldBoundBox, newBoundBox) { @@ -121,6 +123,14 @@ const addSelect = () => { return newBoundBox }, }) + // 监听 Transformer 的事件以阻止冒泡 + tr.value.on('dragmove', (event: any) => { + event.cancelBubble = true // 阻止事件冒泡 + }) + + tr.value.on('dragend', (event: any) => { + event.cancelBubble = true // 阻止事件冒泡 + }) layer.value.add(rect.value) layer.value.add(tr.value)