X6
X6 copied to clipboard
动态绘制 polyline, 点使用相对定位,点小于起始点坐标时候,起始点偏移
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
也遇到了,应该是画出来的图形是正方形,随着往右变大,然后坐标又一直是左上角导致
也遇到了,应该是画出来的图形是正方形,随着往右变大,然后坐标又一直是左上角导致
有什么好的解决方案啊,目前动态绘制别的图形,也遇到这个问题了.....