fabricjs，画布，svg，路径，曲线

编程问答 2022-05-31

问题描述

我想使用fabricjs创建一个动态的曲线路径。这是它的最后一点会随着用户移动鼠标指针而改变。

我在这里面临的问题是我失去了曲线，当我向上移动鼠标时，它变成了一条直线。

如何在更新路径时保持曲线。

代码

// canvas has a width and height of 500px 
const canvas = new fabric.Canvas('c');

const path = new fabric.Path("M 250 250 q 100 -75 200 0",{fill: '',strokeWidth: 3,stroke: 'red'}
);

canvas.on("mouse:move",(e) => {
  const prevPath = canvas.getActiveObject();
  
  const mouse = canvas.getPointer(e.e);
  
  const pathWidth = mouse.x - prevPath.left;
  const curvePoint = pathWidth/2;
  let curve = pathWidth * 35/100 * -1;
  
  const angle = mouse.y - (prevPath.top) - prevPath.height;
  
  const newPath = new fabric.Path(`M 250 250 q ${curvePoint} ${curve} ${pathWidth} ${angle}`,stroke: 'red'});
  
  
  canvas.remove(prevPath);
  canvas.add(newPath);
  canvas.requestRenderAll();
  canvas.setActiveObject(newPath);
});

canvas.add(path);

代码笔链接 https://codepen.io/Seinfeld/pen/RwGybee?editors=0010

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

beziercanvascurvefabricjssvgsvgsvg