如何在 Fabric.js/JavaScript 中使用正向运动学创建 2D 骨架？

Question

我尝试在 Fabric.js 中创建 2D 运动学骨架已有一段时间，但每次尝试都证明与上次一样不成功。看了很多视频，看了很多文章，都没有达到我想要的效果

预期行为：

所有部分都应该使用 SVG 图像作为节点，因为我计划渲染其他图像来代替圆圈，它们只是表示关节位置。所有部分都应该可以用鼠标拖动。如果一个部件被拖动，它会自己旋转，如果适用，任何基于鼠标位置的子/孙子。例如，如果拖动shoulder，则arm和hand部分也应该旋转。如果拖动arm部分，hand部分也要旋转，shoulder不要旋转。如果手移动，肩和臂部分都不应移动。

零件也不应超出它们及其父级的长度。如果您看一下官方 Fabric.js stickman 演示，您会注意到零件很容易偏离他们的“父母”太远，造成不切实际的旋转。

有关预期行为，请参阅这个 YouTube 视频。

这里有一些示例显示了 shoulder、arm 和 hand 部分的旋转。