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

Question

我想使用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}`, {fill: '', strokeWidth: 3, stroke: 'red'});
  
  
  canvas.remove(prevPath);
  canvas.add(newPath);
  canvas.requestRenderAll();
  canvas.setActiveObject(newPath);
});

canvas.add(path);

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