2

私は最近、キックのために落書きアプリに取り組んでいます。マウスで指定されたサンプル ポイントを使用して滑らかな曲線を描画する多くの方法を試した後、二次曲線を使用することに落ち着きました。

これらの曲線に対する私の理解は最適ではないことを認めなければなりませんが、それらがどのように機能するかは理解できたと思います。理解できないのは、上昇してから急に下降する曲線を描くと、曲線の頂点が丸くなっていない (平らに見える) ことです。

私が話していることを理解するには、デモの方がはるかに優れています: JCanvas サンドボックスへのリンク

曲線の最後の部分 (cx11 から y15 まで) を削除する場合:別の JCanvas サンドボックスにリンクします。見た目は問題ありませんが、次のコントロール ポイントとエンド ポイントを追加すると、この奇妙な効果が得られます。

注: 私は JCanvas を使用していませんが、同じバグがあり、サンドボックスが便利です。取得した座標から来ていると思いますが、説明できず、丸く見えるようにするための回避策/ハックを見つけることができません...

サンドボックスに煩わされない人のために、問題の原因となっている座標の短いバージョンを次に示します。

x1: 216、y1: 98、cx1: 216、cy1: 97、x2: 216、y2: 98、cx2: 216、cy2: 99、x3: 215、y2: 103、

理由についてのアイデアはありますか？数学ネタ大歓迎です。問題について少し検索して読んだことがありますが、同様のものについては何も見つかりませんでした。

--

アップデート

Simon が指摘したように、私は Chrome 16 を使用しており、Firefox 4 と最新の Safari で例をテストしましたが、バグが存在します。Operaで試してみましたが、問題ないようです。

バグはiPadにもあり、モバイルWebアプリを作ろうとしていたので、ちょっと行き詰まっているので、私はそれについてかなり不満を感じています.

回避策/ハックのアイデアはありますか?

4

1 に答える 1

1

回避策を見つけました。それはばかげたアズ・ブレ・アプローチ・ゼロ・バグの1つです.私はそれらの適切な名前を本当に知りません. 2 点間の接続が非常に小さな垂直線であり、Safari が混乱する場合、角を丸めるのは困難です。

問題の場所には、丸みを帯びる必要がある 1 ピクセルの高さの垂直線曲線があります。

X デスティネーションが 1 つの 2 次曲線と次の 2 次曲線で同じである場合、Safari で問題が発生します。だからこれは悪いです：

ctx.beginPath();
ctx.moveTo(161,178);
ctx.quadraticCurveTo(215, 102, 216, 100);
ctx.quadraticCurveTo(216, 98, 216, 98);
ctx.quadraticCurveTo(216, 99, 215, 103); // I have the same X as the previous quadratic
ctx.quadraticCurveTo(213, 107, 211, 120);
ctx.quadraticCurveTo(209, 133, 209, 145);
ctx.stroke();

こちらをご覧ください：http://jsfiddle.net/Ws6UY/

したがって、その値をごくわずかに変更すると、次のようになります。

ctx.beginPath();
ctx.moveTo(161,178);
ctx.quadraticCurveTo(215, 102, 216, 100);
ctx.quadraticCurveTo(216, 98, 216, 98);
ctx.quadraticCurveTo(216.01, 99, 215, 103); // 216.01 is not the same X as 216!
ctx.quadraticCurveTo(213, 107, 211, 120);
ctx.quadraticCurveTo(209, 133, 209, 145);
ctx.stroke();

こちらをご覧ください：http://jsfiddle.net/Ws6UY/1/

ばかげている！サファリ/iOS ブラウザを動作させ続けるために必要なことは、x (およびおそらく y) の値が最後のポイントと同じでないことを確認することだけです。

于 2011-12-28T19:46:19.573 に答える