Сглаживание Свободное рисование на холсте Html5

Question

Я реализую бесплатное рисование с помощью HTML5 canvas. В настоящее время все работает нормально. Я использую moveTo () и lineTo () для каждого перемещения мыши. Я должен точно настроить рисунок;

когда я рисую некоторую кривую в виде линий с быстрыми движениями, рисунок будет рисоваться как соединение прямых линий. Есть ли альтернативный способ рисования, чтобы сделать рисунок более плавным?

Answer 1

Я на самом деле сделал то же самое:

ctx.beginPath();
ctx.moveTo(lp.x-.5, lp.y-.5); // Last recorded position.
ctx.lineTo(cp.x-.5, cp.y-.5); // Current position at time of call.
ctx.stroke();

Кривые Безье отлично подходят для функциональности в виде пера (пути), но я также получил непредвиденные результаты с этим, а именно кривую междуP0 и P2 слишком далеки от P1 ... Это можно сделать, добавив дополнительные баллы, по которым можно оценить функцию (подняв ее до более высоких степеней, что, похоже, и делает Adobe).

I 'Мы потратили два дня, отвечая на этот вопрос, много изучая лучшие примеры, разбирая код там, где он есть.По сути, есть два ответа:

1.) Примените фильтр - размытие по прямоугольнику или по Гауссу немного сгладит неровные края, делая его менее угловатым.

2.) ПрименитьКривая Безье - Между событиями mousedown и mouseup зарегистрируйте массив точек и примените кривую.Чем длиннее линия, тем медленнее повторный рендеринг. ( Muro - приложение холста deviantArt, кажется, делает это).[NB: Если идея состоит в том, чтобы создать художественное веб-приложение для людей, которые будут рисовать, покажите им оригинальную линию, пока не закончится плавный рендеринг.]

Мне нравится где-то посередине, лично.Небольшое размытие имеет тенденцию смягчать вещи, особенно в углах, и делает медленно размещенные (таким образом, частые, более короткие линии) намного более мягкими). ​​

Кое-что я добавлю, что может быть совершенно очевидно, поэтому я извиняюсь: убедитесь, чтоВы установили стиль кепки 'round' –– ctx.lineCap = 'round'

Answer 2

Я не думаю, что есть лучший способ для самого рисования, однако, если вы поместите функции рисования непосредственно в обработчики событий перемещения мыши, то это замедлит его,

Чтобы ускорить это, вы можете просто сохранить координаты в массиве в обработчиках событий и подождать, пока мышь перестанет двигаться, прежде чем проходить через массив и рисовать.

Преимущество будет в том, что события будут вызываться более быстро, делая более плавные кривые, недостаток будет в том, что при перемещении мыши будет много «запаздывания».

Альтернативой может быть попытка определить, когда пользователь изгибается, и использовать метод рисования соответствующей кривой.