HTML5画布 - 在画布上拖动文本问题

Question

I want to Drag Text which is located on the Canvas , I found a tutorial How to Drag a Rectange but i could not implement it on text , This is the Following code for moving the rectangle , can some one help me to implement it on Text ? 我想拖动位于Canvas上的文本，我找到了一个教程如何拖动一个Rectange但我无法在文本上实现它，这是下面移动矩形的代码，可以帮助我在Text上实现它？

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Drag and Drop Test</title>
</head>
<body>
<section>

<div>
<canvas id="canvas" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>

<script type="text/javascript">

var canvas;
var ctx;
var x = 75;
var y = 50;
var dx = 5;
var dy = 3;
var WIDTH = 400;
var HEIGHT = 300;
var dragok = false;

function rect(x,y,w,h) {
 ctx.beginPath();
 ctx.rect(x,y,w,h);
 ctx.closePath();
 ctx.fill();
}

function clear() {
 ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
 canvas = document.getElementById("canvas");
 ctx = canvas.getContext("2d");
 return setInterval(draw, 10);
}

function draw() {
 clear();
 ctx.fillStyle = "#FAF7F8";
 rect(0,0,WIDTH,HEIGHT);
 ctx.fillStyle = "#444444";
 rect(x - 15, y - 15, 30, 30);
}

function myMove(e){
 if (dragok){
  x = e.pageX - canvas.offsetLeft;
  y = e.pageY - canvas.offsetTop;
 }
}

function myDown(e){
 if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
 canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
 e.pageY > y -15 + canvas.offsetTop){
  x = e.pageX - canvas.offsetLeft;
  y = e.pageY - canvas.offsetTop;
  dragok = true;
  canvas.onmousemove = myMove;
 }
}

function myUp(){
 dragok = false;
 canvas.onmousemove = null;
}

init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;

</script>

</section>
</body>
</html>

Test 测试

And also when i add this Code in the HEAD tag it does not work. 而且当我在HEAD标签中添加此代码时，它不起作用。 Why is it so ? 为什么会这样？

Answer 1

Basic example http://jsfiddle.net/h3BCq/1/ 基本示例http://jsfiddle.net/h3BCq/1/

Prettied up one (kept rect function, added new text function, draws the bounding box for the text) http://jsfiddle.net/h3BCq/2/ 装饰一个（保持rect函数，添加新的文本函数，绘制文本的边界框） http://jsfiddle.net/h3BCq/2/

I definitely cheated. 我绝对骗了。 I used px for the font size to easier grab its width. 我使用px的字体大小更容易抓住它的宽度。 You could use em's, or points though you would just need to do a conversion to pixels to get an estimated width. 您可以使用em或点，但您只需要转换为像素即可获得估计的宽度。 I Basically just removed rect, and added filltext, and modified the check to check for the text width. 我基本上只删除了rect，并添加了filltext，并修改了检查以检查文本宽度。

HTML5画布 - 在画布上拖动文本问题

问题描述

1 个解决方案

解决方案1
8 2011-02-16 14:43:43

HTML5画布 - 在画布上拖动文本问题

问题描述

1 个解决方案

解决方案1 8 2011-02-16 14:43:43

解决方案1
8 2011-02-16 14:43:43