@antonowano
Профессиональный самоучка

Плавное рисование линии в canvas?

На выходных для саморазвития решил смастерить браузерный paint на canvas.
Вот что получилось: https://antonowano.github.io/canvas-paint/
Но меня не радует то как рисует кисть. Сравнивая с ВКонтакте в моей версии, если резко повести мышь расстояние между мазками кисти (кружками) будет заметно.
Посоветуйте как сделать рисование кистью плавным как на граффити в ВКонтакте.
И ещё я заметил, что при одном проведении кистью в ВКонтакте - кружки образуют линию, а не ложатся друг на друга. Это заметно при рисовании полупрозрачных кружков.
Как подобное сделать?

Кстати: Приму любую критику по JS-коду. Приложение ориентировано на обучение и получения практики. Ваши советы мне будут очень полезны.
  • Вопрос задан
  • 1759 просмотров
Решения вопроса 1
Смотрите, как сделано в Гимпе:
b600e3f6abf9762bab4e3290dc5a68a5.png

Событие mousemove может иметь разный отступ, вам главное построить линию и расположить по этой линии равномерно точки.

Ну и вот как референс: libcanvas.github.io/archive/5iton
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
trushka
@trushka
trushka.narod.ru/sketch0 и trushka.narod.ru/sketch - это когда-то делал.. Ну, отправка на сервер не работает, так как на укоз залил. Кстати, из-за этого может с первого раза не работать вообще, если покажет рекламу в попапе - там видно укоз jQuery более новым переписывает, я давно писал, ещё bind-unbind для обработчиков использовал.. В общем, если не захочет рисовать (а в /sketch/ показывать попап с рисовалкой) - просто перезагрузить страничку

В sketch0 использовал кривые безье многоточечные для рисования, но потом уже допиливая, понял, что положительно влияет на плавность это намного меньше, чем отрицательно на производительность - в общем, в sketch просто равномерно заполняется кружочками отрезок между предыдущей точкой срабатывания mousemove и текущей. Кстати, чтоб не было "лесенки", кружочки заполняются градиентом, но точки генерируются так часто, что полупрозрачной оказывается только самая кромка линии - это сделано для одинакового отображения в разных браузерах, есть более простой способ - рисовать прямые отрезки между точками и добавлять к ним размытие или размытую тень. Но тогда они по-разному отображаются в разных браузерах. Для ускорения "кисточка" генерируется один раз в скрытом canvas'e, и потом вставляется как картинка. Толщина меняется колёсиком мыши

Скрипт там основной - editor.js Там конечно не очень.. этосамое, но разобраться, я думаю, можно. Кстати, там ещё предусмотрена "история" - после каждого mouseup текущее состояние холста сохраняется в картинку, добавляющуюся в массив. Потом при возврате выводится соответствующая картинка на холст. В общем вот такой вот вариант)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
19 июн. 2024, в 01:11
7000 руб./за проект
18 июн. 2024, в 23:10
15000 руб./за проект