JavaScript を使用してフレーム選択キャンバスのズームと回転を実装する方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-24 09:45:36

オリジナル

836 人が閲覧しました

インターネットの発展に伴い、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
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);

ログイン後にコピー

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

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

ログイン後にコピー

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

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 です。コードは次のとおりです:

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);

ログイン後にコピー

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

```
var scale = 1.0;
```
ログイン後にコピー

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

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 です。コードは次のとおりです:

```
context.scale(scale, scale);
```
ログイン後にコピー

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

```
var angle = 0;
```
ログイン後にコピー

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

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 サイトの他の関連記事を参照してください。