antvis / antvis/X6

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

Open
#3,870 3 comments 0 reactions 0 assignees View on GitHub
type: bug 缺陷
Dominant language
TypeScript
Stars
6.7k
Forks
1.9k
PR merge metrics
No merged PRs in 30d

Description

### 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](https://github.com/antvis/X6/assets/25027143/2b907f1f-5881-449a-b5b3-fd4b7d9afc68)

### Platform

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

### Additional context

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the Graph event handlers in the reproduction, especially pageToLocal and the polyline node's points handling when points become negative relative to the starting position. Reproduce the drag path where the cursor moves before the start point, then trace how the polyline shape updates its position and points. Done means the starting point remains fixed while the final point moves correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.