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

I like Code?2024-10-18 17:39

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

方案是根据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);
}

成品图（位置正确）：