JavaScript を使用してフレーム選択キャンバスのズームと回転を実装する方法

インターネットの発展に伴い、JavaScript はますます広く使用されるようになりました。フロントエンド開発、特にグラフィック編集の分野では、キャンバスのズームと回転は非常に重要な機能です。次回は、JavaScriptを使用してフレーム選択キャンバスのズームや回転を実現する方法を紹介します。

ステップ 1: キャンバスを作成する

フレーム選択したキャンバスのズームと回転の実装を開始する前に、キャンバスを作成する必要があります。 HTML では、 タグを使用してキャンバスを作成できます。まず、以下に示すように、キャンバスの幅と高さを設定する必要があります。

<canvas id="myCanvas" width="500" height="500"></canvas>

JavaScript では、次のコードを使用して Canvas 要素を取得できます。 Canvas の getContext を渡す このメソッドは、以下に示すように 2D コンテキストを取得します。

var canvas = document.getElementById("myCanvas");

このようにして、キャンバスとコンテキストが正常に作成されたので、キャンバス上に描画できるようになります。

ステップ 2: グラフィックを描画する

このデモでは、3 つの異なる長方形を描画し、キャンバス上に表示します。 JavaScript では、canvas の fillRect メソッドを使用して四角形を描画します。このメソッドの最初のパラメータは長方形の左上隅の x 座標、2 番目のパラメータは長方形の左上隅の y 座標、3 番目のパラメータは長方形の幅、4 番目のパラメータは以下に示すように、長方形の高さ:

var context = canvas.getContext("2d");

3 つの長方形を描画するコードは次のとおりです:

context.fillRect(x, y, width, height);

上記のコードにより、キャンバス上に 3 つの長方形を正常に描画できました。

ステップ 3: フレーム選択の実装

次に、フレーム選択機能の実装を開始します。具体的な実装プロセスは次のとおりです:

最初に、次のことを行う必要があります。マウスを記録する 開始点のコードは次のとおりです:

1. //矩形1
   context.fillStyle="red";
   context.fillRect(50,50,100,100);
   
   //矩形2
   context.fillStyle="green";
   context.fillRect(200,200,100,100);
   
   //矩形3
   context.fillStyle="blue";
   context.fillRect(350,350,100,100);

次に、マウスの動きを記録する必要があります。コードは次のとおりです:

2. var startX, startY;
   canvas.addEventListener("mousedown", function(e) {
     startX = e.pageX - canvas.offsetLeft;
     startY = e.pageY - canvas.offsetTop;
   }, false);

最後に、マウスを放す必要があります。マウスのエンドポイントを記録するときのコードは次のとおりです:

3. canvas.addEventListener("mousemove", function(e) {
       if (e.buttons === 1) { // 按下鼠标左键拖动
           var moveX = e.pageX - startX;
           var moveY = e.pageY - startY;
           context.clearRect(0, 0, canvas.width, canvas.height);
           drawRectangles(moveX, moveY);
       }
   }, false);

上記のコードにより、フレームが正常に実装されました。選択機能があり、マウスの左ボタンをドラッグすることでキャンバス上の四角形を選択できます。

ステップ 4: キャンバス スケーリングの実装

次に、キャンバス スケーリング機能を実装します。具体的な実装プロセスは次のとおりです:

まず、キャンバスの拡大縮小率を表す変数スケールを定義する必要があります。デフォルト値は 1.0 です。コードは次のとおりです:

1. canvas.addEventListener("mouseup", function(e) {
       var endX = e.pageX - canvas.offsetLeft;
       var endY = e.pageY - canvas.offsetTop;
       var moveX = endX - startX;
       var moveY = endY - startY;
       context.clearRect(0, 0, canvas.width, canvas.height);
       drawRectangles(moveX, moveY);
   }, false);

次に、ホイール イベント モニタリングをキャンバスに追加します。コードは次のとおりです。

2. var scale = 1.0;

#最後に、ズーム率を設定する必要があります。

3. canvas.addEventListener("wheel", function(e) {
       e.preventDefault();
       var wheelDelta = e.deltaY;
       if (wheelDelta > 0) scale -= 0.1;
       else scale += 0.1;
       context.clearRect(0, 0, canvas.width, canvas.height);
       drawRectangles(0, 0); // 传递0，0以清除框选效果
   }, false);

上記のコードにより、キャンバスのズーム機能が正常に実装されました。ローリングすると、キャンバスをズームインまたはズームアウトできます。マウスホイール。

ステップ 5: キャンバスの回転を実装する

次に、キャンバスの回転機能を実装します。具体的な実装プロセスは次のとおりです:

まず、キャンバスの回転角度を表す変数 angle を定義する必要があります。デフォルト値は 0 です。コードは次のとおりです:

1. context.scale(scale, scale);

次に、キャンバス上に右クリック イベント リスナーを追加します。コードは次のとおりです:

2. var angle = 0;

最後に、設定する必要があります。グラフィックスを描画する前のキャンバスの変換行列 コードは次のとおりです:

3. canvas.addEventListener("mouseup", function(e) {
       if (e.button === 2) { // 按下鼠标右键
           angle += 90;
           context.clearRect(0, 0, canvas.width, canvas.height);
           drawRectangles(0, 0); // 传递0，0以清除框选效果
       }
   }, false);

上記のコードにより、キャンバスの回転関数が正常に実装されました。ねずみ。

要約すると、JavaScript を使用してフレーム選択キャンバスのズームと回転機能を実装することに成功しました。これらの機能はグラフィック編集の分野で非常に重要であり、ユーザー エクスペリエンスと操作効率の向上に役立ちます。プロジェクトでこれらの関数を使用する必要がある場合は、上記のコードに基づいて開発できます。

以上がJavaScript を使用してフレーム選択キャンバスのズームと回転を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。