我需要将三角形添加到像素数组中。以下是我的代码:
- 表示像素的数组:[r,g,b,a,r,g,b,a,...]
- 像素密度
- 图像的宽度和高度
- 我的三角形:{p0: {x: 5, y: 20}, p1: {x: 65, y: 220}, p2: {x: 10, y: 143}}
- 三角形的颜色为{r: 100, g: 214, b: 45, a:200}
for (let i = 0; i < pixels.length; i+=4) {
pixels[i] = color.r;
pixels[i+1] = color.g;
pixels[i+2] = color.b;
pixels[i+3] = color.a;
}
如何计算出需要填充颜色的像素?
谢谢!
编辑:也许我应该稍微解释一下。我已经成功画出了三角形的点,但是不知道如何填充区域。我还想考虑性能,并避免查看每个像素。下面是我如何绘制点的代码:
static getIndex(x, y, width) {
return 4 * (width * y + x);
}
static drawTriangle(triangle, img) {
for (let i = 0; i < triangle.points.length; i++) {
let point = triangle.points[i];
for (let a = -5; a < 6; a++) {
let idx = this.getIndex(point.x + a, point.y, img.width);
img.pixels[idx] = triangle.color.r;
img.pixels[idx + 1] = triangle.color.g;
img.pixels[idx + 2] = triangle.color.b;
img.pixels[idx + 3] = triangle.color.a;
idx = this.getIndex(point.x, point.y + a, img.width);
img.pixels[idx] = triangle.color.r;
img.pixels[idx + 1] = triangle.color.g;
img.pixels[idx + 2] = triangle.color.b;
img.pixels[idx + 3] = triangle.color.a;
}
};
}
lineTo
调用来绘制一个三角形,然后使用getImageData
从中获取图像位图。 - trincot(y,x1,x2)
的例程,然后使用任何三角形光栅化算法。 - MBopixels[]
组织方式并不合理,通常 2D 光栅图像是存储为 2D 像素数组而不是列表... 如果你的像素只是编码为 1D 数组,那么像素 x,y 可以通过pixel[x+y*xs]
或pixel[y+x*ys]
访问,其中xs,ys
是光栅分辨率,你需要指定它是多少... MBo 是正确的,看一下我链接的重复项以及其中的子链接... 你应该能够找到实现这个 三角形光栅化 所需的所有内容。 - Spektre