html长文本拖动,如何在HTML5画布上拖动一段用户生成的文本？

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

首先创建文本对象指

// some text objects

var texts=[];

// some test texts

texts.push({text:"Hello",x:20,y:20});

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

在鼠标按下

迭代THROU gh每个文本对象，看看鼠标是否在里面。

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

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

}

在鼠标移动

更改所选择的文本的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();

}

在鼠标松开

拖拽结束：

// done dragging

function handleMouseUp(e){

e.preventDefault();

selectedText=-1;

}

注释的代码：

body{ background-color: ivory; }

#canvas{border:1px solid red;}

#theText{width:10em;}

$(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

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

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

Draw text on canvas