@ravend7

Как перерисовывать линий в HTML5 ?

Привет, All !

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

но при затирании обнаружилось что остается "след" от старой линии, края не затираются
здесь пример:
jsfiddle.net/uv0gk2pn/8

кто сталкивался, как решить проблему?

P.S.
вариант с затиранием через clearRect(...) не подходит, так как придется восстанавливать уже нарисованную картинку, а это избыточная нагрузка
  • Вопрос задан
  • 2262 просмотра
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Сделайте два элемента canvas друг над другом. В нижнем изображение, в верхнем, "рабочем", таскается линия. Тогда её можно стирать clearRect'ом.

<div style="position: relative;">
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>


Потом изменения можно копировать в нижний слой.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
teotlu
@teotlu
Навёрстываю упущенное
Я бы вообще использовал для таких задач какой-нибудь фреймворк для работы с канвасом, типа LibCanvas, где уже предусмотрены такие моменты, буферизация и т.д.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
25 апр. 2024, в 12:20
15000 руб./за проект
25 апр. 2024, в 12:08
300 руб./за проект
25 апр. 2024, в 11:49
25000 руб./за проект