如何获得画布的平滑鼠标事件“绘画风格”应用程序吗？ [英] How to get smooth mouse events for a canvas "drawing style" app?

问题描述

我正在尝试在屏幕上为绘图样式应用程序制作流畅的鼠标移动。更具体地说，它是一个粉末玩具。这意味着，它逐个像素地绘制，所以我不能做一些线条欺骗。我最初想的是检查鼠标向下和鼠标向上，然后在我的游戏更新循环中放置一些东西，使其在屏幕上绘制像素，但是当我发现我无法直接获取鼠标X和鼠标Y时没有成功事件发生了。

I'm trying to make smooth mouse movements across the screen for a drawing style app. More specifically its a "Powder toy". What this means is, it draws pixel by pixel so I cant do some line trickery. I was initially thinking of checking mouse down and mouse up then put something in my game "update" loop to make it draw pixels to the screen but that didnt work out when I found I couldn't directly get the mouse X and mouse Y without the events firing.

所以有人知道一种平滑的鼠标移动方式，我现在的方式使用mousemove事件导致这种情况：

So does anyone know a way of smooth mouse movements, the way I have at the moment uses the mousemove event which causes this:

http://img1.uploadscreenshot.com/images /orig/9/26119184415-orig.jpg

（注意像素如何分开）

谢谢你，

推荐答案

看起来你正在做一个沙克隆世界，所以我想你需要rects。我使用 Bresenham的线算法来绘制点数。基本上 onmousedown 它开始绘画。然后 onmousemove 它将当前坐标与最后一个坐标进行比较，并绘制所有点之间的所有点。

Looks like your doing a world of sand clone so I imagine you need rects. I used Bresenham's line algorithm to plot the points. Basically onmousedown it starts painting. Then onmousemove it compares the current coordinates with the last coordinates and plots all of the points between.

现场演示

Live Demo

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    painting = false,
    lastX = 0,
    lastY = 0;

canvas.width = canvas.height = 600;
ctx.fillRect(0, 0, 600, 600);

canvas.onmousedown = function(e) {
    if (!painting) {
        painting = true;
    } else {
        painting = false;
    }

    ctx.fillStyle = "#ffffff";
    lastX = e.pageX - this.offsetLeft;
    lastY = e.pageY - this.offsetTop;
};

canvas.onmousemove = function(e) {
    if (painting) {
        mouseX = e.pageX - this.offsetLeft;
        mouseY = e.pageY - this.offsetTop;

        // find all points between        
        var x1 = mouseX,
            x2 = lastX,
            y1 = mouseY,
            y2 = lastY;


        var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
        if (steep){
            var x = x1;
            x1 = y1;
            y1 = x;

            var y = y2;
            y2 = x2;
            x2 = y;
        }
        if (x1 > x2) {
            var x = x1;
            x1 = x2;
            x2 = x;

            var y = y1;
            y1 = y2;
            y2 = y;
        }

        var dx = x2 - x1,
            dy = Math.abs(y2 - y1),
            error = 0,
            de = dy / dx,
            yStep = -1,
            y = y1;

        if (y1 < y2) {
            yStep = 1;
        }

        for (var x = x1; x < x2; x++) {
            if (steep) {
                ctx.fillRect(y, x, 1, 1);
            } else {
                ctx.fillRect(x, y, 1, 1);
            }

            error += de;
            if (error >= 0.5) {
                y += yStep;
                error -= 1.0;
            }
        }



        lastX = mouseX;
        lastY = mouseY;

    }
}

这篇关于如何获得画布的平滑鼠标事件“绘画风格”应用程序吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！