Methode zum Auftragen von Leinwand-Gummiband-Strichzeichnungen

Fingerzeichnungen können sich wie ein Gummiband dehnen. .

Ein Beispiel ist wie folgt: point_down:

Die Idee ist sehr einfach. Sie müssen nur auf die Gummiband-Zeichnungsfunktion achten. Im Folgenden werden die Ideen der drei Phasen Mousedown, Mousemove und Mouseup zusammengefasst.

Mousedown: Startposition aufzeichnen, Ziehen (aufzeichnen, ob es sich im Ziehzustand befindet) wird auf true gesetzt, getImageData ( 橡皮筋效果关键1 )

Mousemove: Ermitteln Sie beim Ziehen die Position pos, putImageData ( 对应getImageData，橡皮筋效果关键2 ), zeichnen Sie eine gerade Linie entsprechend pos und beginnen Sie

„mouseup:drag“ wird auf „false“ zurückgesetzt

关键liegt in den beiden Canvas-Methoden putImageData() und getImageData(), die das Bild aufzeichnen, wenn mit der Maus geklickt wird, und getImageData() entsprechend wiederherstellen. Wenn diese beiden Methoden nicht ausgeführt werden, treten folgende Auswirkungen auf:

putImageData() entspricht dem Löschen aller gescannten Zeilen

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() ruft die Elementposition canvasTop = ab canvas.getBoundingClientRect().top; let imageData; //Bilddaten aufzeichnen let start = new Map([['x',null],['y',null]]); Im Ziehzustand canvas.onmousedown = function (e) { let pos = positionInCanvas(e, canvasLeft, canvasTop); pos.y); drag = true; //Record imageData imageData = ctx.getImageData(0,0,canvas.width,canvas.height); } canvas.onmousemove = function (e) { if(drag === true) { let pos = positionInCanvas(e, canvasLeft, canvasTop); //Entspricht dem Löschen aller gescannten Zeilen und dem Neuzeichnen 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) {//Ermitteln Sie die Mausklickposition im Canvas return { x:e.clientX - canvasLeft, y:e.clientY - canvasTop } } </script>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.