动态绘制 polyline, 点使用相对定位,点小于起始点坐标时候,起始点偏移
- 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

### 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
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