Как нарисовать квадратичную кривую Безье на линейном фреймбуфере
Как следует из названия, я хочу нарисовать квадратичную кривую Безье на линейном буфере кадра (т. е. построить пиксели).
У меня уже есть функция, рисующая кубическую кривую Безье по https://www.joshondesign.com/2018/07/11/bezier-curves (я перевел javascript на C вот так https:// gist.github.com/cheyao/a736a58c4cf683eabea2aa2a87718ef1#file-cubic-c), который отлично работает.
И теперь я попытался преобразовать его в рисунок квадратичной кривой Безье (например, https://gist.github.com/cheyao/a736a58c4cf683eabea2aa2a87718ef1#file-flatness-c), который выглядит не очень хорошо для меня (тоже не кривая).
Я также пытался жестоко заставить его вот так
void quadratic_bezier_curve(const Vector2 p[3], const color_t color) {
for (double t = 0; t < 1; t += 0.001) {
putPixel((uint32_t) ((1 - t) * (1 - t) * p[0].x + 2 * (1 - t) * t * p[1].x + t * t * p[2].x),
(uint32_t) ((1 - t) * (1 - t) * p[0].y + 2 * (1 - t) * t * p[1].y + t * t * p[2].y), color);
}
}
Что заставляет подобное выглядеть жирным.
Итак, мой вопрос: кто-нибудь знает какие-нибудь лучшие алгоритмы для рисования (квадратичных) кривых Безье? (Мне это нужно для рендеринга шрифтов.)
Я знаю, что это немного сумасшествие, но, поскольку мой экран имеет ширину 1024 пикселя, если мне нравится слева направо экрана, использование примерно 100 точек на кривую недостаточно. Но большое спасибо за вашу ссылку!
Хотя это и правда, решение, как правило, состоит в том, чтобы выбрать количество шагов, которое меньше, чем вам нужно, чтобы нарисовать каждый пиксель, а затем просто провести линии между каждой точкой (в этом случае брезенхем не требуется), вместо того, чтобы рисовать каждую точку как пиксель. . Даже для кубических кривых большого размера вам обычно требуется менее 100 шагов для хорошо выглядящей кривой (и выборка с равномерным шагом t автоматически размещает «легко аппроксимируемые линиями» сегменты далеко друг от друга, в то время как интервал «для этого требуется больше, маленькие, сегменты " Близко к друг другу)
Ответы 1
Ваш код работает. Нашел ошибку, что для плоскостности нужно проверять абсолютные значения. И была опечатка, что p[1].y было использовано дважды, а не один раз. Так было бы так:
static int32_t quadratic_flatness(const Vector2 p[3]) {
return abs((int32_t) p[1].x - (((int32_t) p[0].x + (int32_t) p[2].x) / 2))
+ abs((int32_t) p[1].y - (((int32_t) p[0].y + (int32_t) p[2].y) / 2));
}
Живой пример в JS (нажмите кнопку «Выполнить фрагмент кода» и начните щелкать левой кнопкой мыши по холсту):
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
document.body.style.margin = 0;
canvas.style.position = 'fixed';
// get canvas 2D context and set him correct size
var ctx = canvas.getContext('2d');
resize();
let points = [];
window.addEventListener('resize', resize);
document.addEventListener('mousedown', setPosition);
function quadratic_split_curve(p) { // out[2][3]
const p12 = midpoint(p[0], p[1]);
const p23 = midpoint(p[1], p[2]);
const p123 = midpoint(p12, p23);
return [
[p[0], p12, p123],
[p123, p23, p[2]]
];
}
function quadratic_flatness(p) {
const result = Math.abs(p[1].x - (Math.floor( p[0].x + p[2].x) / 2)) + Math.abs(p[1].y - (Math.floor( p[0].y + p[2].y) / 2));
return result;
}
function quadratic_bezier_curve(p, color) {
if (quadratic_flatness(p) < 2) {
line(p[0], p[2], color);
return;
} else {
const split = quadratic_split_curve(p);
quadratic_bezier_curve(split[0], color);
quadratic_bezier_curve(split[1], color);
}
}
function midpoint(a, b) {
return {
x: (a.x + b.x)/2,
y: (a.y + b.y)/2
}
}
// new position from mouse event
function setPosition(e) {
if (points.length >= 3) {
points = [];
}
points.push({ x: e.clientX, y: e.clientY });
draw();
}
function resize() {
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
function clear() {
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
}
function dot(point) {
ctx.fillRect(point.x-1,point.y-1,3,3);
}
function line(a, b, color) {
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.stroke();
}
function draw() {
clear();
for(const point of points) {
dot(point);
}
if (points.length == 3) {
ctx.lineWidth = 1;
quadratic_bezier_curve(points, '#c0392b');
}
if (points.length > 1) {
ctx.lineWidth = 2;
ctx.strokeStyle = '#3039cb77';
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for(i=1; i<points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.stroke();
}
return;
}Этот фрагмент кода ничего не рисует. Помните, что фрагмент отображается только высотой 200 пикселей.
@Mike'Pomax'Kamermans, вам нужно щелкнуть, чтобы разместить там 3 точки, тогда будет нарисована квадратичная кривая.
Обратите внимание, что если вы хотите рисовать «настоящие» пиксели (без субпикселей), то использование 1000 точек на кривую — это безумие, вы будете пересчитывать один и тот же пиксель снова и снова в этом разрешении. Если вам нужны только «новые пиксели», не рисуйте кривую вот так, нарисуйте ее с помощью алгоритма Bresenham.