canvas - 获取一条线上的像素答案

【问题标题】：canvas - get pixels on a linecanvas - 获取一条线上的像素
【发布时间】：2018-01-16 09:05:17
【问题描述】：

我需要一个接受 5 个参数（ctx、startX、startY、endX、endY）的函数。它应该返回位于线上的画布上的像素，从 (startX, startY) 开始并在 (endX, endY) 结束。我该如何实施？

【问题讨论】：

这太宽泛了，请更具体地说明您尝试了什么以及您的解决方案存在什么问题。所以不是在这里为您编写解决方案。在发布之前检查 SO 指南。
一条线段有无数个点，你需要找到哪一个？

【解决方案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) 从开始到结束一行。

【讨论】：