带有 flexbox 的光标位置不准确

Question

带有 flexbox 的光标位置不准确

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

我成功地做了一些看起来很像我想要的东西，但是当鼠标移动时，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;
    }

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

和 html 里面的<body>.

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

坐标是准确的，但：

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

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

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

你也在拉伸画布，所以文档：画布像素比不是 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);

Run Code Online (Sandbox Code Playgroud)

这是工作演示：http : //jsfiddle.net/qtkyw/

嗯！

归档时间：	11 年，8 月前
查看次数：	747 次
最近记录：	11 年，8 月前