Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

不言
Freigeben: 2019-02-13 14:23:22
nach vorne
3476 Leute haben es durchsucht

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

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

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:

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

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!