多个画布如何 - 相同的交互

Question

我正在尝试使用this interaction，但在连续 3 个画布上。我一直在尝试使用它一段时间，但未能添加多个使用相同交互而不会相互干扰的画布。

我想将它们分别称为 canvas1、canvas2 和 canvas3，但我想知道是否有人知道更简单的方法？

我对我的想法做了一个粗略的隐藏/显示 jquery 版本，但它会使用那种刮擦交互。

谢谢！

$(".image1").click(function(){
  $(".image1").hide();
  $("p").show();
});

$(".image2").click(function(){
  $(".image2").hide();
  $("p").show();
});

$(".image3").click(function(){
  $(".image3").hide();
  $("p").show();
});

 .pannel{                    
    width: calc(33% - 40px);
    height: 220px;
    float: left;
    margin: 0 20px;
}

.image1, .image2, .image3{
    max-width:100px !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    position:absolute;
}

.text-div{
    width: 80%;
    text-align: center;
    margin:auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   <div class="container">

       

        <div class="row pannels">
            <div class="col-lg-12">

                <div class="pannels-div">

                    <div class="pannel ">
                        <div class="image1"><img src="https://www.patrickmorin.com/media/catalog/product/cache/e4d64343b1bc593f1c5348fe05efa4a6/a/s/asphalt-shingle-lifetime-1-BAREVGL-fr.jpg" width="220"></div>
                        
                        <div class="text-div">
                            <p> Vestibulum tempor erat at mauris aliquet, eu laoreet mi imperdiet.</p>
                        </div>
                    
                    </div>


                    <div class="pannel">
                        <div class="image2"><img src="https://www.patrickmorin.com/media/catalog/product/cache/e4d64343b1bc593f1c5348fe05efa4a6/a/s/asphalt-shingle-lifetime-1-BAREVGL-fr.jpg" width="220"></div>
                     
                        <div class="text-div">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim risus et orci fringilla semper.</p>
                        </div>
                      
                    </div>


                    <div class="pannel">
                        <div class="image3"><img src="https://www.patrickmorin.com/media/catalog/product/cache/e4d64343b1bc593f1c5348fe05efa4a6/a/s/asphalt-shingle-lifetime-1-BAREVGL-fr.jpg" width="220"></div>
                        
                        <div class="text-div">
                            <p>Praesent eget congue sem, tempor fermentum augue. Duis vulputate, libero vitae efficitur convallis.</p>
                        </div>
                      
                    </div>

                    

                </div>

            </div>
        </div>

    </div>

Answer 1

好的，我已经通过在每个班级和每个画布上添加一个数字来解决这个问题。很高兴知道是否存在使用相同绘图效果但用于多个画布的最佳方法。

代码是一团糟，但我想它现在可以工作了

 (function () {

      'use strict';


      /* 1er */
      var isDrawing1, lastPoint1;
      var container1 = document.getElementById('js-container1');
      var canvas1 = document.getElementById('js-canvas1');
      var canvas1Width = canvas1.width;
      var canvas1Height = canvas1.height;
      var ctx1 = canvas1.getContext('2d');
      var image1 = new Image();
      var brush1 = new Image();

      /* 2e */
      var isDrawing2, lastPoint2;
      var container2 = document.getElementById('js-container2');
      var canvas2 = document.getElementById('js-canvas2');
      var canvas2Width = canvas2.width;
      var canvas2Height = canvas2.height;
      var ctx2 = canvas2.getContext('2d');
      var image2 = new Image();
      var brush2 = new Image();

      /* 3e */
      var isDrawing3, lastPoint3;
      var container3 = document.getElementById('js-container3');
      var canvas3 = document.getElementById('js-canvas3');
      var canvas3Width = canvas3.width;
      var canvas3Height = canvas3.height;
      var ctx3 = canvas3.getContext('2d');
      var image3 = new Image();
      var brush3 = new Image();

      /* Load top images */
      image1.src = 'http://placehold.it/324x289/145f46?text=Canva1';
      image2.src = 'http://placehold.it/324x289/145f46?text=Canva2';
      image3.src = 'http://placehold.it/324x289/145f46?text=Canva3';
      draw1();
      draw2();
      draw3();
 
      

      function draw1() {
        // image du dessus  
        image1.onload = function () {
          ctx1.drawImage(image1, 0, 0);
          // Show the scratchText when Image is loaded.
          document.querySelectorAll('.scratchText1')[0].style.visibility = 'visible';
        };
        //image du brush a scratch
        brush1.src = 'https://icon-library.com/images/3-dots-icon/3-dots-icon-9.jpg';

        //Mouvement de la souris
        canvas1.addEventListener('mousedown', handleMouseDown, false);
        canvas1.addEventListener('touchstart', handleMouseDown, false);
        canvas1.addEventListener('mousemove', handleMouseMove, false);
        canvas1.addEventListener('touchmove', handleMouseMove, false);
        canvas1.addEventListener('mouseup', handleMouseUp, false);
        canvas1.addEventListener('touchend', handleMouseUp, false);

        function distanceBetween(point1, point2) {
          return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
        }

        function angleBetween(point1, point2) {
          return Math.atan2(point2.x - point1.x, point2.y - point1.y);
        }


        function getMouse(e, canvas1) {
          var offsetX = 0,
            offsetY = 0,
            mx, my;

          if (canvas1.offsetParent !== undefined) {
            do {
              offsetX += canvas1.offsetLeft;
              offsetY += canvas1.offsetTop;
            } while ((canvas1 = canvas1.offsetParent));
          }

          mx = (e.pageX || e.touches[0].clientX) - offsetX;
          my = (e.pageY || e.touches[0].clientY) - offsetY;

          return {
            x: mx,
            y: my
          };
        }

        function handleMouseDown(e) {
          isDrawing1 = true;
          lastPoint1 = getMouse(e, canvas1);
        }

        function handleMouseMove(e) {
          if (!isDrawing1) {
            return;
          }

          e.preventDefault();

          var currentPoint = getMouse(e, canvas1),
            dist = distanceBetween(lastPoint1, currentPoint),
            angle = angleBetween(lastPoint1, currentPoint),
            x, y;

          for (var i = 0; i < dist; i++) {
            x = lastPoint1.x + (Math.sin(angle) * i) - 25;
            y = lastPoint1.y + (Math.cos(angle) * i) - 25;
            ctx1.globalCompositeOperation = 'destination-out';
            ctx1.drawImage(brush1, x, y);
          }

          lastPoint1 = currentPoint;

        }

        function handleMouseUp(e) {
          isDrawing1 = false;
        }

      }



      /* 2e */
      function draw2() {
        // image du dessus  
        image2.onload = function () {
          ctx2.drawImage(image2, 0, 0);
          // Show the scratchText when Image is loaded.
          document.querySelectorAll('.scratchText2')[0].style.visibility = 'visible';
        };
        //image du brush a scratch
        brush2.src = 'https://icon-library.com/images/3-dots-icon/3-dots-icon-9.jpg';

        //Mouvement de la souris
        canvas2.addEventListener('mousedown', handleMouseDown, false);
        canvas2.addEventListener('touchstart', handleMouseDown, false);
        canvas2.addEventListener('mousemove', handleMouseMove, false);
        canvas2.addEventListener('touchmove', handleMouseMove, false);
        canvas2.addEventListener('mouseup', handleMouseUp, false);
        canvas2.addEventListener('touchend', handleMouseUp, false);

        function distanceBetween(point1, point2) {
          return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
        }

        function angleBetween(point1, point2) {
          return Math.atan2(point2.x - point1.x, point2.y - point1.y);
        }


        function getMouse(e, canvas2) {
          var offsetX = 0,
            offsetY = 0,
            mx, my;

          if (canvas2.offsetParent !== undefined) {
            do {
              offsetX += canvas2.offsetLeft;
              offsetY += canvas2.offsetTop;
            } while ((canvas2 = canvas2.offsetParent));
          }

          mx = (e.pageX || e.touches[0].clientX) - offsetX;
          my = (e.pageY || e.touches[0].clientY) - offsetY;

          return {
            x: mx,
            y: my
          };
        }

        function handleMouseDown(e) {
          isDrawing2 = true;
          lastPoint2 = getMouse(e, canvas2);
        }

        function handleMouseMove(e) {
          if (!isDrawing2) {
            return;
          }

          e.preventDefault();

          var currentPoint = getMouse(e, canvas2),
            dist = distanceBetween(lastPoint2, currentPoint),
            angle = angleBetween(lastPoint2, currentPoint),
            x, y;

          for (var i = 0; i < dist; i++) {
            x = lastPoint2.x + (Math.sin(angle) * i) - 25;
            y = lastPoint2.y + (Math.cos(angle) * i) - 25;
            ctx2.globalCompositeOperation = 'destination-out';
            ctx2.drawImage(brush2, x, y);
          }

          lastPoint2 = currentPoint;

        }

        function handleMouseUp(e) {
          isDrawing2 = false;
        }

        
      }



      /* 3e */
      function draw3() {
        // image du dessus  
        image3.onload = function () {
          ctx3.drawImage(image3, 0, 0);
          // Show the scratchText when Image is loaded.
          document.querySelectorAll('.scratchText3')[0].style.visibility = 'visible';
        };
        //image du brush a scratch
        brush3.src = 'https://icon-library.com/images/3-dots-icon/3-dots-icon-9.jpg';

        //Mouvement de la souris
        canvas3.addEventListener('mousedown', handleMouseDown, false);
        canvas3.addEventListener('touchstart', handleMouseDown, false);
        canvas3.addEventListener('mousemove', handleMouseMove, false);
        canvas3.addEventListener('touchmove', handleMouseMove, false);
        canvas3.addEventListener('mouseup', handleMouseUp, false);
        canvas3.addEventListener('touchend', handleMouseUp, false);

        function distanceBetween(point1, point2) {
          return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
        }

        function angleBetween(point1, point2) {
          return Math.atan2(point2.x - point1.x, point2.y - point1.y);
        }


        function getMouse(e, canvas3) {
          var offsetX = 0,
            offsetY = 0,
            mx, my;

          if (canvas3.offsetParent !== undefined) {
            do {
              offsetX += canvas3.offsetLeft;
              offsetY += canvas3.offsetTop;
            } while ((canvas3 = canvas3.offsetParent));
          }

          mx = (e.pageX || e.touches[0].clientX) - offsetX;
          my = (e.pageY || e.touches[0].clientY) - offsetY;

          return {
            x: mx,
            y: my
          };
        }

        function handleMouseDown(e) {
          isDrawing3 = true;
          lastPoint3 = getMouse(e, canvas3);
        }

        function handleMouseMove(e) {
          if (!isDrawing3) {
            return;
          }

          e.preventDefault();

          var currentPoint = getMouse(e, canvas3),
            dist = distanceBetween(lastPoint3, currentPoint),
            angle = angleBetween(lastPoint3, currentPoint),
            x, y;

          for (var i = 0; i < dist; i++) {
            x = lastPoint3.x + (Math.sin(angle) * i) - 25;
            y = lastPoint3.y + (Math.cos(angle) * i) - 25;
            ctx3.globalCompositeOperation = 'destination-out';
            ctx3.drawImage(brush3, x, y);
          }

          lastPoint3 = currentPoint;

        }

        function handleMouseUp(e) {
          isDrawing3 = false;
        }

        
      }


    })();

body {
      padding: 20px 0;
    }

    .container1, .container2, .container3 {
      border: 3px solid yellow;
      position: relative;
      width: 324px;
      height: 289px;
      margin: 0 auto;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
    }

    .canvas1 {
      position: absolute;
      top: 0;
    }

    .canvas2 {
      position: absolute;
      top: 0;
    }

    .canvas3 {
      position: absolute;
      top: 0;
    }

    .scratchText1 {
      padding: 20px;
    }

    .scratchText2 {
      padding: 20px;
    }
    
    .scratchText3 {
      padding: 20px;
    }

<div class="container">

    <div class="container1">
      <div id="js-container1">
        <canvas class="canvas1" id="js-canvas1" width="324" height="289"></canvas>
        <div class="scratchText1" style="visibility: hidden;">
          <h2>'Allo, 'Allo!</h2>
          <h3>The secret code is:</h3>
          <h1><code>HlkafSYc</code></h1>
        </div>
      </div>
    </div>

    <div class="container2">
      <div id="js-container2">
        <canvas class="canvas2" id="js-canvas2" width="324" height="289"></canvas>
        <div class="scratchText2" style="visibility: hidden;">
          <h2>'Allo, 'Allo!</h2>
          <h3>The secret code is:</h3>
          <h1><code>HlkafSYc</code></h1>
        </div>
      </div>
    </div>

    <div class="container3">
      <div id="js-container3">
        <canvas class="canvas3" id="js-canvas3" width="324" height="289"></canvas>
        <div class="scratchText3" style="visibility: hidden;">
          <h2>'Allo, 'Allo!</h2>
          <h3>The secret code is:</h3>
          <h1><code>HlkafSYc</code></h1>
        </div>
      </div>
    </div>
    

  </div>