javascript - “Text on the canvas movable by dragging text to their desired position?”

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?

Share Improve this question asked Jan 28, 2014 at 16:40 user3241081 111 silver badge3 bronze badges

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

Sorted by: 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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745229628a4617619.html

javascript - “Text on the canvas movable by dragging text to their desired position?” - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - “Text on the canvas movable by dragging text to their desired position?” - Stack Overflow

1 Answer 1

相关推荐