So verwenden Sie JavaScript, um Zoom und Drehung der Frame-Auswahl-Leinwand zu implementieren

Mit der Entwicklung des Internets wird JavaScript immer häufiger eingesetzt. In der Frontend-Entwicklung, insbesondere im Bereich der Grafikbearbeitung, ist das Zoomen und Drehen der Leinwand eine sehr wichtige Funktion. Im nächsten Artikel stellen wir vor, wie Sie mit JavaScript den Zoom und die Drehung der Rahmenauswahl-Leinwand realisieren.

Schritt 1: Erstellen Sie die Leinwand

Bevor wir mit der Implementierung des Zooms und der Drehung der im Feld ausgewählten Leinwand beginnen, müssen wir die Leinwand erstellen. In HTML können wir mit dem -Tag eine Leinwand erstellen. Zuerst müssen wir die Breite und Höhe für die Leinwand festlegen, wie unten gezeigt:

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

In JavaScript können wir den folgenden Code verwenden, um das Canvas-Element abzurufen:

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

Als nächstes können wir den 2D-Kontext über die Methode getContext abrufen der Leinwand, wie unten gezeigt:

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

Auf diese Weise haben wir erfolgreich eine Leinwand und einen Kontext erstellt und können dann auf der Leinwand zeichnen.

Schritt 2: Grafiken zeichnen

In dieser Demo zeichnen wir drei verschiedene Rechtecke und zeigen sie auf der Leinwand an. In JavaScript zeichnen wir ein Rechteck mit der fillRect-Methode von Canvas. Der erste Parameter dieser Methode ist die x-Koordinate der oberen linken Ecke des Rechtecks, der zweite Parameter ist die y-Koordinate der oberen linken Ecke des Rechtecks, der dritte Parameter ist die Breite des Rechtecks ​​und der vierte Parameter ist die Höhe des Rechtecks, wie folgt:

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

Der Code zum Zeichnen von drei Rechtecken lautet wie folgt:

//矩形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);

Mit dem obigen Code haben wir erfolgreich drei Rechtecke auf der Leinwand gezeichnet.

Schritt 3: Rahmenauswahl implementieren

Als nächstes beginnen wir mit der Implementierung der Rahmenauswahlfunktion. Der spezifische Implementierungsprozess ist wie folgt:

1. Zuerst müssen wir den Startpunkt der Maus aufzeichnen. Der Code lautet wie folgt:

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

2. Dann müssen wir Um die Bewegung der Maus aufzuzeichnen, lautet der Code wie folgt:

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

3. Schließlich müssen wir den Endpunkt der Maus aufzeichnen, wenn die Maus losgelassen wird. Der Code lautet wie folgt folgt:

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

Durch den obigen Code haben wir die Rahmenauswahlfunktion erfolgreich implementiert, die übergeben werden kann. Ziehen Sie die linke Maustaste, um ein Rechteck auf der Leinwand auszuwählen.

Schritt 4: Canvas-Skalierung implementieren

Als nächstes implementieren wir die Canvas-Skalierungsfunktion. Der spezifische Implementierungsprozess ist wie folgt:

1. Zuerst müssen wir einen variablen Maßstab definieren, der das Skalierungsverhältnis der Leinwand darstellt. Der Code lautet wie folgt:

var scale = 1.0;

2. Dann Fügen Sie der Leinwand einen Rad-Ereignis-Listener hinzu. Der Code lautet wie folgt:

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

3. Schließlich müssen wir das Zoomverhältnis der Leinwand festlegen, bevor wir die Grafiken zeichnen. Der Code lautet wie folgt:

context.scale(scale, scale);

Durch das oben Gesagte Code haben wir die Zoomfunktion der Leinwand erfolgreich implementiert. Dies kann durch Drehen des Mausrads zum Vergrößern oder Verkleinern der Leinwand erfolgen.

Schritt 5: Canvas-Rotation implementieren

Als nächstes implementieren wir die Canvas-Rotationsfunktion. Der spezifische Implementierungsprozess ist wie folgt:

1. Zuerst müssen wir einen variablen Winkel definieren, der den Rotationswinkel der Leinwand darstellt. Der Standardwert ist wie folgt:

var angle = 0;

2. Dann haben wir Fügen Sie der Leinwand ein Rechtsklick-Ereignis hinzu. Der Code lautet wie folgt:

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

3. Schließlich müssen wir die Transformationsmatrix der Leinwand festlegen, bevor wir die Grafiken zeichnen. Der Code lautet wie folgt:

context.setTransform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), canvas.width / 2, canvas.height / 2);

Durch Mit dem obigen Code haben wir die Rotationsfunktion der Leinwand erfolgreich implementiert. Sie können sie mit der rechten Maustaste drehen, indem Sie mit der rechten Maustaste klicken.

Zusammenfassend haben wir die Zoom- und Rotationsfunktion der Rahmenauswahl-Leinwand mithilfe von JavaScript erfolgreich implementiert. Diese Funktionen sind im Bereich der Grafikbearbeitung sehr wichtig und tragen zur Verbesserung des Benutzererlebnisses und der betrieblichen Effizienz bei. Wenn Sie diese Funktionen in Ihrem Projekt verwenden müssen, können Sie die Entwicklung auf der Grundlage des obigen Codes durchführen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JavaScript, um Zoom und Drehung der Frame-Auswahl-Leinwand zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!