光标未使用 HTML 画布对齐

问题描述 投票：0回答：3

我有以下 Javascript、HTML 和 CSS 代码

function distanceBetween(point1, point2) {
    return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}

function angleBetween(point1, point2) {
    return Math.atan2(point2.x - point1.x, point2.y - point1.y);
}

function draw() {
    var img = new Image();
    img.src = 'http://www.tricedesigns.com/wp-content/uploads/2012/01/brush2.png';

    var el = document.getElementById('DrawingPattern');
    var ctx = el.getContext('2d');
    ctx.lineJoin = ctx.lineCap = 'round';

    var isDrawing, lastPoint;

    el.onmousedown = function (e) {
        isDrawing = true;
        lastPoint = {x: e.clientX, y: e.clientY};
    };

    el.onmousemove = function (e) {
        if (!isDrawing) return;

        var currentPoint = {x: e.clientX, y: e.clientY};
        var dist = distanceBetween(lastPoint, currentPoint);
        var angle = angleBetween(lastPoint, currentPoint);

        for (var i = 0; i < dist; i++) {
            x = lastPoint.x + (Math.sin(angle) * i) - 25;
            y = lastPoint.y + (Math.cos(angle) * i) - 25;
            ctx.drawImage(img, x, y);
        }

        lastPoint = currentPoint;
    };

    el.onmouseup = function () {
        isDrawing = false;
    };
}
html, body {
    color: #fff;
    background: #000;
    font-family: "Lucida Grande";
}

canvas{
    position: static;
    cursor: move;
    margin: auto;
    width: 70%;
    border: 3px solid #73AD21;
    background: white;
    overflow: visible;
}
<body onload=draw()>
<canvas width="1024" height="649" id="DrawingPattern">
<!-- add fallback content-->
</canvas>
</body>

整个代码有效，我遇到的唯一问题是当我开始在画布上绘图时，光标与光标的有效位置不对齐。因此，当我绘制时，它会在另一个位置绘制线条，高于或低于光标的实际位置。我尝试了不同的方法，但我猜这是某种缩放问题，但我无法解决它。

javascript html canvas scaling cursor-position
3个回答
2
投票

这是一个缩放问题。即使您通过按百分比设置 CSS 宽度来缩放画布元素，绘图区域的大小也不会改变。你在屏幕空间中获取鼠标坐标，但是在绘图时需要转换到画布空间。

为此，请考虑 

el.width
（画布宽度）和 
el.offsetWidth
（元素宽度）之间的差异来计算比例。由于画布通过保持纵横比按比例缩放，因此可以对 X 和 Y 坐标使用相同的缩放。

我添加了一个 

elementScale()
函数并更新了代码以将 
clientX
和 
clientY
与返回值相乘。

function distanceBetween(point1, point2) {
    return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}

function angleBetween(point1, point2) {
    return Math.atan2(point2.x - point1.x, point2.y - point1.y);
}

function elementScale(el) {
    return el.offsetWidth === 0 ? 0 : (el.width / el.offsetWidth);
}

function draw() {
    var img = new Image();
    img.src = 'http://www.tricedesigns.com/wp-content/uploads/2012/01/brush2.png';

    var el = document.getElementById('DrawingPattern');
    var ctx = el.getContext('2d');
    ctx.lineJoin = ctx.lineCap = 'round';

    var isDrawing, lastPoint;

    el.onmousedown = function (e) {
        var scale = elementScale(el);
        isDrawing = true;
        lastPoint = {x: e.clientX * scale, y: e.clientY * scale};
    };

    el.onmousemove = function (e) {
        if (!isDrawing) return;

        var scale = elementScale(el);
        var currentPoint = {x: e.clientX * scale, y: e.clientY * scale};
        var dist = distanceBetween(lastPoint, currentPoint);
        var angle = angleBetween(lastPoint, currentPoint);

        for (var i = 0; i < dist; i++) {
            x = lastPoint.x + (Math.sin(angle) * i) - 25;
            y = lastPoint.y + (Math.cos(angle) * i) - 25;
            ctx.drawImage(img, x, y);
        }

        lastPoint = currentPoint;
    };

    el.onmouseup = function () {
        isDrawing = false;
    };
}
html, body {
    color: #fff;
    background: #000;
    font-family: "Lucida Grande";
}

canvas{
    position: static;
    cursor: move;
    margin: auto;
    width: 70%;
    border: 3px solid #73AD21;
    background: white;
    overflow: visible;
}
<body onload=draw()>
<canvas width="1024" height="649" id="DrawingPattern">
<!-- add fallback content-->
</canvas>
</body>

1
投票

就像 DarthJDG 所说，这是 CSS 的缩放问题

您可以删除画布上的 CSS width:70%，然后尝试像往常一样进行调整

CSS 代码

    html, body {
        color: #fff;
        background: #000;
        font-family: "Lucida Grande";
    }

    canvas{
        position: static;
        cursor: move;
        margin: auto;
        //width:70%; //REMOVED
        border: 3px solid #73AD21;
        background: white;
        overflow: visible;
    }

JAVASCRIPT代码

for (var i = 0; i < dist; i++) {
    x = lastPoint.x + (Math.sin(angle) * i) - 25; //CHANGED
    y = lastPoint.y + (Math.cos(angle) * i) - 25; //CHANGED
    ctx.drawImage(img, x, y);
}

只需删除 CSS 宽度，您的缩放就会再次正常。

0
投票

我遇到了这个问题（当我在 Minecraft 中使用插件 Artmap 时，光标没有对齐，所以当我绘制它时，它会在另一个位置绘制线条），但我正在服务器中玩，奇怪的是：昨天还可以，现在不行了，但对于其他玩家来说仍然可以正常工作。有谁知道为什么会这样吗？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.