三次贝塞尔曲线未更新

Question

我们正在使用 Fabricjs 并创建一个简单的三次贝塞尔曲线示例。当controlobjectpoint1被拖动或移动时，我们无法使曲线更新。

任何帮助将不胜感激。

// Set up Fabric.js canvas
var canvas = new fabric.Canvas('canvas');

// Control points for the Bezier curve
var startPoint = new fabric.Point(100, 300);
var controlPoint1 = new fabric.Point(200, 100);
var controlPoint2 = new fabric.Point(400, 500);
var endPoint = new fabric.Point(500, 300);

var bezierPath = new fabric.Path('M ' + startPoint.x + ' ' + startPoint.y + ' C ' + controlPoint1.x + ' ' + controlPoint1.y + ', ' + controlPoint2.x + ' ' + controlPoint2.y + ', ' + endPoint.x + ' ' + endPoint.y, {
    fill: '',
    stroke: 'black',
    strokeWidth: 2,
    selectable: false
  });

  console.log(bezierPath.path);
// Display control points
var controlPointRadius = 5;
var controlPointOptions = {
  fill: 'red',
  selectable: true,
  hasControls: false,
  hasBorders: false
};

var startControlPoint = new fabric.Circle({
  left: startPoint.x - controlPointRadius / 2,
  top: startPoint.y - controlPointRadius / 2,
  radius: controlPointRadius,
  ...controlPointOptions
});

var controlPoint1Object = new fabric.Circle({
  left: controlPoint1.x - controlPointRadius / 2,
  top: controlPoint1.y - controlPointRadius / 2,
  radius: controlPointRadius,
  ...controlPointOptions
});

var controlPoint2Object = new fabric.Circle({
  left: controlPoint2.x - controlPointRadius / 2,
  top: controlPoint2.y - controlPointRadius / 2,
  radius: controlPointRadius,
  ...controlPointOptions
});

var endControlPoint = new fabric.Circle({
  left: endPoint.x - controlPointRadius / 2,
  top: endPoint.y - controlPointRadius / 2,
  radius: controlPointRadius,
  ...controlPointOptions
});

document.getElementById("updatepath")
  .addEventListener("click", function(e) {
    updateBezierCurve();
    canvas.renderAll();
  });

// Update Bezier curve when control points are dragged
function updateBezierCurve() {
        
**    bezierPath.path[1] = ['C',50,50,400,500,500,300 ];
    canvas.renderAll();
    console.log(bezierPath.path);**
      
}

// Event listeners for control points
controlPoint1Object.on('moving', updateBezierCurve);
controlPoint2Object.on('moving', updateBezierCurve);
console.log(bezierPath.path);
// Add objects to canvas
canvas.add(bezierPath, startControlPoint, controlPoint1Object, controlPoint2Object, endControlPoint);

选项1 updateBezierCurve() 是映射到标准 Fabricjs 上的 controlPoint1/2“移动”事件的函数。

beizerPath 是路径数组，里面有两个条目。我们更改了 updateBezierCurve 中的值。但它永远不会更新曲线。

我们尝试了字符串和数组选项，但它不起作用。我们也已经使用了 set 和 setcorrds 函数。

选项2：认为移动不起作用，所以我们在html中创建了一个按钮，单击事件应该触发updateVeizerCurve函数。

在这两个选项中，我们都可以看到调用了 updateBezierCurve 函数，但是 renderAll 并没有更新曲线路径。它正在更新数组内的路径。

Answer 1

我们删除并添加一个新的 bezierPath 怎么样？

这是代码

var canvas = new fabric.Canvas('canvas');
const controlPathOptions = {
  fill: '', stroke: 'black',
  strokeWidth: 2,
  selectable: false
}
const controlPointOptions = {
  fill: 'red', stroke: 'black',
  selectable: true,
  hasControls: false,
  hasBorders: false
};

var bezierPath = new fabric.Path(
  'M 20 60 C 100 100, 200 50, 300 100', 
  controlPathOptions
 );
var startControlPoint = new fabric.Circle({
  left: 10, top: 50, radius: 5,
  ...controlPointOptions
});

function startControlPointMove(event) {
  canvas.remove(bezierPath);
  bezierPath = new fabric.Path(
    'M ' + event.e.x + ' ' + event.e.y + ' C 100 100, 200 50, 300 100',
    controlPathOptions
  );
  canvas.add(bezierPath);
  canvas.renderAll();
}

startControlPoint.on('moving', startControlPointMove);
canvas.add(bezierPath, startControlPoint);

<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<canvas id="canvas" width="400" height="200"></canvas>