javascript - Raphael js - gettotalLength() 和 getBBox.width

Question

谁能告诉我，为什么从点 (0,100) 到 (100,100) 的水平路径的总长度是 200，而 BBox 宽度是 100？

这是代码：

var p  = paper.path('M0 100 L100 100Z')
console.log(p.getTotalLength(), p.getBBox().width)
// Result 200, 100

Answer 1

当我们尝试绘制一条故意从路径中省略一侧的方形路径时，这个问题的答案就得到了最好的说明。

假设我们要绘制一个用户单位大小的正方形，它的一侧不包含在路径属性（d）中。所以我们会得到r.path('M0 0L1 0L1 1L0 1Z'); 或r.path(M0 0 1 0 1 1 0 1)。这里我们没有明确地画出正方形的最后一面。

我们预计路径的 getTotalLength 返回 3，但它会返回 4。这是因为笔必须关闭从路径中的最后一个点到路径中的第一个点的路径（的工作z）。即使您没有z在路径属性的末尾指定d，笔也会从路径中的最后一个点移动到路径的第一个点，并带有白色墨水笔触。所以绘制的总路径是用黑色墨水绘制正方形的 3 侧和用白色墨水绘制正方形的一侧，这就是它返回 4 的原因。这同样适用于线条。