Question

基本上我编码的是能够在文本框中键入单词。当按下按钮提交时，该词会被发布到HTML5画布，以便人们可以看到它。我现在要做的是能够在HTML5画布上拖动该单词。我有点难以实现这一目标，并且想知道是否有人可以帮我解决这个问题？这是我的代码到目前为止我所做的：

var fname;
var canvas;
var ctx;
var canvasX;
var canvasY;
var mouseIsDown;

function addTitle2() {

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

    canvas.addEventListener("mousedown", mouseDown, false);
    canvas.addEventListener("mousemove", mouseXY, false);
    document.body.addEventListener("mouseup", mouseUp, false);

    var fname = document.forms[0].fname.value;

    ctx.fillStyle = "black";
    ctx.strokeStyle = "black";
    ctx.font = "35px Arial";
    ctx.fillText(fname, Math.random() * 500, Math.random() * 400);
    ctx.stroke();

}

function mouseUp() {

    mouseIsDown = 0;
    mouseXY();

}

function mouseDown() {

    mouseIsDown = 1;
    mouseXY();

}

function mouseXY(e) {

    e.preventDefault();

    canvasX = e.pageX - canvas.offsetLeft;
    canvasY = e.pageY - canvas.offsetTop;

    ShowPos();

}

function ShowPos() {

    if(mouseIsDown) {

        ctx.fillText(fname, canvasX, canvasY);

    }

}

Answer 1

拖动文字主要是响应鼠标事件。

演示：http://jsfiddle.net/m1erickson/9xAGa/

enter image description here

首先创建文本对象以引用

// some text objects
var texts=[];

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

在mousedown中

遍历每个文本对象，看看鼠标是否在里面。

// 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;
      }
  }
}

// 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);
}

在mousemove中

将所选文本的x，y更改为拖动鼠标的距离：

    // 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();
    }

在mouseup中

阻力已经结束：

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

带注释的代码：

<!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.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
    #theText{width:10em;}
</style>
<script>
$(function(){

    // canvas related variables
    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;

    // an array to hold text objects
    var texts=[];

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

    // clear the canvas & redraw 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);});

    $("#submit").click(function(){

        // calc the y coordinate for this text on the canvas
        var y=texts.length*20+20;

        // get the text from the input element
        var text={text:$("#theText").val(),x:20,y:y};

        // calc the size of this text for hit-testing purposes
        ctx.font="16px verdana";
        text.width=ctx.measureText(text.text).width;
        text.height=16;

        // put this new text in the texts array
        texts.push(text);

        // redraw everything
        draw();

    });


}); // end $(function(){});
</script>
</head>
<body>
    <input id="theText" type="text">
    <button id="submit">Draw text on canvas</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

在div上创建一个透明的canvas，并将其定位为仅覆盖您填充文字的区域。制作此div draggable。在div位置上，根据div的新位置，在画布上清除画布和重绘文本。

Answer 3

你应该在鼠标停止时重复所有fillText内容，并在每次绘制前清除屏幕

function drawText() {
    ctx.clearRect(0, 0, 500, 400);
    ctx.fillStyle = "black";
    ctx.strokeStyle = "black";
    ctx.font = "35px Arial";
    ctx.fillText(fname, canvasX, canvasY);
    ctx.stroke();
}

这是jsfiddle

Answer 4

好的，所以我只想指出 markE

在以下 jsfiddle 解决方案中的一个问题

Dragging text is largely responding to mouse events

问题是，如果您的页面不适合窗口并且可以滚动，如果您已经滚动页面并且现在正在拖动文本，它将不起作用，因为鼠标事件将返回无法计算的 clientY保存的坐标。

通过给定高度再现

<canvas id="canvas" width=300 height=3000></canvas>

滚动后拖动文本。

如何在HTML5画布周围拖动一段用户生成的文本？

4 个答案: