Question

（英语不是我的母语，希望你对此有所帮助）我遇到了麻烦，当我在其上添加另一个画布时，为什么我的文字无法被拖动。基本上，我想要发生的是我可以拖动我的文字和绘图，当我点击按钮＆＃34; DRAW＆＃34;我将开始画画。

这是我的代码：

＆＃13;

// FUNCTION FOR DRAWING !!!
$(function() {
    $.each(['#f00', '#ff0', '#0f0'], function() {
    
      $('#colors_demo').append("<a href='#colors_sketch' data-color='" + this + "' style='width: 30px;height: 30px;display:inline-block; background: " + this + ";'></a> ");
    });
    $('#colors_sketch').sketch();
    $('#colors_sketch').sketch({defaultColor: "#ff0"});
  });
  
  //FUNCTION FOR DISPLAY TEXT!!!
    function cakeDedicationFree() {
  if (document.getElementById('design3').checked) {
          var canvas2 = document.getElementById("colors_sketch");
              context = canvas2.getContext("2d");

          var $canvas2 = $("#colors_sketch");
          var canvasOffset = $canvas2.offset();
          var offsetX = canvasOffset.left;
          var offsetY = canvasOffset.top;
          var scrollX = $canvas2.scrollLeft();
          var scrollY = $canvas2.scrollTop();
          var startX;
          var startY;
          var texts = []; // an array to hold text objects
          var selectedText = -1;// this var will hold the index of the hit-selected text

        function draw() 
        { // clear the canvas & redraw all texts
          context.clearRect(0, 0, canvas2.width, canvas2.height);
            for (var i = 0; i < texts.length; i++) 
            { 
              var text = texts[i];
              context.fillText(text.text, text.x, text.y);  
            }
          }

        function textHittest(x, y, textIndex) { // test if x,y is inside the bounding box of texts[textIndex]
          var text = texts[textIndex];
            return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
            }

        function handleMouseDown(d) {
           d.preventDefault();
              startX = parseInt(d.clientX - offsetX);
              startY = parseInt(d.clientY - offsetY);
          
            for (var i = 0; i < texts.length; i++) {
              if (textHittest(startX, startY, i)) {
                selectedText = i; }  }
          }

        function handleMouseUp(d) { // done dragging
          d.preventDefault();
            selectedText = -1;  }

        function handleMouseOut(d) { // also done dragging
            d.preventDefault();
            selectedText = -1;  }

        function handleMouseMove(d) {
          if (selectedText < 0) { return; }
          d.preventDefault();
            mouseX = parseInt(d.clientX - offsetX);
            mouseY = parseInt(d.clientY - offsetY);

              var dx = mouseX - startX;
              var dy = mouseY - startY;
              startX = mouseX;
              startY = mouseY;
              var text = texts[selectedText];
              text.x += dx;
              text.y += dy;
              draw();     }
          
          $("#colors_sketch").mousedown(function (d) { handleMouseDown(d); }); // listen for mouse events
          $("#colors_sketch").mousemove(function (d) { handleMouseMove(d); });
          $("#colors_sketch").mouseup(function (d) {   handleMouseUp(d); });
          $("#colors_sketch").mouseout(function (d) {  handleMouseOut(d);  });
          $("#text_dedi").click(function () {
              var y = texts.length * 20 + 20; 
              var text = {  text: $("#dedi_text").val(),
                  x: 20,
              y: y
               };

            context.font = "30px Roboto";
            text.width = context.measureText(text.text).width;
            text.height = 16;
            text.color = "#fff";   
            texts.push(text); // put this new text in the texts array
            draw(); // redraw everything
          });
  document.getElementById('clear').addEventListener('click', function() {
          context.clearRect(0, 0, canvas2.width, canvas2.height);  
          texts = []; },
          false);
        }
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script>

<!-- DRAWING PART --> 
<div id="colors_demo" class="tools">

</div>
<div class="tools">
  <a href="#colors_sketch" data-tool="marker">Marker</a>
  <a href="#colors_sketch" data-tool="eraser">Eraser</a>
</div>

<!-- DISPLAY TEXT PART --> 
<br> <input type="radio" id="design3" name="design_3" onchange="cakeDedicationFree()" />
Text
<input type="text" size="15" id="dedi_text" name="dedicationT" placeholder="Text"> 
<button id="text_dedi"> Post </button>  <input type="button" value="Clear" id="clear" size="23" >
                              
<canvas id="colors_sketch" width="800" height="300"></canvas>

＆＃13;

如你所见，发生了一个大错误.. 在我的系统中最糟糕的部分，它确实没有出现。

希望有人可以帮助我..提前谢谢!!!

HTML5 Canvas无法拖动文字

0 个答案: