Mari saya mulai dengan mengatakan bahwa saya bukan pengembang profesional, tetapi saya mengelola proyek pengembangan yang memiliki kebutuhan khusus -- untuk menskalakan gambar yang ditempatkan di kanvas HTML5 dari titik tengah menggunakan penggeser . Pengembang telah menerapkan penggeser yang menskalakan gambar dari titik kiri atas, tetapi kegunaan menentukan pengubahan ukuran dari tengah dan dia belum dapat mengetahuinya. Apakah ini mungkin? Silakan lihat di sini untuk versi beta aplikasi yang dimuat sebelumnya dengan gambar untuk diuji:

http://beta.drumart.com/head-builder?lib-image-url=https://thumbs.dreamstime.com/800thumbs/12617/126170273.jpg

Klik gambar untuk memilihnya dan gunakan penggeser "Ukuran" untuk mengubah ukurannya. Saya hanya mencari tahu apakah ini mungkin dan, jika demikian, arahkan dia ke arah yang benar. Banyak terima kasih sebelumnya!

Tangkapan layar penggeser gambar

0
Jim 11 April 2020, 19:53

1 menjawab

Jawaban Terbaik

Saya merekomendasikan membuat fungsi drawCenteredImage(), berikan gambar, x, y, lebar, tinggi dan itu akan menggambar gambar berpusat pada x, y yang diberikan. Jadi ketika Anda meningkatkan x dan y itu akan skala tentang pusat gambar.


function drawCenteredImage(img, x, y, width, height) {
    // Assuming globally accessible canvas context variable 'context'
    context.drawImage(img, x - width / 2, y - height / 2, width, height);
}

Contoh penggunaan ini:

% Diperbarui ke skala secara realtime %

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let image = new Image();
image.onload = function() {
	drawImg();
};

image.src = "https://thumbs.dreamstime.com/800thumbs/12617/126170273.jpg";

function drawCenteredImage(img, x, y, width, height) {
    // Assuming globally accessible canvas context variable 'context'
    context.drawImage(img, x - width / 2, y - height / 2, width, height);
}

function drawImg() {
	context.fillStyle = "white";
	context.fillRect(0,0,canvas.width,canvas.height);
  let scale = document.getElementById("scl").value;
  drawCenteredImage(image, canvas.width / 2, canvas.height / 2, image.width * scale, image.height * scale);
}

let mousedownID = -1;
function mousedown(event) {
  if(mousedownID==-1)
     mousedownID = setInterval(drawImg, 5);


}
function mouseup(event) {
   if(mousedownID!=-1) {  //Only stop if exists
     clearInterval(mousedownID);
     mousedownID=-1;
   }

}

//Assign events
document.getElementById("scl").addEventListener("mousedown", mousedown);
document.getElementById("scl").addEventListener("mouseup", mouseup);
//Also clear the interval when user leaves the window with mouse
document.addEventListener("mouseout", mouseup);
<input id="scl" type="range" min="0" max="1" value="0.3" step="0.05">
<canvas id="canvas" width="500px" height="400px"></canvas>
1
GTBebbo 11 April 2020, 17:31