动态绘制 polyline, 点使用相对定位，点小于起始点坐标时候，起始点偏移

light-years-run commented 1 year ago

Describe the bug

通过鼠标点击，移动和双击事件，动态绘制polyline 鼠标点击事件中第一次新增一个shape为polyline的图形，后面的点击增加点移动事件中，动态修改最后一个点双击事件中，结束绘制点赋给polyline的points属性，采用相对定位

在移动事件中，如果鼠标坐标小于起始点的时候，起始点会偏移

Your Example Website or App

代码如下

Steps to Reproduce the Bug or Issue

复现代码：

import { Graph } from '@antv/x6'

const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
})

let line = null;
let points = []
let begin = {x: 0,y: 0}

function startDraw(e){

  let { pageX, pageY } = e;
  let p = graph.pageToLocal(pageX, pageY);
  if (!line) {
    begin = p;
    line = graph.addNode({
      shape: 'polyline', 
      x: p.x,
      y: p.y,
      width: 0,
      height: 0,  
      attrs: {
          body: {
              stroke: 'blue',
              fill: 'none',
              strokeWidth: 2
          }
      }
    })
    points.push([0, 0])
    line.points = points;
  }else{     
    points.push([
        p.x - begin.x,
        p.y - begin.y,
    ]);
    line.points = points;
  }

}
function continueDraw(e){
  if (line) {
      let { pageX, pageY } = e;
      let p = graph.pageToLocal(pageX, pageY);
      let newPoint = [
          p.x - begin.x,
          p.y - begin.y,
      ];
      const newPoints = [...points, newPoint];
      line.points = newPoints;
  }
}
function stopDraw(e){
  if (!line) return

    graph.container.removeEventListener('mousedown', startDraw);
    graph.container.removeEventListener('mousemove', continueDraw);
    line = null
}

graph.container.addEventListener('mousedown', startDraw);
graph.container.addEventListener('mousemove', continueDraw);
graph.on('node:dblclick',stopDraw);

Expected behavior

起始点不偏移

Screenshots or Videos

Video_2023-08-24_150328

Platform

OS: [e.g. macOS, Windows, Linux]
Browser: [e.g. Chrome, Safari, Firefox]
Version: [e.g. 2.11.1]

Additional context

No response

naanna commented 1 year ago

也遇到了，应该是画出来的图形是正方形，随着往右变大，然后坐标又一直是左上角导致

light-years-run commented 10 months ago