我试图创建某种 Canvas ，右侧有一个菜单。 Canvas 应该使用屏幕的某些部分，希望在所有设备上保持恒定的比例，并且菜单应该具有固定的宽度。
我成功地做了一些看起来很像我想要的事情，但是当鼠标移动时，clientX 和 clientY 不准确。我相信这是因为 Flexbox 具有对齐中心，并且看起来我在 clientX 和 clientY 中看到的偏移量是由对齐创建的偏移量。我希望鼠标能够绘制指针所在的位置。
该界面针对移动浏览器。我不希望页面滚动，它应该使用 100% 的视口(viewport)，仅此而已。我不介意不使用 Flexbox。
CSS:
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
}
ul[role="layout"] {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex: 1 1 0%;
background: pink;
}
ul[role="layout"] .canvas canvas {
outline: 1px solid #000;
width: 96%;
margin: 2%;
}
ul[role="layout"] .canvas {
flex: 1 1 0%;
align-self: center;
}
ul[role="layout"] .menu {
background: green;
flex: 0 0 12rem;
}
Javascript
var canvas = window.paint_zone;
var ctx = canvas.getContext("2d");
//canvas.style.height = window.body.scrollHeight - 32;
var width = canvas.scrollWidth;
var height = canvas.scrollHeight;
canvas.width = width;
canvas.height = height;
canvas.addEventListener("mousemove", function(e){
ctx.beginPath();
var radius = 10;
ctx.fillStyle = "rgb(200,0,0)";
ctx.arc(e.clientX, e.clientY, radius, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();
e.preventDefault();
});
以及 <body> 内的 html .
<ul role="layout">
<li class="canvas">
<canvas id="paint_zone"></canvas>
</li>
<li class="menu">
<ul class="buttons">
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
<li>Menu1</li>
</ul>
</li>
</ul>
最佳答案
坐标是准确的，但是:
event.client* 行为实际上并不是为 Flexbox 定义的(什么是客户区？)
因此你应该使用绝对坐标，如 pageX 和 pageY 以及 getBoundingClientRect() 来计算相对坐标
你也是对的，align-self:center导致了(但不是唯一的)问题
您还拉伸(stretch)了 Canvas ，因此文档: Canvas 像素比不是 1:1
这是数学:
var actualX = e.pageX - canvas.getBoundingClientRect().left;
var actualY = e.pageY - canvas.getBoundingClientRect().top;
var currentWidth = this.scrollWidth;
var currentHeight = this.scrollHeight;
var the_x = canvas.width * actualX / currentWidth; // a simple proportion
var the_y = canvas.height * actualY / currentHeight;
ctx.arc(the_x, the_y, radius, 0, 2 * Math.PI, false);
这是工作演示:http://jsfiddle.net/qtkyw/
第一个!
关于android - Flexbox 的光标位置不准确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22429864/