HTML 画布扭曲图像

Question

I want to make a map at HTML canvas that i can move around on with drag and drop.我想在 HTML 画布上制作一张地图，我可以通过拖放来移动它。 But when i drag the map around and draw current frame it appears distorted:但是当我拖动地图并绘制当前帧时，它看起来扭曲了：

When you see top left corner:当您看到左上角时：

When you drag it down:向下拖动时：

Image size is 2000x2000 Canvas is 500x500图像大小为 2000x2000 画布为 500x500

My draw function.我的绘图功能。

    draw() {
        var ctx = this.canvas.getContext('2d');
        ctx.clearRect(0, 0, 500, 500);
        ctx.drawImage(images['map'], 0 - this.camera[0], 0 - this.camera[1], 2000 - this.camera[0], 2000 - this.camera[1])

 var prev_mouse_x = null; var prev_mouse_y = null; var pressed = false; function get_pos_in_canvas(canvas, event) { var rect = canvas.getBoundingClientRect(); return { x: event.clientX - rect.left, y: event.clientY - rect.top }; } document.getElementById('map').onmousedown = event => { pressed = true; prev_mouse_x = null; prev_mouse_y = null; } document.getElementById('map').onmousemove = event => { if (pressed) { if (prev_mouse_x != null) { var dx = event.pageX - prev_mouse_x; var dy = event.pageY - prev_mouse_y; move(dx, dy); } prev_mouse_x = event.pageX; prev_mouse_y = event.pageY; } }; document.getElementById('map').onmouseup = event => { pressed = false; } camera = [0, 0]; var ctx = document.getElementById('map').getContext('2d'); function move(dx, dy) { camera[0] -= dx; camera[1] -= dy; } const image = document.getElementById('source'); function draw(time) { ctx.clearRect(0, 0, 500, 500); ctx.drawImage(image, 0 - camera[0], 0 - camera[1], 2000 - camera[0], 2000 - camera[1]) window.requestAnimationFrame(draw); } window.requestAnimationFrame(draw);

 <html> <body> Example <br> <div style="display:none;"> <img id="source" src="https://i.stack.imgur.com/kthr8.jpg"> </div> <canvas id='map' width=500 height=500></canvas> </body> </html>

The question is how to fix this behavior.问题是如何解决这种行为。

Answer 1

If you only change the x and y positions of your image (translate), no need to change its width and height (fourth and fifth arguments of drawImage ):如果您只更改图像的 x 和 y 位置（平移），则无需更改其宽度和高度（ drawImage第四个和第五个参数）：

 var prev_mouse_x = null; var prev_mouse_y = null; var pressed = false; function get_pos_in_canvas(canvas, event) { var rect = canvas.getBoundingClientRect(); return { x: event.clientX - rect.left, y: event.clientY - rect.top }; } document.getElementById('map').onmousedown = event => { pressed = true; prev_mouse_x = null; prev_mouse_y = null; } document.getElementById('map').onmousemove = event => { if (pressed) { if (prev_mouse_x != null) { var dx = event.pageX - prev_mouse_x; var dy = event.pageY - prev_mouse_y; move(dx, dy); } prev_mouse_x = event.pageX; prev_mouse_y = event.pageY; } }; document.getElementById('map').onmouseup = event => { pressed = false; } camera = [0, 0]; var ctx = document.getElementById('map').getContext('2d'); function move(dx, dy) { camera[0] -= dx; camera[1] -= dy; } const image = document.getElementById('source'); function draw(time) { ctx.clearRect(0, 0, 500, 500); ctx.drawImage(image, 0 - camera[0], 0 - camera[1], 2000, 2000) window.requestAnimationFrame(draw); } window.requestAnimationFrame(draw);

 <html> <body> Example <br> <div style="display:none;"> <img id="source" src="https://i.stack.imgur.com/kthr8.jpg"> </div> <canvas id='map' width=500 height=500></canvas> </body> </html>

HTML 画布扭曲图像

问题描述

1 个解决方案

解决方案1
1 已采纳

HTML 画布扭曲图像

问题描述

1 个解决方案

解决方案1 1 已采纳

解决方案1
1 已采纳