ポイント (0,100) から (100,100) までの水平パスの totalLength が 200 で、BBox-width が 100 であるのはなぜですか?
コードは次のとおりです。
var p = paper.path('M0 100 L100 100Z')
console.log(p.getTotalLength(), p.getBBox().width)
// Result 200, 100
ポイント (0,100) から (100,100) までの水平パスの totalLength が 200 で、BBox-width が 100 であるのはなぜですか?
コードは次のとおりです。
var p = paper.path('M0 100 L100 100Z')
console.log(p.getTotalLength(), p.getBBox().width)
// Result 200, 100
この質問への答えは、パスから意図的に辺の1つを省略して正方形のパスを描画しようとしたときに最もよく示されます。
1つのユーザーユニットのサイズの正方形を描画し、その辺の1つをpath attribute(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辺が黒インクで、正方形の1辺が白インクであるため、4が返されます。同じことが線にも当てはまります。