X6 icon indicating copy to clipboard operation
X6 copied to clipboard

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

Open light-years-run opened this issue 2 years ago • 3 comments

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

light-years-run avatar Aug 24 '23 07:08 light-years-run

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

naanna avatar Sep 19 '23 06:09 naanna

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

有什么好的解决方案啊,目前动态绘制别的图形,也遇到这个问题了.....

light-years-run avatar Dec 20 '23 00:12 light-years-run