Javascript 使用fabric.js用二次曲线绘制双线

我试图找出是否有可能使用fabric.js（）中包含的二次曲线函数绘制一条双线（如所附图像）。 有人知道这是可能的还是已经做到了？ 谢谢

---

下面是示例图像：

如果您只对视觉效果感兴趣，请检查此双渲染解决方案

var canvas=this.\uu canvas=newfabric.canvas（'c'）；
fabric.Object.prototype.originX=fabric.Object.prototype.originY='center'；
帆布({
“对象：已选定”：onObjectSelected，
“对象：移动”：onObjectMoving，
“之前：选择：清除”：onBeforeSelectionCleared，
“之后：渲染”：重新渲染
});
（函数（{
var line=newfabric.Path（'m650q1001002000'，{fill:''，stroke:'black'，strokeWidth:6}）；
行路径[0][1]=100；
行路径[0][2]=100；
行路径[1][1]=200；
行路径[1][2]=200；
行路径[1][3]=300；
行路径[1][4]=100；
line.selective=false；
canvas.add（行）；
变量p1=makeCurvePoint（200，200，null，line，null）
p1.name=“p1”；
canvas.add（p1）；
var p0=makeCurveCircle（100，100，线，p1，空）；
p0.name=“p0”；
canvas.add（p0.05）；
var p2=makeCurveCircle（300,100,null,p1,line）；
p2.name=“p2”；
canvas.add（p2）；
})();
函数makeCurveCircle（左、上、第1行、第2行、第3行）{
var c=新织物。圆({
左:左,，
顶:顶,，
冲程宽度：5，
半径：12，
填写：“#fff”，
笔划：“#666”
});
c、 hasBorders=c.hasControls=false；
c、 line1=line1；
c、 line2=line2；
c、 line3=line3；
返回c；
}
函数makeCurvePoint（左、上、第1行、第2行、第3行）{
var c=新织物。圆({
左:左,，
顶:顶,，
冲程宽度：8，
半径：14，
填写：“#fff”，
笔划：“#666”
});
c、 hasBorders=c.hasControls=false；
c、 line1=line1；
c、 line2=line2；
c、 line3=line3；
返回c；
}
选定对象上的函数（e）{
var activeObject=e.target；
if（activeObject.name==“p0”| | activeObject.name==“p2”）{
activeObject.line2.animate（'opacity'，'1'，'{
持续时间：200，
onChange:canvas.renderAll.bind（canvas），
});
activeObject.line2.selective=true；
}
}
功能在选择之前打开清除（e）{
var activeObject=e.target；
if（activeObject.name==“p0”| | activeObject.name==“p2”）{
activeObject.line2.animate（'opacity'，'0'，'{
持续时间：200，
onChange:canvas.renderAll.bind（canvas），
});
activeObject.line2.selective=false；
}
else if（activeObject.name==“p1”）{
activeObject.animate（'opacity'，'0'，'{
持续时间：200，
onChange:canvas.renderAll.bind（canvas），
});
activeObject.selective=false；
}
}
函数重新渲染器（）{
var line=canvas.getObjects（）[0]；
line.stroke='白色'；
线宽=4；
line.render（canvas.contextContainer）；
line.stroke='黑色'；
线宽=6；
}
函数onObject移动（e）{
如果（e.target.name==“p0”| e.target.name==“p2”）{
var p=e.target；
如果（第1页）{
p、 line1.路径[0][1]=p.left；
p、 line1.path[0][2]=p.top；
}
否则，如果（第3行）{
p、 第3行。路径[1][3]=p.left；
p、 line3.path[1][4]=p.top；
}
}
否则如果（e.target.name==“p1”）{
var p=e.target；
如果（第2页）{
p、 第2行。路径[1][1]=p.left；
p、 line2.path[1][2]=p.top；
}
}
else if（e.target.name==“p0”| | e.target.name==“p2”）{
var p=e.target；
p、 line1&&p.line1.set（{'x2'：p.left，'y2'：p.top}）；
p、 line2&&p.line2.set（{'x1'：p.left，'y1'：p.top}）；
p、 line3&&p.line3.set（{'x1'：p.left，'y1'：p.top}）；
p、 line4&&p.line4.set（{'x1'：p.left，'y1'：p.top}）；
}
}

当然可以。找到连接两个圆的中心点的线。然后在该直线的端点处找到垂直直线。在垂直于点的方向上向外移动距离n（拾取n的值）。这是一个Q1端点。沿垂直线的另一方向向外移动距离n。该点是Q2端点。对连接线的其他端点执行相同操作，以获得其他Q1和Q2端点。沿连接线的任意位置找到一条垂线。走出距离m（您选择m）。这是Q1的ctrl pt。在垂直方向上继续n。这是第二季度的问题，你已经做了吗？你能给我举个例子吗？