带有弹性框的光标位置不准确

我正在尝试创建一些在右边有菜单的画布。画布应该使用屏幕的一部分，希望在所有设备上都是恒定的比例，菜单应该有固定的宽度。

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

该界面针对移动浏览器。我不希望页面滚动，它应该使用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();
});

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

坐标是准确的，但是:

事件。客户端*行为实际上没有定义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);

，这里是的工作演示: http://jsfiddle.net/qtkyw/

hth !

相关内容

最新更新

热门标签：