Question

我正在尝试创建一个模块，其中将图像拖放到HTML5画布中时，将其绘制在现有图像之上，无论我选择将其拖放到什么位置，都将其绘制在现有图像之上。图像是在画布中绘制的，但不是在我放下的位置绘制的。对齐不正确。

我尝试使用Offset来完成它，但无济于事。

HTML：

#myCanvas {
  width: 500px;
  height: 300px;
}
#drag1 {
  width: 100px;
  height: 60px;
  display: inline-block;
}
#options, #frame {
  display: inline-block;
}
#imgToBeDragged {
  max-width: 100px;
  max-height: 100px; 
}

<html> 
  
  <script src="http://www.google.com/jsapi" type="text/javascript">
  </script>
  <script type="text/javascript">
     google.load("jquery", "1.3.2");
     google.load("jqueryui", "1.7.3");
  </script>

  <script type="text/javascript">
  $(document).ready(function () {
      var canvas = document.getElementById("myCanvas"),
      ctx = canvas.getContext("2d");

      // canvas.width = 934;
      // canvas.height = 500;

      var background = new Image();
      console.log(background);
      background.src = "https://cdn.letsmd.com/hospital/large/40e8ba7974731a43f0f42c57707b3c78.jpg";
      background.style.maxWidth = '500px';
      background.style.maxHeight = '300px';

      background.onload = function(){
          ctx.drawImage(background,0,0);
      }

      //Counter
      counter = 0;
      //Make element draggable
      $(".drag").draggable({
          helper: 'clone',
          containment: 'frame',
          //When first dragged
          stop: function (ev, ui) {
              var pos = $(ui.helper).offset();
              objName = "#clonediv" + counter
              $(objName).css({
                  "left": pos.left,
                  "top": pos.top
              });
              $(objName).removeClass("drag");
              //When an existiung object is dragged
              $(objName).draggable({
                  containment: 'parent',
                  stop: function (ev, ui) {
                      var pos = $(ui.helper).offset();
                      console.log($(this).attr("id"));
                      console.log(pos.left)
                      console.log(pos.top)
                  }
              });
          }
      });
      //Make element droppable
      $("#frame").droppable({
          drop: function (ev, ui) {
              // alert(1);
              if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
                  // alert(2);
                  // counter++;
                  // var element = $(ui.draggable).clone();
                  // element.addClass("tempclass");
                  // $(this).append(element);
                  // $(".tempclass").attr("id", "clonediv" + counter);
                  // $("#clonediv" + counter).removeClass("tempclass");
                  // //Get the dynamically item id
                  // draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
                  // itemDragged = "dragged" + RegExp.$1
                  // console.log(itemDragged)
                  // $("#clonediv" + counter).addClass(itemDragged);
                  drawImg(ev,ui);
              }
          }
      });
  });

  function drawImg(ev,ui){
          // console.log('hi',ev);
          // console.log('hello',$(ui.draggable).clone());
          // console.log(this);
          var x = document.getElementById('myCanvas');
          var canvax = x.getContext('2d');
          var imgObj = new Image();
          // console.log(ev.srcElement.currentSrc);
          imgObj.src = ev.srcElement.currentSrc;

          // console.log('qwerty',x.getBoundingClientRect());

          var imgW = ev.currentTarget.images[0].width;
          var imgH = ev.currentTarget.images[0].height;
          var canvasTop = $('#myCanvas').position().top;
          var canvasLeft = $('#myCanvas').position().left;
          var imgTop = ev.pageY - canvasTop;
          var imgLeft = ev.pageX - canvasLeft;

          imgObj.onload = function() {
              // console.log(canvax);
              // console.log(imgObj);
              // console.log($('#myCanvas').position().top);
              // console.log($('#myCanvas').position().left);
              canvax.drawImage(imgObj, imgLeft, imgTop, imgW, imgH);
          };


  }
  </script>
  <body>
    <div id="wrapper">
        <div id="options">
            <div id="drag1" class="drag">
              <img id="imgToBeDragged" src="https://www.w3schools.com/css/trolltunga.jpg">
            </div>
            <br>
            <button value="Refresh Page" onClick="window.location.reload();">Reset</button>
        </div>
        <div id="frame">
                <canvas id='myCanvas'>
                </canvas>
        </div>
    </div>
  </body>
</html>

无法在HTML5画布中正确绘制图像

0 个答案: