javascript - canvas - 获取线上的像素

Question

我需要一个接受 5 个参数(ctx、startX、startY、endX、endY)的函数。它应该返回 Canvas 上位于从 (startX, startY) 开始到 (endX, endY) 结束的线上的像素。我该如何实现？

Answer 1

您可以使用布伦森汉姆线算法。它将获取每个像素，而无需检查您是否已经拥有许多其他线条方法所需的像素。

    function getPixelsOnLine(ctx, startX, startY, endX, endY){
        const imageData = ctx.getImageData(0,0,ctx.canvas.width,ctx.canvas.height);
        const data = imageData.data;
        const pixelCols = [];
        const getPixel = (x,y) => {
            if(x < 0 || x >= imageData.width || y < 0 || y >= imageData.height ){
                return "rgba(0,0,0,0)";
            }
            const ind = (x + y * imageData.width) * 4;
            return `rgba(${data[ind++]},${data[ind++]},${data[ind++]},${data[ind++]/255})`;
        }

        var x = Math.floor(startX);
        var y = Math.floor(startY);
        const xx = Math.floor(endX);
        const yy = Math.floor(endY);
        const dx = Math.abs(xx - x); 
        const sx = x < xx ? 1 : -1;
        const dy = -Math.abs(yy - y);
        const sy = y < yy ? 1 : -1;
        var err = dx + dy;
        var e2;
        var end = false;
        while (!end) {
            pixelCols.push(getpixel(x,y));
            if ((x === xx && y === yy)) {
                end = true;
            } else {
                e2 = 2 * err;
                if (e2 >= dy) {
                    err += dy;
                    x += sx;
                }
                if (e2 <= dx) {
                    err += dx;
                    y += sy;
                }
            }
        }
        return pixelCols;
    }

函数从头到尾以 CSS 颜色值形式返回像素数组 rgba(red,green,blue,alpha)。