問題タブ [bezier]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
4 に答える
3521 参照

flash - 不規則な数のx、yポイントからスムーズなパスを作成して、手書きをシミュレートします

AS3(Flexではなく純粋)で手書きをシミュレートする「ブラシ」ツールを作成しようとしています。これにより、ストロークがコーナリングではなくスムーズになります。次に、トレースをドラッグして変形できる3次ベジェ曲線に縮小し、以前に描画したパスに影響を与える必要があります(イラストレーターのペンツールのように)。

マウスの動きを追跡して、パスを描画するための一連のポイントを取得しています。私の知る限り、そのポイントのセットを使用してBスプラインパスを実行する必要があります。次に、それを3次ベジェ曲線に縮小する必要があります(パスに「ペンツール」機能を追加します)。

私はすでに、3次ベジエを2次ベジエに減らすアルゴリズムを使用して(そしてFlashcurveTo関数を使用して)ペンツールを開発しました。しかし、Bスプライン(または別の簡略化)を作成し、それをベジェ曲線に縮小する方法がわかりません。

これを達成する方法を知っていますか?

0 投票する
2 に答える
3299 参照

javascript - ベジエ タイミング アニメーション パス

ポイントのパスを定義しようとしています。各ポイントには、x、y、および時間が含まれます。次に、このパスを照会して、その時点での現在の位置を取得します。いくつかの疑似コードを共有しましょう。

canvas タグを使用して JavaScript でこれを実装しようとしています。ただし、どの言語のサンプルでも構いません。この種のクエリ可能なパスを作成するオープンソース ライブラリ (任意の言語) を知っている人はいますか??

注: 私はこのサンプルとDynApi プロジェクトのコードについて理解を深めようとしましたが、このサンプルから時間を意識したパスに移行することは、私の貧弱なアニメーション スキルにとっては大変なことです。

ありがとう

グイド

0 投票する
4 に答える
1828 参照

bezier - ベジエ曲線とフレンチ カーブ

ベジエ曲線を使用して、作成中のプログラムで曲線をプロットしています。5点あります。これは、作成しようとしている曲線の大まかなスケッチです。A、B、C、D を通る曲線を作ろうとしています。ただし、C は明確な点ではなく、曲線がフレンチ カーブのように見えるように通過する必要がある場所の提案です。C は E から 45 度で出ます。

これは私がやろうとしていることの実例です。

それらのポイントを通過するフランスの曲線を近似する方法について誰か提案がありますか?

0 投票する
3 に答える
2920 参照

gdi+ - GraphicsPath PathPoints および PathTypes 配列でアークの終点を決定する方法は?

次の PathPoints および PathTypes 配列があります (形式: X、Y、Type):

この GraphicsPath の物理的な外観は次のとおりです。2 つのアークは非常に区別できます。 代替テキスト

この GraphicsPath.PathData 配列が 2 つの AddArc コマンドによって作成されたことはわかっています。デバッガーでコードをステップ実行すると、最初の 4 つの PathData 値が最初の AddArc コマンドによって追加され、残りの 6 つのポイントが 2 番目の AddArc コマンドによって追加されたことがわかりました。

生のパスポイント/パスタイプ配列を調べることで (2 つの AddArc コマンドであることを事前に知らなかったので、開始点と終了点が 2 つあることがわかります)、各アークの開始点と終了点を特定したいと思います。

配列内のポイントを「再作成」するためにいくつかのベジエ計算を試みましたが、個別の開始点と終了点を決定する方法を決定するのに途方に暮れています。GDI+ がアーク間の始点/終点を結合しているように見え (それらは同じ点であり、アークは接続されています)、1 つのアークが終了し、別のアークが開始しているという事実が失われています。

何か案は?

0 投票する
1 に答える
615 参照

objective-c - iPhoneのモーションパス/モーションガイド?

プログラムコードで描いたパスに沿って画像を動かしたい。

以前に同様の質問 ( https://stackoverflow.com/questions/1571182/how-to-limit-a-uiimageview-to-move-in-a-specific-path ) をしたことがありますが、間違った方法。画像は UIImageView である必要はありません。また、上記の回答は、iPhone ではなく Mac OS X のみであることが後でわかりました。

とにかく、これは単純なパスを描画するための私のコードです。

ここで、theContext は CGContextRef です。上記のコードの結果は、90 度回転した「8」形状を描画します。しかし、画像をパスに追従させるにはどうすればよいでしょうか。

更新#1:質問が重複して申し訳ありませんが、パスに従って画像を回転させる方法についてさらに質問したいと思います(つまり、頭のベクトルはパスの接線に従う必要があります)。誰かがいくつかのアイデアを提案できますか?

更新 #2: パスを動的に変更する方法は?

0 投票する
1 に答える
7050 参照

language-agnostic - ベジエ曲線を定義する数学関数を見つける方法

ベジェ曲線と線分の交差テストを実装しようとしています。私の検索結果に最も近いのは、ベジエ曲線 (簡単にするために制御点を 3 つに制限します) を取得し、その曲線を生成する数学関数を見つけて、origo に配置することです。次に、線分の関数を別の関数として使用し、それらを等しくして方程式を解きます。

多くのソースが上記の解決策を述べています (Ive がそれらを誤解していない限り)。私の問題は、ベジエ曲線を生成する数学関数を計算する方法が見つからないことです。

ああ、交点を見つけることで私が完全に軌道から外れているかどうかを指摘してください。

0 投票する
3 に答える
8432 参照

math - ポイントからポイントに取得するベジェスプラインを計算します

X、Y +回転に2つのポイントがあり、これら2つのポイントをスムーズに接続するベジエスプライン(2次ベジエのコレクション)を計算する必要があります。(写真を参照)ポイントは、ゆっくりとしか回転できないゲーム内のユニットを表します。したがって、ポイントAからBに到達するには、長い道のりをたどる必要があります。添付の写真はかなり誇張された曲がりくねった道を示していますが、あなたはその考えを理解しています。

代替テキスト

このようなベジェスプラインを計算するためにどのような式を使用できますか?

0 投票する
2 に答える
584 参照

geometry - ベジエ曲線は、1 つの軸からポイントを計算します

3 次ベジエ曲線があります。しかし、1 点だけが必要な場合は問題があります。私はX軸からの値しか持っておらず、その時点までのY軸に対応する値を見つけたい. または、t ステップを見つけて、そこから Y 軸を簡単に計算できます。

それを行う方法の手がかりはありますか?または、これを行うための式はありますか?