Question

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

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

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>

Answer 1

坐标是准确的但是：

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

因此你应该使用绝对坐标，如pageX＆amp; pageY和getBoundingClientRect（）来计算相对的

你也是对的，对齐自我：中心有助于（但不是唯一的）问题

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

使用flexbox的光标位置并不准确

1 个答案: