Different html canvas coordinates

不打扰是莪最后的温柔 提交于 2021-02-10 14:59:48

问题


i made 2 deference size html canvas to drawing

  1. First canvas = width : 400px,height:200px
  2. Second canvas = width : 200px,height :100px

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

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.


回答1:


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.

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



来源:https://stackoverflow.com/questions/62339928/different-html-canvas-coordinates

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!