Javascript 无法通过Fabric Js中的线连接终结点

我正在尝试使用canvas Fabric Js通过线连接端点（在我的例子中是圆）。我能画圆圈，但不能用线把它们连接起来。 以下是源代码：

const canvas=new fabric.canvas（'gameCanvas'{
选择：false
});
fabric.Object.prototype.originX=fabric.Object.prototype.originY='center'；
document.addEventListener（'DOMContentLoaded'，function（）{
绘图路径（）；
});
函数生成线（coords）{
var l=新结构线（坐标{
填充：“红色”，
笔划：“红色”，
冲程宽度：1，
原文：“中心”，
原文：'中心'，
可选：false，
鼠标悬停光标：“默认”
});
返回l；
}
函数makeCircle（x，y）{
返回新织物。圈({
左:x,，
上图：y，
冲程宽度：2，
半径：4，
填充：“白色”，
笔划：'#666'，
可选：false，
鼠标悬停光标：“默认值”，
哈斯：错，
hasBorders:错误
});
}
函数drawPath（）{
const circle1=makeCircle（52.69,17.77）；
const circle2=makeCircle（262.69,120.77）；
const circle3=makeCircle（272.69232.77）；
canvas.add（圆圈1、圆圈2、圆圈3）；
const line1=生成线（[circle1.x，circle1.y，circle2.x，circle2.y]）；
constline2=生成线（[circle2.x，circle2.y，circle3.x，circle3.y]）；
canvas.add（第1行，第2行）；
}

每个
[circle1.x，circle1.y，circle2.x，circle2.y]
元素都是
未定义的
。请检查下面的代码片段。（）


const canvas=new fabric.canvas（'gameCanvas'{
选择：false
});
fabric.Object.prototype.originX=fabric.Object.prototype.originY='center'；
document.addEventListener（'DOMContentLoaded'，function（）{
绘图路径（）；
});
函数生成线（coords）{
var l=新结构线（坐标{
填充：“红色”，
笔划：“红色”，
冲程宽度：1，
原文：“中心”，
原文：'中心'，
可选：false，
鼠标悬停光标：“默认值”，
事件：错误
});
返回l；
}
函数makeCircle（x，y）{
返回新织物。圈({
左:x,，
上图：y，
冲程宽度：2，
半径：4，
填充：“白色”，
笔划：'#666'，
可选：false，
鼠标悬停光标：“默认值”，
哈斯：错，
hasBorders:错误
});
}
函数drawPath（）{
const circle1=makeCircle（52.69,17.77）；
const circle2=makeCircle（262.69,120.77）；
const circle3=makeCircle（272.69232.77）；
canvas.add（圆圈1、圆圈2、圆圈3）；
const line1=生成线（[circle1.left，circle1.top，circle2.left，circle2.top]）；
const line2=生成线（[circle2.left，circle2.top，circle3.left，circle3.top]）；
canvas.add（第1行，第2行）；
}
在圆对象中没有名为
x
或
y
的属性，这些属性为您提供了未定义的属性，请使用
left
或
top

演示


const canvas=new fabric.canvas（'gameCanvas'{
选择：false
});
fabric.Object.prototype.originX=fabric.Object.prototype.originY='center'；
document.addEventListener（'DOMContentLoaded'，function（）{
绘图路径（）；
});
函数生成线（coords）{
var l=新结构线（坐标{
填充：“红色”，
笔划：“红色”，
冲程宽度：1，
可选：false，
鼠标悬停光标：“默认值”，
原文：“中心”，
原创：“中心”
});
返回l；
}
函数makeCircle（x，y）{
返回新织物。圈({
左:x,，
上图：y，
冲程宽度：2，
半径：4，
填充：“白色”，
笔划：'#666'，
可选：false，
鼠标悬停光标：“默认值”，
哈斯：错，
hasBorders:错误
});
}
函数drawPath（）{
const circle1=makeCircle（52.69,17.77）；
const circle2=makeCircle（262.69,120.77）；
const circle3=makeCircle（272.69232.77）；
const line1=生成线（[circle1.left，circle1.top，circle2.left，circle2.top]）；
const line2=生成线（[circle2.left，circle2.top，circle3.left，circle3.top]）；
canvas.add（第1行，第2行）；
canvas.add（圆圈1、圆圈2、圆圈3）；
}

@Xris这个问题是否回答了你的问题是的，你是对的，伙计，它在工作，但有一个小问题，我如何让线只接触圆圈而不是像现在这样穿过它？是的，你是对的，伙计，它在工作，但有一个小问题，我如何使线只接触圆圈，而不是像现在这样穿过它？@Xris如果没有任何问题，请填充该圆圈white@Xris，您已经将圆形填充为白色，只需先将线条添加到画布，然后添加圆形即可。检查更新的代码段。