【发布时间】：2020-05-17 11:51:20
【问题描述】：
我正在使用一些代码来动态地将画布上矩形的坐标转移到另一个画布，以便在canvas2上的确切位置绘制矩形。 p>
我在 stackoverflow 上遇到过不同的类似问题和解决方案，例如：link1 和 link2，但它们都不适用于我的情况。
sendimg() 函数将矩形坐标从 canvas1 传输到 canvas2。由于 canvas2 图像被缩放到大尺寸，矩形没有绘制在正确的位置。
详情请查看随附的 sn-p 或codepen link。
var canvas = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");
var ctx = canvas.getContext("2d");
var ctx2 = canvas2.getContext("2d");
var img = new Image();
var rect = {};
var scale = 0;
var scale2 = 0;
var x = 0;
var y = 0;
var x2 = 0;
var y2 = 0;
var drag = false;
img.onload = function () {
//Setting dpi for canvas1
var dpi = window.devicePixelRatio || 1;
canvas.setAttribute('width', canvas.clientWidth * dpi);
canvas.setAttribute('height', canvas.clientHeight * dpi);
//Setting dpi for canvas2
var dpi = window.devicePixelRatio || 1;
canvas2.setAttribute('width', canvas2.clientWidth * dpi);
canvas2.setAttribute('height', canvas2.clientHeight * dpi);
ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
ctx.save();
ctx2.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
ctx2.save();
//fitting image to canvas fill
scale = Math.max(canvas.clientWidth / img.width, canvas.clientHeight / img.height); //canvas1 scale
scale2 = Math.max(canvas2.clientWidth / img.width, canvas2.clientHeight / img.height); //canvas2 scale
x = (canvas.clientWidth / 2) - (img.width / 2) * scale; //canvas1 x
y = (canvas.clientHeight / 2) - (img.height / 2) * scale; //canvas1 y
x2 = (canvas2.clientWidth / 2) - (img.width / 2) * scale2; //canvas2 x
y2 = (canvas2.clientHeight / 2) - (img.height / 2) * scale2; //canvas2 y
ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
ctx2.drawImage(img, x2, y2, img.width * scale2, img.height * scale2);
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}
img.crossOrigin = "Anonymous";
img.src = 'https://i.imgur.com/1n8sbrF.jpg';
function mouseDown(e) {
rect.startX = e.clientX - this.offsetLeft;
rect.startY = e.clientY - this.offsetTop;
drag = true;
}
function mouseUp() {
drag = false;
console.log(rect);
}
function mouseMove(e) {
if (drag) {
ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
ctx.save();
ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
rect.w = (e.clientX - this.offsetLeft) - rect.startX;
rect.h = (e.clientY - this.offsetTop) - rect.startY;
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
}
}
function sendimg()
{
if(rect.startX === undefined)
{
alert("draw any rectangle first on canvas1");
return false;
}
ctx2.lineWidth = 2;
ctx2.strokeStyle = "yellow";
//Following code is not drawing rectangle on correct position
ctx2.strokeRect(rect.startX * scale2 + x2 , rect.startY* scale2 + y2, rect.w * scale2 , rect.h * scale2);
}html, body{
width: 90%;
height: 90%;
}
#div1 {
margin: 10px;
width: 800px;
height: 600px;
border: 2px solid red;
}
#div2 {
position: absolute;
top: 20px;
left: 900px;
margin: 10px;
width: 1200px;
height: 800px;
border: 2px solid red;
}
canvas {
width: 100%;
height: 100%;
}<button type="button" onclick="sendimg();">Send Rectangle on Canvas2</button>
<div id="div1">
<canvas id="canvas1"></canvas>
</div>
<div id="div2">
<canvas id="canvas2"></canvas>
</div>【问题讨论】：
-
我没有完全调试你的代码，但问题肯定来自你定义X坐标的地方。由于 canvas.width ctx2.strokeRect(rect.startX * scale2 - x2 中的符号更改为减号来查看它（或者添加 x2 的绝对值）。 Is 没有在完全正确的位置绘制新矩形，所以我猜还有别的东西。
-
感谢@Serge P 尝试并指出线索。
标签： javascript jquery html5-canvas