AntV X6拖拽放置进画布的定位优化（Vue3+TypeScript）

 以下是未优化的版本（在第一篇文章有讲解）

方案是根据pageToLocal进行位置计算，但是每次的原点都是在左上角 ，因为SVG坐标系是以左上角为原点，导致放置的地方就会有偏差。

 

 

原来的代码： 

    //****拖拽后放置****//
const ondragEnd = (event:DragEvent,item:any) => {const { x, y } = graph.value!.pageToLocal(event.pageX, event.pageY); // 将页面坐标转换为画布本地坐标。addDragNode(x, y, item);
}

优化后：

通过思索，其实也就是把坐标原点的定位移至中心即可，那么就是节点的大小（代码里的nodewidth喝nodeheight），这个大小根据后续添加的节点自我设置，然后减去X轴和Y轴减去他们的一半即可。

    //****拖拽后放置****//
const ondragEnd = (event: DragEvent, item: any) => {// 获取鼠标在画布中的坐标const { x, y } = graph.value!.pageToLocal(event.pageX, event.pageY);// 假设我们有 item 的宽度和高度const nodeWidth = 150; // 你需要根据实际情况设置 item 的宽度const nodeHeight = 100; // 你需要根据实际情况设置 item 的高度// 调整坐标，使节点的中心在鼠标放置的位置const adjustedX = x - nodeWidth / 2;const adjustedY = y - nodeHeight / 2;// 添加节点到画布上，使用调整后的坐标addDragNode(adjustedX, adjustedY, item);
}

 成品图（位置正确）：