拉斐尔js - gettotalLength（）和getBBox.width

Question

任何人都可以告诉我，为什么从点（0,100）到（100,100）的水平路径的totalLength是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） 。即使您未在路径的d属性末尾指定z，笔也会从其路径的最后一点移动到白色笔画路径的第一个点。因此，绘制的总路径是黑色墨水正方形的3边和白色墨水正方形的一边，这就是为什么它返回4.这同样适用于线条。