0

ユーザーが開始点と終点を定義できる html キャンバスを作成しようとしています。始点と終点の間に波線を描きたいのですが、bezierCurveTo を描画してこれを行っています。

サンプル：

サンプル波

これを描画するために使用するコードは次のとおりです。

var wave = new Kinetic.Shape({
        drawFunc: function (canvas) {
            var ctx = canvas.getContext();
            ctx.beginPath();
            ctx.moveTo(50, 50);
            var waveCount = 0;
            var controlPoint1X = 55;
            var controlPoint2X = 60;
            var endPointX = 65;
            while(waveCount < 10) {
                ctx.bezierCurveTo(controlPoint1X, 35, controlPoint2X, 65, endPointX, 50);
                controlPoint1X += 20;
                controlPoint2X += 20;
                endPointX += 20;
                waveCount++;
            }
            ctx.stroke(_this);
        },
        stroke: '#000000',
        strokeWidth: 2
    });

x 座標または y 座標のみが変更される限り、これを機能させることができます。今、私は上記のような波線を作成できるようにしたいと考えていますが、x、y 座標は異なります。たとえば、始点 x: 50 y: 50 および終点 x: 100 y: 100 です。コントロールポイントを計算する必要があることはわかっていますが、どの式を使用する必要があるかわかりません。誰かが私を助けることができますか？

4

1 に答える 1

1

直線上の円と正弦波をシミュレートしてみましょう。半円の場合、各「期間」は 2 つのセグメントで構成され、セグメント 1 は次のとおりです。

cDist = 4/3 * amplitude

(これはhttp://pomax.github.com/bezierinfo/#circles_cubicからわかっています)

S = (x1, 0),
C1 = (x1, cDist)
C2 = (x2, cDist)
E = (x2, 0)

セグメント 2 は次のとおりです。

S = (x2, 0),
C1 = (x2, -cDist)
C2 = (x3, -cDist)
E = (x3, 0)

正弦波の場合、コントロール ポイントはほぼ同じです。y 座標は同じ高さのままですが、形状が始点と終点で修正された角度になるように x 座標をシフトする必要があります (円の場合は垂直、正弦波の場合は対角):

S = (x1, 0),
C1 = (x1 + cDist/2, cDist)
C2 = (x2 - cDist/2, cDist)
E = (x2, 0)

セグメント 2 は次のとおりです。

S = (x2, 0),
C1 = (x2+cDist, -cDist)
C2 = (x3-cDist, -cDist)
E = (x3, 0)

これのデモンストレーターをhttp://jsfiddle.net/qcUyC/6に置きました。

これらの線を一定の角度にしたい場合は、コンテキストを回転させてください。実際に座標を変更しないでください。context.rotate(...) を使用するだけで完了です。http://jsfiddle.net/qcUyC/7を参照してください

ただし、正しい場所に描画されるだけでなく、実際の角度のある線を表す座標が絶対に必要な場合は、角度から始めます。

angle = some value you picked, in radians (somewhere between 0 and 2*pi)

その角度で、ポイントを配置できます。

dx = some fixed value we pick
dy = some fixed value we pick

ox = the x-offset w.r.t. 0 for the first coordinate in our line
oy = the y-offset w.r.t. 0 for the first coordinate in our line

x1 = ox
y1 = oy

x2 = (dx * cos(angle) - dy * sin(angle)) + ox
y2 = (dx * sin(angle) + dy * cos(angle)) + oy

x3 = (2*dx * cos(angle) - 2*dy * sin(angle)) + ox
y3 = (2*dx * sin(angle) + 2*dy * cos(angle)) + oy

...

xn = ((n-1)*dx * cos(angle) - (n-1)*dy * sin(angle)) + ox
yn = ((n-1)*dx * sin(angle) + (n-1)*dy * cos(angle)) + oy

次に、制御点をセグメントの開始点に相対的なベクトルとして扱う必要があるため、C1' = C1-S、C2' = C2-S とし、同じ変換でそれらを回転させます。次に、これらのベクトルを開始点に戻すと、正しく回転したコントロール ポイントが得られます。

そうは言っても、そうしないでください。canvas2d API に回転を任せて、直線を描くだけです。それは人生をとても簡単にします。

于 2013-04-02T19:56:55.937 に答える