5

私は paper.js のプロジェクトに取り組んでおり、他の 2 つの交差点、相違点、結合に基づいて新しいパスを作成する必要があります。掘り下げて、3 次ベジェ スプラインを補間する数学関数を見つけましたが、svg のようなベクトル演算を行う JavaScript ライブラリがあるかどうか疑問に思っていました。どちらかといえば、inkscape をコピーして JavaScript に変換しますが、わかりません。とにかく、3 次ベジエを補間するための数学関数は次のとおりです。

Pointx = (Ax * percent^3) + (Bx * 3 * (percent^2 * (1-percent))) + (Cx * 3 * (percent * (1-percent)^2)) + (Dx * (1-percent)^3)
Pointy = (Ay * percent^3) + (By * 3 * (percent^2 * (1-percent))) + (Cy * 3 * (percent * (1-percent)^2)) + (Dy * (1-percent)^3)

A、B、C、D は曲線のポイントです。A は始点、D は終点、B と C は A と D の間の曲率を操作する「コントロール ポイント」です。percentは、0 から 1 のスケールで計算するカーブに沿った距離です。

したがって、提供されたベジエのポイントとベジエに沿ったパーセンテージを返す補間関数を考え出すのは非常に簡単です。逆数 - 特定のポイント (または x 値または y 値) のパーセンテージを見つけることは困難です。または、2 つのベジエが交差する場合はさらに困難です (私は数学があまり得意ではありません)。それがinkscapeの機能が提供するものであることを願っています。

この種のベクトル補間をすばやく実行できる JavaScript ライブラリはありますか? そうでない場合は、ここに思いついたアルゴリズムを投稿します。ありがとうございました！

4

2 に答える 2

3

あなたが探しているのは、ポリゴンのブール演算と呼ばれるものです

Paper.js はかなり優れた BoolOps を使用するようになり、ベジエ曲線を直接処理します。あなたが私に尋ねた場合、これが最初の選択になるはずです。ここに良い例があります。

別のシナリオでは、 De-Casteljau アルゴリズムを使用してシェイプをポリゴン化し、Javascript Clipperにフィードできます。ハイ サンプリングを使用すると、視覚的な結果は真の曲線と同じになりますが、パスの曲がりくねった性質は失われます。

于 2013-08-18T10:12:58.053 に答える
1

これが重複した質問であるとまでは言えませんが、この質問は非常に似ているため、この質問への回答から大きな洞察が得られると思います。

ここで、その質問への回答の中で言及されていない別のリソースを見つけました: http://13thparallel.com/archive/bezier-curves/

それ以外は、その質問で言及された最高のリソースはここにあります: http://blog.mackerron.com/2011/01/01/javascript-cubic-splines/

これらのリソースはどちらも、探していることを実行する特定の機能について詳しく説明しています。それらは完全に「ライブラリ」ではありませんが、コードは目的に合わせてプロジェクトに簡単に移植できます。

于 2012-12-07T22:56:46.683 に答える