私は SVG パスを a として正確に表現しようとしていますがUIBezierPath、残念ながらaddArconUIBezierPathは楕円を考慮せず、円のみを考慮しています (半径の値は 1 つだけです)。

私の考えでは、円弧を svg 曲線として細かく分割することですが、計算方法がわかりません。

作りたい形が分かっていれば、例えば右上隅の弧を回すことができます

a150,150 0 1,0 150,-150曲線にc82.84,0,150,44.77,150,100

しかし、可能性のある円弧を解析するので、楕円を分割する方法と、各ベジエ曲線の制御点を計算する方法を知る必要があります。

この方法で計算された 3 次曲線を示すさまざまなリソースを見てきました... http://www.spaceroots.org/documents/ellipse/node12.html

しかし、これをコードで表現する方法がわかりません

これは私がこれまでに持っているものです....

aSVG のパスの値

radiusX radiusY rotationOfArcX isLarge isSweep destinationX destinationY

編集

@Spektreあなたの答えは、いくつかの単純なパスをレンダリングすると見栄えがしますが、大きな+スイープの組み合わせに応じてパスが移動します。

例えば

小さいスイープ / 大きいスイープなし

M 180.0 80.0 a50,50 0 0,1 50,50 z

M 180.0 80.0 a50,50 0 1,0 50,50 z

X が翻訳されました +100

^^ 小さなスイープの例

スモール ノー スイープ / ラージ スイープ

M 180.0 80.0 a50,50 0 0,0 50,50 z

M 180.0 80.0 a50,50 0 1,1 50,50 z

Y が翻訳されました +100

^^ 大掃引の例

あなたの弧の私のコードバージョン

M 10 70 a 133.591805 50 12.97728 0 0 70 -50 z

あなたのコードの私のバージョン

質問

キュービック (2d) ベジェ曲線B(t)の点Q を取得する必要があります。ここで、点Qから別の特定の点Pへの線がベジェ曲線と垂直に交差します。

• 私は知っています: P , B(t)
• Qを探します(基本的には g の勾配が必要ですが、 Qがわかっていれば簡単に計算できますが、 gの勾配で十分です)

今までやってきたこと（飛ばしていいです）

このアンザッツは間違っていると思うことに注意してください。これは完全を期すためにのみ含まれています。

数学の（基本的な）知識でこれを解こうとしましたが、完成できません。これは私が今持っているものです（表記法に厳密になりすぎないでください。私はこれがあまり得意ではありません）：

次の式は、 y(x)とx(y)について計算する必要がある 1 つの結果を取得するためにy(x)として表されます。点Pは制御点、QはQからPへの線g(x)がベジエ曲線B (t) = (x, y) ^Tで垂直になる点です。線g(x)の式は、次のように取得できます。

ここで、B(x)はデカルト座標のベジエ曲線、B'(x)は微分 (デカルト座標)、kは y 軸との交点です。g(x)の勾配を得るには、解かなければなりません

B(x)を計算するには、 B (t)をtについて解いてから、それをB (t) に代入する必要があります。したがって、ベジエ曲線上の各点には関係があります

これは導関数B '(t)にも当てはまります。

B (t)の導関数は (ウィキペディアによると)

これを t について ( wolfram alphaで) 解くと、

ここで、a ₀ = ( P ₁ - P ₀ ) _x、a ₁ = ( P ₂ - P ₁ ) _x、およびa ₂ = ( P ₃ - P ₂ ) _xです。*t _i *s をB (t)に戻すと、 ( t ₁のwolfram alpha 、t ₂のwolfram alpha 、t ₃の wolfram alpha )が得られます。

次に、y = B'(x)と 2 番目の方程式を使用してxを消去しますが、方法がわかりませんし、これが可能かどうかもわかりません。

エディターでノードを接続するためにフラグメント シェーダーのみでベジエ曲線を描画したい。ベジエ曲線を定義する 4 つの点はすべて知っています。Fragment Shader はすべてのピクセルに対して呼び出されるため、確認することができます: gl_Coord.x の "t" が 0 と 1 の間にある場合は、たとえば、frag_color を Red に設定します。非効率なシェーダーのループを回避したい。最良の方法は、曲線上にあるポイントをチェックすることだと思います。しかし、ベジエ曲線の場合はどうすればよいでしょうか?

3次ベジェ方程式から「t」変数を表現することは可能ですか?

Web サイトの Wolfram Aplha で、その式を (GetBezierT 関数で) 教えてください。しかし、式は間違った「t」値を与え、曲線の代わりに放物線の半分を持っています:

アップデート

ミスをする。探しても無駄だと思いましたt。我慢しようと思いました。Salix albaしかし、とで与えられた答えの後、が に等しい場合、これはこの点が曲線上にあることを意味することStratubasに気付きました。各点の式では、 との両方に の値が代入されているからです。異なる場合があり、この曲線上のポイントを与えることもできますが、それは無視できます。ベジエ曲線を構築するアルゴリズムは、直線的に増加して式に代入することを意味し、曲線がどれだけねじれても問題ありません。アルゴリズムは、曲線に沿って次の各点の座標を順番に返します。tXtYtxytXtYt

したがって、まず最初に、この質問をもう一度開きます: 3 次ベジエ方程式から変数 t を表現するにはどうすればよいですか?

tを表現してみましたが、めちゃくちゃ難しいです。「科学的目的」のためのこのアプローチの有効性を評価する必要があります =)。ここで質問する前にいろいろ調べましたが、この方法を使おうとしている人はいませんでした。理由を理解する必要があります。

更新 2

あなたは素晴らしい仕事をしました！こんなに詳しい回答をいただけるとは思っていませんでした。まさに私が必要としていたもの。すべてを確認する時間をください =)

更新 3

結論: t3 次ベジェ方程式からの の正確な表現。時間のかかる作業ですが、近似値は実用的ではありません。この問題を解決するには、方程式データを分析し、パターンを見つけて、ベジエ曲線を構築するための新しい式を開発する必要があります。変数間の新しい関係によりt、異なる方法で表現することが可能になります。の値に応じて、式の 4 つの部分の関数によって生成される 4 つの係数 ( - )xによる制御点の座標の積の合計の形で 3 次ベジエ式を表す場合 v0v3t. これにより、式 x = ax * v0 + bx * v1 + cx * v2 + dx * v3 が得られます。下の表を見ると、変数tの式が 4 つの未知数を持つ方程式であることがわかります。係数の値とそれらの間の関係の両方が、V反復ごとに予測できない方法で変化するためです。その新しい抽象的な公式を見つけることは、この質問と私の能力の範囲を超えています。

皆さんの作業、特にSpektreレンダリング アルゴリズムを最適化するための独自の開発と努力に感謝します。あなたのアプローチは私にとって最良の選択です=）