1

SVG をフリーハンドで描画するために、javascript でシンプルなペイント ツールを実装しようとしています。フリーハンドでは、描画中にポリラインを使用しています。描画が完了したら、曲線を滑らかにするためにGoogleの描画と同じように曲線を作成しようとしています。そしてもちろん、私は実際に適切な平滑化ロジックを考案したことはなく、これまで試したこともありません。私が現在使用しているのは、ポリラインの 4 つのポイントごとに 1 つを取得して、そこから曲線を作成することです。これは悪いアプローチかもしれませんが、これは試してみる価値があると私が最初に考えたものです。

<path stroke="black" opacity="1" stroke-width="10" shape-rendering="geometric-precision" fill="none" d="M 1452 559 C 1452 556 1317 518 1308 521 1296 528 1289 537 1281 542 1277 549 1272 559 1267 566 1265 578 1265 585 1263 592 1263 599 1260 606 1258 616 1253 627 1248 639 1244 656"> </path>

しかし、クロムではこのエラーが発生 Problem parsing d="M 1452 559 C 1452 ... しますが、SVG ですべてをレンダリングしています。なぜそれが起こっているのか、クロムだけで知りたいだけです。

4

1 に答える 1

1

これはクロムのエラーではありません。ベジエ曲線には 2 つの制御点と終点が必要です。つまり、開始点以外に最低 3 つの点が必要です。一連の曲線の場合、点の数は曲線の始点が終点であるため、3 の倍数である必要があります。前。
ポイントが 3 の倍数でない場合、chrome はエラーをスローしますが、それでもレンダリングします。

于 2013-01-26T09:47:35.240 に答える