admin管理员组

文章数量:1415673

After unsucessfull thread I'm asking for help again. How do I let the user add some text on the canvas by dragging text to their desired position? Let's say, they enter the text somewhere somehow, it appears on a canvas and then user can drag that text to desired position. Which technique I should use? Is there any way for someone to write a quick code?

After unsucessfull thread I'm asking for help again. How do I let the user add some text on the canvas by dragging text to their desired position? Let's say, they enter the text somewhere somehow, it appears on a canvas and then user can drag that text to desired position. Which technique I should use? Is there any way for someone to write a quick code?

  • javascript
  • html
  • canvas
Share Improve this question asked Jan 28, 2014 at 16:40 user3241081user3241081 111 silver badge3 bronze badges 6
  • 2 possible duplicate of “How do I let the user add some text on the canvas by dragging text to their desired position?” – Álvaro González Commented Jan 28, 2014 at 16:45
  • Man you asked the same question as Alvaro pointed out. – Suman Bogati Commented Jan 28, 2014 at 16:46
  • simonsarris./blog/140-canvas-moving-selectable-shapes – user669677 Commented Jan 28, 2014 at 16:46
  • that was my question. as i said, "AFTER UNSUCESSFULL THREAD", becouse it was named incorrectly(it's eddited now) and put on hold, so i can't get answers there. – user3241081 Commented Jan 28, 2014 at 16:49
  • @user3241081 Your other question was put on hold as too broad. If you disagree, you should vote to reopen it or, if you don't have enough reputation, ask it in chat or meta. But please avoid deleting your closed questions and posting a new duplicate. – Oriol Commented Jan 28, 2014 at 17:16
 |  Show 1 more ment

1 Answer 1

Reset to default 6

Here's an outline of how to drag text on html canvas:

  • Create a text object that holds info about this word (text, x,y,width,height).
  • Create an array to hold all text objects
  • On mousedown, hit-test each text object in the array to see if the user mousedown'ed on a text
  • On mousemove, move the selected text by the distance that the user dragged the mouse

Demo: http://jsfiddle/m1erickson/tLvMK/

Here's mented Code: 

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery./jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // variables used to get mouse position on the canvas
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    // variables to save last mouse position
    // used to see how far the user dragged the mouse
    // and then move the text by that distance
    var startX;
    var startY;

    // some text objects
    var texts=[];

    // some test texts
    texts.push({text:"Hello",x:20,y:20});
    texts.push({text:"World",x:20,y:70});

    // calculate width of each text for hit-testing purposes
    ctx.font="16px verdana";
    for(var i=0;i<texts.length;i++){
        var text=texts[i];
        text.width=ctx.measureText(text.text).width;
        text.height=16;
    }

    // this var will hold the index of the selected text
    var selectedText=-1;

    // START: draw all texts to the canvas
    draw();

    // clear the canvas draw all texts
    function draw(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(var i=0;i<texts.length;i++){
            var text=texts[i];
            ctx.fillText(text.text,text.x,text.y);
        }
    }

    // test if x,y is inside the bounding box of texts[textIndex]
    function textHittest(x,y,textIndex){
        var text=texts[textIndex];
        return(x>=text.x && 
            x<=text.x+text.width &&
            y>=text.y-text.height && 
            y<=text.y);
    }

    // handle mousedown events
    // iterate through texts[] and see if the user
    // mousedown'ed on one of them
    // If yes, set the selectedText to the index of that text
    function handleMouseDown(e){
      e.preventDefault();
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      for(var i=0;i<texts.length;i++){
          if(textHittest(startX,startY,i)){
              selectedText=i;
          }
      }
    }

    // done dragging
    function handleMouseUp(e){
      e.preventDefault();
      selectedText=-1;
    }

    // also done dragging
    function handleMouseOut(e){
      e.preventDefault();
      selectedText=-1;
    }

    // handle mousemove events
    // calc how far the mouse has been dragged since
    // the last mousemove event and move the selected text
    // by that distance
    function handleMouseMove(e){
      if(selectedText<0){return;}
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      var dx=mouseX-startX;
      var dy=mouseY-startY;
      startX=mouseX;
      startY=mouseY;

      var text=texts[selectedText];
      text.x+=dx;
      text.y+=dy;
      draw();
    }

    // listen for mouse events
    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

本文标签： javascript“Text on the canvas movable by dragging text to their desired position”Stack Overflow

版权声明：本文标题：javascript - “Text on the canvas movable by dragging text to their desired position?” - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745229627a2648765.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。