Question

我正在尝试从一页上的两个不同的画布获取x，y坐标，这些坐标可以通过响应屏幕调整大小来更改位置。

测试页如下图所示

使用我当前的代码，当我单击两个黑点中的任何一个时，将获得我在其中单击的画布的正确的x，y坐标。

但是，如果调整页面大小，并且右画布下降到左画布下方，则当我单击现在较低的画布黑点时，Y值会远远超过该值，而我无法解决此问题。

下面显示了该代码，该代码可以全屏运行并调整响应大小。

我的目标是知道何时单击黑点以及该事件在哪个画布中发生。它必须能够通过在不同屏幕上调整页面大小来做到这一点

仅说明一下画布2顶行的Y坐标是15。如果我回避并且画布2下降到画布1下方，则y在顶行大约变为323，但我需要使其保持与之前相同的值调整大小

任何帮助都将非常感谢

function circle (name, setTemp, temp){
  c=document.getElementById(name);
  var ctx=c.getContext("2d");
  c.width = 200;
  c.height = 300;
  ctx.fillStyle = "gray";
  ctx.fillRect(0, 0, c.width, c.height);
  ctx.beginPath();
  ctx.arc(100,170,5,0,2*Math.PI);
  ctx.fillStyle = 'black';
  ctx.fill();
}
circle ('den');
circle ('wc');
var den=document.getElementById('den');
den.addEventListener('mousedown',denClicked, false);
function denClicked(event){
    c=document.getElementById('den');
    var rect = c.getBoundingClientRect()
    var x = event.pageX - rect.left;
    var y = event.pageY;
  console.log('x: ' + x + ' y: ' + y);
}
var wc=document.getElementById('wc');
wc.addEventListener('mousedown',wcClicked, false);
function wcClicked(event){
    c=document.getElementById('wc');
    var rect = c.getBoundingClientRect()
    var x = event.pageX - rect.left;
    var y = event.pageY;
  console.log(rect);
    console.log('x: ' + x + ' y: ' + y);
}

* {
    box-sizing: border-box;
}

[class*="col-"] {
    float: left;
    padding: 5px;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px){
/* For desktop: */
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
}
@media only screen and (min-width: 600px){
	.col-m-1 {width: 8.33%;}
	.col-m-2 {width: 16.66%;}
	.col-m-3 {width: 25%;}
	.col-m-4 {width: 33.33%;}
	.col-m-5 {width: 41.66%;}
	.col-m-6 {width: 50%;}
	.col-m-7 {width: 58.33%;}
	.col-m-8 {width: 66.66%;}
	.col-m-9 {width: 75%;}
	.col-m-10 {width: 83.33%;}
	.col-m-11 {width: 91.66%;}
	.col-m-12 {width: 100%;}
}

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="canvas.css">
  </head>
  <body>
    <div class="row">
      <div class="col-6">
         <div><canvas id="den"></canvas> </div>
      </div>
      <div class="col-6">
         <div><canvas id="wc"></canvas> </div>
      </div>
     </div>
    <div><script src="canvas.js"></script> </div>
  </body>
</html>

Answer 1

我相信我正在努力。可能是执行此操作的更好方法，但目前在调整页面大小时可以正常工作。

在单击功能下，我得到了可能已调整大小的页面高度，因此在单击功能下执行此操作的原因。如果页面的宽度小于CSS的宽度以更改页面布局，则if函数将增加一个补偿器以从Y轴上取走以提供正确的坐标。

到目前为止，它的正常工作将需要使用连续4张画布并在不同的屏幕尺寸上进行更多测试

c = {key: value/b[key] for key, value in a.items()}

具有屏幕尺寸的响应性更改页面上的canvas x，y值

1 个答案: