0

Google で自分の問題を検索するために 2 日を無駄にしましたが、何の手がかりも得られませんでした。実際には、キャンバス上で円、四角、線をマウスのダウンおよびアップイベントで描画するための作業コードがあります(この描画はキャンバス上に動的に描画されます)。今、この図をランダムに含むキャンバスを拡大したいと思います。

これを試してみたところ、キャンバスのスケーリング後に図を再描画する必要があることがわかりました。簡単な方法でこれを行う方法はありますか?

描画された図に関連するすべての情報を維持するメソッドはキャンバスにありますか?

ズーム後にそれぞれの比率でこの図を描くことはできますか?

助けてください...さらに作業するのに役立つ手がかりまたはコードスニペット。助けてくれてありがとう.....

ズーム中に何度も呼び出される1つの曲線を含む次のコードスニペットがあります.しかし、この図は静的であるため、毎回座標は同じです. しかし、私の場合、フィギュアの座標はフィギュアの変化に合わせて変化します。

function draw(scale, translatePos){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

                // clear canvas
                context.clearRect(0, 0, canvas.width, canvas.height);

                context.save();
                context.translate(translatePos.x, translatePos.y);
                context.scale(scale, scale);
                context.beginPath(); // begin custom shape
                context.moveTo(-119, -20);

                context.bezierCurveTo(-159, 0, -159, 50, -59, 50);
                context.bezierCurveTo(-89, -95, -139, -80, -119, -20);

        context.closePath(); // complete custom shape
                context.fill();
                context.stroke();
                context.restore();
            }
4

3 に答える 3

0

私はあなたが何を求めているのかはっきりしていません。これがあなたが求めていることだと思います。

キャンバスを使用したアプリケーションでは、ユーザーがマウスを使用して四角、円、線などの図形を描くことができます。ユーザーはキャンバス上に正方形と円を描きました。ユーザーは、円のサイズを変更せずに、正方形のサイズを変更して大きくしたり小さくしたりできる必要があります。ユーザーは、正方形を元のサイズに再設定できる必要があります。これは、Canvas オブジェクトのプロパティとメソッドを使用するだけで可能ですか?

これはあなたが求めているものですか？

そうでない場合は、アプリケーションのユーザーに何をしてもらいたいかを説明してみてください。

于 2013-01-31T13:59:22.113 に答える
0

キャンバスは単なるピクセルであり、描画メソッドはそれらのピクセルの色を設定するだけです。

プリミティブ シェイプを正しくスケーリングする場合は、描画したシェイプを覚えておき、サイズを変更するときにそれらを最初から再描画する必要があります。

可能であれば、キャンバスの変換マトリックス サポートを使用してスケーリングを処理します。これにより、自分で座標を再計算する必要がなくなります。

于 2013-01-31T14:02:09.940 に答える
0

One More Argument Zoom in draw 関数を使用し、ズームインしたい場合は draw 関数をもう一度呼び出します。2x などのズームしたい値を渡し、2x などに従ってすべての値を乗算し、すべての値に 2 を掛けます。

于 2013-01-30T11:53:03.643 に答える