flexbox 的光标位置不准确答案

【问题标题】：Cursor position with flexbox isn't accurateflexbox 的光标位置不准确
【发布时间】：2014-03-26 13:40:48
【问题描述】：

我试图用右侧的菜单创建某种画布。画布应使用屏幕的某些部分，希望在所有设备上保持恒定比例，并且菜单应具有固定宽度。

我成功地做了一些看起来很像我想要的事情，但是当鼠标移动时，clientX 和 clientY 是不准确的。我相信这是因为 flexbox 有对齐中心，看起来我在 clientX 和 clientY 中看到的偏移量是由对齐创建的。我希望鼠标在指针所在的位置绘制。

该界面针对移动浏览器。我不希望页面滚动，它应该使用 100% 的视口，仅此而已。我不介意不使用 flexbox。

http://jsfiddle.net/F8YBf/

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>

【问题讨论】：

标签： android css flexbox

【解决方案1】：

坐标是准确的，但是：

event.client* 行为实际上并没有为 flexbox 定义（客户区是什么？）

因此您应该使用绝对坐标，例如 pageX & pageY 和 getBoundingClientRect() 来计算相对坐标

你也是对的，align-self:center 促成了（但不是唯一的）问题

你也在拉伸画布，所以 document: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/

hth！

【讨论】：

好吧，被拉伸的画布并不是什么大问题。我想使用转换矩阵来修复它。然而我最终使用了绝对布局 + css 转换。我需要一个固定大小的画布，我希望它四处移动。但答案正是我当时想要的。如果我没记错的话，我的变换矩阵可能在画布内和 css 属性变换内可用。