Так мне наконец удалось получить то, что я хотел. Не знал о растеризации треугольников, спасибо за ссылки.
Вот что у меня есть:
Метод getIndex, чтобы найти индекс координат x, y в массиве пикселей.
static getIndex(x, y, width) {
return 4 * (width * y + x);
}
Затем функция графика, чтобы заполнить координаты x, y цветом. Я также добавил альфа-смешивание.
static plot(x, y, color, img) {
let idx = this.getIndex(x, y, img.width);
let added = [color.r, color.g, color.b, map(color.a, 0, 255, 0, 1)];
let base = [img.pixels[idx], img.pixels[idx + 1], img.pixels[idx + 2], map(img.pixels[idx + 3], 0, 255, 0, 1)];
let a01 = 1 - (1 - added[3]) * (1 - base[3]);
img.pixels[idx + 0] = Math.round((added[0] * added[3] / a01) + (base[0] * base[3] * (1 - added[3]) / a01)); // red
img.pixels[idx + 1] = Math.round((added[1] * added[3] / a01) + (base[1] * base[3] * (1 - added[3]) / a01)); // green
img.pixels[idx + 2] = Math.round((added[2] * added[3] / a01) + (base[2] * base[3] * (1 - added[3]) / a01)); // blue
img.pixels[idx + 3] = Math.round(map(a01, 0, 1, 0, 255));
}
Мне также нужно было уметь рисовать линии:
static line(x0, y0, x1, y1, img, color) {
x0 = Math.round(x0);
y0 = Math.round(y0);
x1 = Math.round(x1);
y1 = Math.round(y1);
var dx = Math.abs(x1 - x0);
var dy = Math.abs(y1 - y0);
var sx = x0 < x1 ? 1 : -1;
var sy = y0 < y1 ? 1 : -1;
var err = dx - dy;
let itt = 0;
while (true) {
this.plot(x0, y0, color, img);
itt ++;
if (x0 == x1 && y0 == y1) break;
var e2 = 2 * err;
if (e2 > -dy) {
err -= dy;
x0 += sx;
}
if (e2 < dx) {
err += dx;
y0 += sy;
}
}
}
Затем идет растеризация, я использовал следующую ссылку: http://www.sunshine2k.de/coding/java/TriangleRasterization/TriangleRasterization.html
static fillTriangle(triangle, img) {
let vertices = Array.from(triangle.points);
vertices.sort((a, b) => a.y > b.y);
if (vertices[1].y == vertices[2].y) {
this.fillBottomFlatTriangle(vertices[0], vertices[1], vertices[2], img, triangle.color);
} else if (vertices[0].y == vertices[1].y) {
this.fillTopFlatTriangle(g, vertices[0], vertices[1], vertices[2], img, triangle.color);
} else {
let v4 = {
x: vertices[0].x + float(vertices[1].y - vertices[0].y) / float(vertices[2].y - vertices[0].y) * (vertices[2].x - vertices[0].x),
y: vertices[1].y
};
this.fillBottomFlatTriangle(vertices[0], vertices[1], v4, img, triangle.color);
this.fillTopFlatTriangle(vertices[1], v4, vertices[2], img, triangle.color);
}
}
static fillBottomFlatTriangle(v1, v2, v3, img, color) {
let invslope1 = (v2.x - v1.x) / (v2.y - v1.y);
let invslope2 = (v3.x - v1.x) / (v3.y - v1.y);
let curx1 = v1.x;
let curx2 = v1.x;
for (let scanlineY = v1.y; scanlineY <= v2.y; scanlineY++) {
this.line(curx1, scanlineY, curx2, scanlineY, img, color);
curx1 += invslope1;
curx2 += invslope2;
}
}
static fillTopFlatTriangle(v1, v2, v3, img, color) {
let invslope1 = (v3.x - v1.x) / (v3.y - v1.y);
let invslope2 = (v3.x - v2.x) / (v3.y - v2.y);
let curx1 = v3.x;
let curx2 = v3.x;
for (let scanlineY = v3.y; scanlineY > v1.y; scanlineY--) {
this.line(curx1, scanlineY, curx2, scanlineY, img, color);
curx1 -= invslope1;
curx2 -= invslope2;
}
}
И вуаля, я могу рисовать свои треугольники. Может быть, это и не ракетостроение, но я не думаю, что можно считать это «базовым»…
Спасибо за помощь!
person
Rylyn
schedule
01.03.2018
lineTo
, а затем возьмите растровое изображение из него с помощьюgetImageData
? - person trincot   schedule 01.03.2018(y,x1,x2)
, а затем использовать любой алгоритм растеризации треугольника - person MBo   schedule 01.03.2018pixels[]
не имеет особого смысла, обычно 2D-растровая карта хранится как 2D-массив пикселей, а не как список... если ваши пиксели просто закодированы как 1D-массив, поэтому доступ к пикселю x, y осуществляется какpixel[x+y*xs]
илиpixel[y+x*ys]
, гдеxs,ys
- это растровое разрешение, которое вам нужно указать... MBo правильно посмотрите на дубликат, который я связал, а также в подссылках там... вы должны найти там все, что вам нужно для реализации этой треугольной растеризации . - person Spektre   schedule 01.03.2018