Einführung in die Strichzeichnungsmethode für Leinwandgummibänder (Codebeispiel)

Dieser Artikel bietet Ihnen eine Einführung in die Leinwand-Gummiband-Linienzeichnungsmethode (Codebeispiel). Ich hoffe, dass er Ihnen als Referenz dienen wird.

Was ist der Gummibandstil?

Das bedeutet, dass die Zeichnung wie ein Gummiband gedehnt werden kann. .
Das Beispiel ist wie folgt

Die Idee

Die Idee ist ganz einfach, nur das Gummiband Auf die Zeichenfunktion sollte wie folgt geachtet werden. Fassen Sie die Ideen der drei Phasen Mousedown, Mousemove und Mouseup zusammen:
Mousedown: Startposition aufzeichnen, ziehen (aufzeichnen, ob es sich im Ziehzustand befindet) wird auf true gesetzt, getImageData (Taste 1 für Gummibandeffekt)
Mousemove: Ziehzeit abrufen Pos. positionieren, ImageData (entsprechend getImageData, Gummibandeffekt-Taste 2) eingeben, eine gerade Linie entsprechend Pos zeichnen und starten
Mouseup: Ziehen wird wiederhergestellt auf false
Der Schlüssel liegt in den beiden Canvas-Methoden putImageData() und getImageData() , putImageData() zeichnet das Bild auf, wenn mit der Maus geklickt wird, und getImageData() stellt es entsprechend wieder her. Wenn diese beiden Methoden nicht ausgeführt werden, treten die folgenden Effekte auf:

putImageData() entspricht dem Löschen aller „gescannten“ Zeilen

Code

    <canvas> </canvas>
    <script>
        let canvas = document.getElementById(&#39;canvas&#39;),
            ctx = canvas.getContext(&#39;2d&#39;),
            canvasLeft = canvas.getBoundingClientRect().left, //getBoundingClientRect()获取元素位置
            canvasTop = canvas.getBoundingClientRect().top;
        let imageData; //记录图像数据
        let start = new Map([[&#39;x&#39;,null],[&#39;y&#39;,null]]);
        let drag = false;//记录是否处于拖动状态
        canvas.onmousedown = function (e) {
            let pos = positionInCanvas(e, canvasLeft, canvasTop);
            start.set(&#39;x&#39;, pos.x);
            start.set(&#39;y&#39;, 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(&#39;x&#39;), start.get(&#39;y&#39;));
               ctx.lineTo(pos.x, pos.y);
               ctx.stroke();
            }

        }
        canvas.onmouseup = function  (e) {
            drag = false;
        }
        function positionInCanvas (e, canvasLeft, canvasTop) {//获取canvas中鼠标点击位置
         return {
                  x:e.clientX - canvasLeft,
                  y:e.clientY - canvasTop
          }       
        }    
    </script>

Das obige ist der detaillierte Inhalt vonEinführung in die Strichzeichnungsmethode für Leinwandgummibänder (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!