Introduction à la méthode de dessin de lignes avec élastique en toile (exemple de code)-Tutoriel H5-php.cn

Introduction à la méthode de dessin de lignes avec élastique en toile (exemple de code)

不言

Libérer： 2019-02-13 14:23:22

avant

3503 Les gens l'ont consulté

Cet article vous présente une introduction à la méthode de dessin de lignes avec élastique sur toile (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Qu'est-ce que le style d'élastique ?

Cela signifie que le dessin peut être étiré comme un élastique. .
L'exemple est le suivant

Introduction à la méthode de dessin de lignes avec élastique en toile (exemple de code)

L'idée

L'idée est très simple, seulement l'élastique la fonction de dessin doit être prise en compte, comme suit Résumez les idées des trois phases de mousedown, mousemove et mouseup
mousedown : enregistrez la position de départ, faites glisser (enregistrez s'il est en état de glisser) est défini sur true, getImageData (touche 1 pour effet élastique)
mousemove : obtenir le temps de glisser Position pos, putImageData (correspondant à getImageData, effet élastique touche 2), tracer une ligne droite selon pos et démarrer
mouseup : le glisser est restauré to false
La clé réside dans les deux méthodes de canevas putImageData() et getImageData() , putImageData() enregistre 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

Introduction à la méthode de dessin de lignes avec élastique en toile (exemple de code)

putImageData() équivaut à effacer toutes les lignes "scannées"

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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!