0

既存の2次曲線の半分を描画しようとしていますが、制御点を調整する方法がわかりません。

http://jsfiddle.net/s6sB8/3/

キャンバスに描かれた角の丸い長方形の上半分と、CSSの上部の境界線が付いたボックスが表示されます。私がやろうとしているのは、cssで描かれたボックスをキャンバスで再現することです。つまり、角を半分にカットします。

開始点と最初の制御点をいじっていますが、曲線を正確にスプライスする方法がわかりません。

キャンバスがCSSと完全に一致しないことはわかっていますが、これは問題ありません。私はそれを実現しようとはしていません。曲線の形をまったくねじ込まずに、曲線のちょうど半分を描画しようとしています。そして、私はこの特定の例の解決策よりも、この背後にある数学に興味があります

更新された例：http：//jsfiddle.net/s6sB8/4/

近くにありますが、描画しようとしている曲線が元の曲線と完全に一致していないことがわかります...

4

2 に答える 2

1

プロジェクトの一環としてhttp://canvimation.github.com/丸みを帯びた長方形を描画できる必要がありました。

角を描くために二次曲線ではなく、ベジェ曲線を使用して四分円を近似しました。コードhttp://jsfiddle.net/kCd7b/に基づいてフィドルを作成し、角の丸い長方形を描画しました。関数rounded_rectangleのleft、top、width、heightは外接する長方形のパラメーターであり、radiusはコーナーアークの半径です。この関数は、円弧または2次曲線を使用するように変更できると思います。

注：1この方法に関する私の参照は、この質問への回答の2番目のリンクからのものです。 ベジェ曲線で幾何学的な弧を最もよく近似する方法は？

注2：私の方法は、水平のトップラインを描画することから始まり、完全な曲線を描画します。曲線の真ん中で開始して曲線の半分を描きたい場合は、http：//www.iancgbell.clara.net/maths/bezier.htmを読む必要があります。

注3：描画および変換関数を記述しやすくするため、円弧ではなくベジェ曲線を使用しました。これは、描画している形状に関係なく、lineToおよびbezierCurveToを考慮するだけでよいためです。

注3：私のプロジェクトのソースコードはhttps://github.com/canvimation/canvimation.github.comにあります

于 2012-04-28T12:21:40.067 に答える
0

私はこれがあまり得意ではないので、ただアドバイスします。

Mozillaの良い例： https ：//developer.mozilla.org/samples/canvas-tutorial/2_5_canvas_quadraticcurveto.html

ウィキの二次関数：http： //en.wikipedia.org/wiki/Quadratic_curve

上記のリンクを読んだ後、それcurrent positionが始点でcontrol pointあり、到達することはないが、ますます近づく点であり、終点が必要であることがわかります。それらを持っているとき、私たちは曲線を手に入れました。

あなたの質問では、次のように「調整control point」します。

      ctx.moveTo          ( 15, 11 );
      ctx.quadraticCurveTo( 16, 10, 20, 10 );
      ctx.lineTo          ( 95, 10 );

      ctx.moveTo          ( 100, 11);
      ctx.quadraticCurveTo( 99, 10, 95, 10 );

      ctx.lineWidth = 10;
      ctx.stroke();

よく見えます。

于 2012-04-27T01:31:31.120 に答える