Cara menggunakan JavaScript untuk melaksanakan zum dan putaran kanvas pemilihan bingkai

Dengan perkembangan Internet, JavaScript telah digunakan dengan lebih meluas. Dalam pembangunan bahagian hadapan, terutamanya dalam bidang penyuntingan grafik, mengezum dan memutar kanvas adalah fungsi yang sangat penting. Dalam artikel seterusnya, kami akan memperkenalkan cara menggunakan JavaScript untuk merealisasikan zum dan putaran kanvas pemilihan bingkai.

Langkah 1: Cipta kanvas

Sebelum kita mula melaksanakan zum dan putaran kanvas yang dipilih bingkai, kita perlu mencipta kanvas. Dalam HTML, kita boleh mencipta kanvas menggunakan teg Mula-mula, kita perlu menetapkan lebar dan tinggi untuk kanvas seperti berikut:

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

Dalam JavaScript, kita boleh mendapatkan elemen kanvas menggunakan kod seperti ini:

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

Seterusnya kita boleh Dapatkan konteks 2D melalui kaedah getContext kanvas, seperti yang ditunjukkan di bawah:

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

Dengan cara ini, kami telah berjaya mencipta kanvas dan konteks, dan kemudian kami boleh melukis pada kanvas.

Langkah 2: Lukis grafik

Dalam demo ini, kami akan melukis tiga segi empat tepat berbeza dan memaparkannya pada kanvas. Dalam JavaScript, kami melukis segi empat tepat menggunakan kaedah fillRect kanvas. Parameter pertama kaedah ini ialah koordinat x sudut kiri atas segi empat tepat, parameter kedua ialah koordinat y sudut kiri atas segi empat tepat, parameter ketiga ialah lebar segi empat tepat, dan parameter keempat ialah ketinggian segi empat tepat, seperti berikut:

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

Kod untuk melukis tiga segi empat tepat adalah seperti berikut:

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

Dengan kod di atas, kami telah berjaya melukis tiga segi empat tepat pada kanvas.

Langkah 3: Laksanakan pemilihan bingkai

Seterusnya kita mula melaksanakan fungsi pemilihan bingkai Proses pelaksanaan khusus adalah seperti berikut:

1. Pertama, kita perlu. rekod tetikus Titik permulaan, kodnya adalah seperti berikut:

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

2. Kemudian, kita perlu merekod pergerakan tetikus, kodnya adalah seperti berikut:

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. Akhir sekali, kita Perlu merekodkan titik akhir tetikus apabila tetikus dilepaskan Kodnya adalah seperti berikut:

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

Melalui. kod di atas, kami telah berjaya melaksanakan fungsi pemilihan bingkai, yang boleh dipilih dengan menyeret butang tetikus kiri pada kanvas.

Langkah 4: Laksanakan penskalaan kanvas

Seterusnya kami akan melaksanakan fungsi penskalaan kanvas. Proses pelaksanaan khusus adalah seperti berikut:

1. Pertama, kita perlu menentukan skala pembolehubah, yang mewakili nisbah penskalaan kanvas Nilai lalai ialah 1.0 >

var scale = 1.0;

Kemudian, kami menambah pendengar acara roda pada kanvas, kodnya adalah seperti berikut:

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

Akhir sekali, kita perlu untuk menetapkan nisbah zum kanvas sebelum melukis grafik, kod Seperti berikut:

context.scale(scale, scale);

Melalui kod di atas, kami telah berjaya melaksanakan fungsi zum kanvas Anda boleh zum masuk atau keluar dari kanvas dengan menggulung roda tetikus.

Langkah 5: Laksanakan putaran kanvas

Seterusnya kita akan melaksanakan fungsi putaran kanvas. Proses pelaksanaan khusus adalah seperti berikut:

Pertama, kita perlu menentukan sudut pembolehubah, yang mewakili sudut putaran kanvas ialah 0. Kodnya adalah seperti berikut:

var angle = 0;

Kemudian, kami menambah pendengar acara klik kanan pada kanvas Kodnya adalah seperti berikut:

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

Akhir sekali, kita perlu menetapkan matriks transformasi kanvas sebelum melukis grafik, kodnya adalah seperti berikut:

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

Melalui kod di atas, kami telah berjaya melaksanakan fungsi putaran kanvas, yang boleh. diputar dengan mengklik kanan tetikus.

Ringkasnya, kami telah berjaya melaksanakan fungsi zum dan putaran kanvas pemilihan bingkai menggunakan JavaScript. Fungsi ini sangat penting dalam bidang penyuntingan grafik dan membantu meningkatkan pengalaman pengguna dan kecekapan operasi. Jika anda perlu menggunakan fungsi ini dalam projek anda, anda boleh membangunkan berdasarkan kod di atas.

Atas ialah kandungan terperinci Cara menggunakan JavaScript untuk melaksanakan zum dan putaran kanvas pemilihan bingkai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!