不同的HTML画布坐标 [英] Different html canvas coordinates

问题描述

我制作了2个参考尺寸的html画布进行绘图

i made 2 deference size html canvas to drawing

1. 第一张画布=宽度:400像素，高度:200像素
2. 第二个画布=宽度:200像素，高度:100像素

现在，当我在第一个html画布中绘画时，我会将坐标(x1，y1，x2，y2)发送到第二个画布.

Now when i drawing in first html canvas i send that coordinates(x1,y1,x2,y2) to second canvas.

当第一个画布坐标在第二个画布中发送时，它不在与第一个画布相同的位置绘制.

When first canvas coordinates send in second canvas it's not drawing in same place as first canvas.

可以在不更改画布宽度和高度的情况下将第一个画布坐标与第二个画布坐标相等.

is there way to equal first canvas coordinates to second one without changing canvas width and height .

ctx.beginPath(); 
ctx.lineWidth = 5; 
ctx.lineCap = 'round'; 
ctx.strokeStyle = "red"; 
ctx.moveTo(coord.x, coord.y); 
ctx.lineTo(ncoord.x , ncoord.y); 
ctx.stroke(); 


//SECOUND CANVAS
ctx2.beginPath(); 
ctx2.lineWidth = 5; 
ctx2.lineCap = 'round'; 
ctx2.strokeStyle = "red"; 
ctx2.moveTo(coord.x, coord.y); 
ctx2.lineTo(ncoord.x , ncoord.y); 
ctx2.stroke(); 

当用户在画布1中沉浸时，我将该坐标发送到两个画布.但在第二个画布中，绘图位置与画布1不在同一位置.注意:画布1和2具有不同的宽度和高度.

when user drwaing in canvas 1 i send that coordinates to both canvas. but in second canvas not drawing in same place as canvas 1. Note : canvas 1 and 2 have deferent width and height.

我需要在不改变两个画布的宽度高度的情况下对其进行处理.

I need to slove this without changing width height of the both canvas.

推荐答案

我希望我做出了正确的假设来回答您的问题.我创建了两个大小不同的两个不同的画布.坐标仅适合第一个更大的画布.

I hope I have made the right assumptions to answer your question. I created two different canvases of two different sizes. The coordinates only fit on the first, bigger, canvas.

通过将较大的较小画布的宽度或高度除以较大的画布，可以将大"坐标转换为小"坐标.例如，大画布的高度为200，小画布的高度为100.如果将 100/200 相除，将得到 0.5 .小"坐标应为原始坐标的一半.在下面自己看看:

You can transform the 'big' coordinates to 'small' coordinates by dividing the width or height of the bigger smaller canvases by the bigger canvases. For example, the height of the big canvas is 200 but the height of the smaller one is 100. If you divide 100 / 200 you get 0.5. The 'small' coordinates should be half as high as the original ones. See for yourself below:

//just for testing purposes
var coord = {
  x: 320,
  y: 125
};
var ncoord = {
  x: 220,
  y: 90
};

function drawBig() {
  var canvas = document.getElementById("canvas1");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.lineWidth = 5;
  ctx.lineCap = 'round';
  ctx.strokeStyle = "red";
  ctx.moveTo(coord.x, coord.y);
  ctx.lineTo(ncoord.x, ncoord.y);
  ctx.stroke();

}

function drawSmall() {
  let bigCanvas = document.getElementById("canvas1");
  let smallCanvas = document.getElementById("canvas2");

  //Devide the dimensions of the big and small canvas in order to get the magnification factor:
  let widthDimension = smallCanvas.width / bigCanvas.width;
  let heightDimension = smallCanvas.height / bigCanvas.height

  var ctx2 = smallCanvas.getContext("2d");
  ctx2.beginPath();
  ctx2.lineWidth = 5;
  ctx2.lineCap = 'round';
  ctx2.strokeStyle = "red";

  //Transform the original coordinates to the right dimensions:
  ctx2.moveTo(coord.x * widthDimension, coord.y * heightDimension);
  ctx2.lineTo(ncoord.x * widthDimension, ncoord.y * heightDimension);
  ctx2.stroke();

}

canvas {
  border: 1px solid black;
}

<canvas id="canvas1" width="400" height="200"></canvas>
<hr>
<canvas id="canvas2" width="200" height="100"></canvas>


<button onclick="drawBig()">draw big canvas</button>
<button onclick="drawSmall()">draw small canvas</button>

希望这会有所帮助！如果没有，请发表评论

Hope this helps! If not, please comment

这篇关于不同的HTML画布坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！