实际上我试图拖放在javascript中创建的画布文本。但我无法正确拖动它,因为选择文本无法正常工作。我将代码保存在下面的代码段中。
请帮我解决这个问题。提前谢谢。
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);
ctx.drawImage(window.imageSrc, 0, 0, canvas.width, canvas.height);
for (var i = 0; i < texts.length; i++) {
var text = texts[i];
ctx.strokeText(text.text, text.x, text.y);
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
//alert(texts.length);
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);
});
$("[id^='memeText']").change(function () {
// calc the y coordinate for this text on the canvas
var y = texts.length * 20 + 100;
var position = $(this).attr('name');
position = position - 1;
// get the text from the input element
var text = {
text: $(this).val(),
x: 250,
y: y
};
// calc the size of this text for hit-testing purposes
ctx.font = "32px verdana";
ctx.textAlign = 'center';
ctx.lineWidth = 3;
ctx.fillStyle = "#fff";
ctx.strokeStyle = "#000";
text.width = ctx.measureText(text.text).width;
text.height = 16;
if(texts[position]==""||texts[position]==null||texts[position]==undefined){
texts.push(text);
} else {
console.log(texts[position].text);
texts[position].text = $(this).val();
}
// put this new text in the texts array
// redraw everything
draw();
});
function handleFileSelect(evt) {
//var canvasWidth = 500;
// var canvasHeight = 500;
var file = evt.target.files[0];
var reader = new FileReader();
reader.onload = function(fileObject) {
var data = fileObject.target.result;
var image = new Image();
image.onload = function() {
window.imageSrc = this;
ctx.drawImage(window.imageSrc, 0, 0, canvas.width, canvas.height);
};
document.getElementById('box2').style.display = "block";
image.src = data;
// console.log(fileObject.target.result);
};
reader.readAsDataURL(file);
}
document.getElementById('file').addEventListener('change',
handleFileSelect, false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" style="">
<input id="file" type="file" autocomplete="off">
<br><br>
</div>
<div id="box2" style="display: none;">
<input id="memeText" name="1" autocomplete="off">
<br><br>
<input id="memeText" name="2" autocomplete="off">
<br><br>
<canvas id="canvas" width="500" height="500"></canvas>
<br><br>
<a class="buttonLink" id="downloadLink">Download Meme!</a>
<br><br>
<a href="">Make Another Meme!</a>
</div>
答案 0 :(得分:1)
这有几个问题。
首先,看看如何Get the coordinates of a mouse click on Canvas。目前,您的偏移均为0.尝试拨打canvas.offsetLeft
和canvas.offsetTop
- 注意:canvas
,不是$canvas
。
其次,文本位置设置为文本的中间位置,而不是左上角或左下角。所以在你的textHittest
函数中,你需要这个return语句:
return (x >= (text.x - 0.5*text.width) && x <= (text.x + 0.5*text.width) && y >= (text.y - 0.5*text.height) && y <= (text.y + 0.5*text.height));
有关文字属性的更多信息here。
一旦对其进行排序,请仔细检查事件是否按照您的要求进行了完全注册。希望这足以让你开始:)