Метод нанесения рисунка линии резинкой на холсте

Рисунок пальцами может растягиваться, как резинка. .

Пример следующий: point_down:

Идея очень проста. Вам нужно только обратить внимание на функцию рисования резиновой ленты. Ниже обобщаются идеи трех этапов: перемещение мыши вниз, перемещение мыши и вверх.

mousedown: записать начальную позицию, перетащить (записать, находится ли она в состоянии перетаскивания) установлено значение true, getImageData ( 橡皮筋效果关键1 )

mousemove: получить позицию позиции при перетаскивании, поставитьImageData ( 对应getImageData，橡皮筋效果关键2 ), нарисовать прямую линию в соответствии с позицией и начать

mouseup:drag возвращается к false

关键заключается в двух методах холста putImageData() и getImageData(). putImageData() записывает изображение при щелчке мыши, а getImageData() соответствующим образом восстанавливает его. Если эти два метода не будут выполнены, возникнут следующие эффекты:

putImageData() эквивалентно стиранию всех отсканированных строк.

код

 <canvas id=canvas width=600 height=400 style=border: 1px сплошной черный;> </canvas> <script type=text/javascript> let Canvas = document.getElementById('canvas'), ctx = Canvas.getContext( '2d'), CanvasLeft = Canvas.getBoundingClientRect().left, //getBoundingClientRect() получает позицию элемента CanvasTop = Canvas.getBoundingClientRect().top; let imageData; //Запись данных изображения let start = new Map([['x',null],['y',null]]); //Запись, если В состоянии перетаскивания Canvas.onmousedown = function (e) { let pos = PositionInCanvas(e, CanvasLeft, CanvasTop); start.set('x', pos.x); pos.y); drag = true; // Запись imageData imageData = ctx.getImageData(0,0,canvas.width,canvas.height } Canvas.onmousemove = function (e) { if(drag === true) { let pos = PositionInCanvas(e, CanvasLeft, CanvasTop); // Эквивалентно стиранию всех отсканированных строк и перерисовке ctx.putImageData(imageData, 0, 0); ctx.beginPath(); ctx.moveTo(start.get('x'), start.get('y')); ctx.lineTo(pos.x, pos.y()); ; } } Canvas.onmouseup = function (e) { drag = false } function PositionInCanvas (e, CanvasLeft, CanvasTop) {//Получить позицию щелчка мыши на холсте return {; x:e.clientX - CanvasLeft, y:e.clientY - CanvasTop } } </script>

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.