用Fabric.js绘制贝塞尔曲线

Question

我想绘制Bezier，使用Fabric.js Path方法，问题是Path将连接开头到结尾，但我不想这样做。

Answer 1

对于你的问题，Path将连接从开头到结尾。

是的，它会连接。

但我不想这样做。

虽然现在没有任何东西可以避免这种行为。但是，是的，有一种解决方法，使用它你的路径看起来好像开始和结束都加入了。请参阅下面的演示。有两条路径显示连接的开始和结束（三角形）。第二个结束和开始似乎没有连接（箭头）。这两者之间的区别仅在于第二条路径中的 fill 属性设置为false，即箭头。但是如果省略 fill 属性或将其设置为某种颜色，它将看起来与具有关节结束和开始的第一个路径（三角形）类似。因此，您可以根据需要创建贝塞尔曲线。

＆＃13;

＆＃13;

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');
//var canvas = new fabric.StaticCanvas('c');
var path = new fabric.Path('C 50 50 100 100 150 50 C 200 100 250 50 300 100', {
left: 100,
top: 50,
stroke: 'red',
strokeWidth: 1,
fill: false,
scaleY:3
});
canvas.add(path);


var p = new fabric.Path('C 50 50 100 100 150 50 C 200 100 250 50 300 100',{
  left: 200,
  top: 60,
  strokeWidth:2,
  scaleY:3
});

canvas.add(p);

＆＃13;

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

＆＃13;

＆＃13;

＆＃13;

希望有所帮助：）

<强>更新

<强> Fiddle

上面是小提琴链接，你会看到正在创建两个路径而第三个路径没有被创建，因为传递的路径字符串无效。

还可以请您创建一个演示程序来解决您遇到的实际问题。我很容易帮助和理解这个问题。