Méthode d'application de dessin au trait avec élastique en toile

Le dessin au doigt peut s'étirer comme un élastique. .

Un exemple est le suivant : point_down :

L'idée est très simple : il vous suffit de prêter attention à la fonction de dessin de l'élastique. Ce qui suit résume les idées des trois étapes de mousedown, mousemove et mouseup.

mousedown : enregistrez la position de départ, faites glisser (enregistrez s'il est dans un état de glissement) est défini sur true, getImageData ( 橡皮筋效果关键1 )

mousemove : Obtenez la position pos lors du glisser, putImageData ( 对应getImageData，橡皮筋效果关键2 ), tracez une ligne droite selon pos et démarrez

mouseup: le glisser revient à false

关键réside dans les deux méthodes de canevas putImageData() et getImageData() qui enregistrent l'image lorsque vous cliquez sur la souris et getImageData() la restaure en conséquence. Si ces deux méthodes ne sont pas exécutées, les effets suivants se produiront :

putImageData() équivaut à effacer toutes les lignes numérisées

code

 <canvas id=canvas width=600 height=400 style=border: 1px solid black;> </canvas> <script type=text/javascript> let canvas = document.getElementById('canvas'), ctx = canvas.getContext( '2d'), canvasLeft = canvas.getBoundingClientRect().left, //getBoundingClientRect() obtient la position de l'élément canvasTop = canvas.getBoundingClientRect().top; let imageData; //Enregistrer les données de l'image let start = new Map([['x',null],['y',null]]); Dans l'état de glissement canvas.onmousedown = function (e) { let pos = positionInCanvas(e, canvasLeft, canvasTop start.set('x', pos.x start.set('y'); pos.y); drag = true; //Enregistrer imageData imageData = ctx.getImageData(0,0,canvas.width,canvas.height } canvas.onmousemove = function (e) { if(drag === true) { let pos = positionInCanvas(e, canvasLeft, canvasTop); //Équivaut à effacer toutes les lignes numérisées et à redessiner ctx.putImageData(imageData, 0, 0); ctx.beginPath(); ctx.moveTo(start.get('x'), start.get('y')); ; } } canvas.onmouseup = function (e) { drag = false } function positionInCanvas (e, canvasLeft, canvasTop) {//Obtient la position du clic de la souris dans le canevas return { x:e.clientX - canvasLeft, y:e.clientY - canvasTop } } </script>

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.