Javascript 在画布中拖动文本时出现问题
我目前正在开发一个照片编辑器,我现在可以在图像中添加文本并拖动它,当你拖动文本时,它会准确地显示你移动到的位置 你知道这是什么原因吗?或者有什么办法来修复它?我已经玩了一段时间的代码,现在还不能解决这个问题。先谢谢你!:) HTML:Javascript 在画布中拖动文本时出现问题,javascript,canvas,Javascript,Canvas,我目前正在开发一个照片编辑器,我现在可以在图像中添加文本并拖动它,当你拖动文本时,它会准确地显示你移动到的位置 你知道这是什么原因吗?或者有什么办法来修复它?我已经玩了一段时间的代码,现在还不能解决这个问题。先谢谢你!:) HTML: <input id="theText" type="text"> <button id="submit">Draw text on canvas</button><br> <canvas id="canvas"
<input id="theText" type="text">
<button id="submit">Draw text on canvas</button><br>
<canvas id="canvas" width="300" height="300"></canvas>
<div id="image_div">
<h1> Choose an Image to Upload </h1>
<input type='file' name='img' id='uploadimage' />
</div>
在画布上绘制文本
选择要上载的图像
图像上载脚本:
<script>
//Uploads Image from Input to Cavans :p //
function draw(ev) {
console.log(ev);
var ctx = document.getElementById('canvas').getContext('2d'),
img = new Image(),
f = document.getElementById("uploadimage").files[0],
url = window.URL || window.webkitURL,
src = url.createObjectURL(f);
img.src = src;
img.onload = function() {
ctx.drawImage(img, 0, 0);
url.revokeObjectURL(src);
}
}
document.getElementById("uploadimage").addEventListener("change", draw, false)
</script>
//将图像从输入上传到Cavans:p//
功能图(ev){
控制台日志(ev);
var ctx=document.getElementById('canvas').getContext('2d'),
img=新图像(),
f=document.getElementById(“uploadimage”).files[0],
url=window.url | | window.webkitURL,
src=url.createObjectURL(f);
img.src=src;
img.onload=函数(){
ctx.drawImage(img,0,0);
revokeObjectURL(src);
}
}
document.getElementById(“uploadimage”).addEventListener(“更改”,绘图,错误)
使文本可移动的脚本:
<script>
// 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.rect(0,0, canvas.width, canvas.height);
for (var i = 0; i < texts.length; i++) {
var text = texts[i];
ctx.fillStyle = "blue";
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();
});
</script>
//画布相关变量
var canvas=document.getElementById(“canvas”);
var ctx=canvas.getContext(“2d”);
//用于获取画布上鼠标位置的变量
var$canvas=$(“#canvas”);
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
//保存上次鼠标位置的变量
//用于查看用户拖动鼠标的距离
//然后将文本移动该距离
var-startX;
var startY;
//用于保存文本对象的数组
var文本=[];
//此变量将保存所选文本的索引
var selectedText=-1;
//清除画布并重新绘制所有文本====
函数绘图(){
ctx.rect(0,0,canvas.width,canvas.height);
对于(变量i=0;i=text.x&&x=text.y-text.height&&y)
加载图像后保存图像的引用
在鼠标移动过程中,清除画布并再次使用添加图像
在步骤(1)中保存的引用,然后调用draw()
方法
再说一遍
相关代码段
var drawnImage;
function drawImage(ev) {
console.log(ev);
var ctx = document.getElementById('canvas').getContext('2d'),
img = new Image(),
f = document.getElementById("uploadimage").files[0],
url = window.URL || window.webkitURL,
src = url.createObjectURL(f);
img.src = src;
img.onload = function () {
drawnImage = img;
ctx.drawImage(img, 0, 0);
url.revokeObjectURL(src);
}
}
document.getElementById("uploadimage").addEventListener("change", drawImage, false);
function redraw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(drawnImage,0,0);
draw();
}
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;
redraw();
}
var-drawinimage;
函数图像(ev){
控制台日志(ev);
var ctx=document.getElementById('canvas').getContext('2d'),
img=新图像(),
f=document.getElementById(“uploadimage”).files[0],
url=window.url | | window.webkitURL,
src=url.createObjectURL(f);
img.src=src;
img.onload=函数(){
drawnImage=img;
ctx.drawImage(img,0,0);
revokeObjectURL(src);
}
}
document.getElementById(“uploadimage”).addEventListener(“更改”,drawImage,false);
函数重画(){
clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(drawnImage,0,0);
draw();
}
功能手柄移动(e){
如果(已选择文本<0){
返回;
}
e、 预防默认值();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
//把你的mousemove放在这里
var dx=mouseX-startX;
var dy=鼠-星;
startX=mouseX;
斯塔蒂=老鼠;
变量文本=文本[selectedText];
text.x+=dx;
text.y+=dy;
重画();
}
示例小提琴-(图像上传不起作用)
加载图像后保存图像的引用
在鼠标移动过程中,清除画布并再次使用添加图像
在步骤(1)中保存的引用,然后调用draw()
方法
再说一遍
相关代码段
var drawnImage;
function drawImage(ev) {
console.log(ev);
var ctx = document.getElementById('canvas').getContext('2d'),
img = new Image(),
f = document.getElementById("uploadimage").files[0],
url = window.URL || window.webkitURL,
src = url.createObjectURL(f);
img.src = src;
img.onload = function () {
drawnImage = img;
ctx.drawImage(img, 0, 0);
url.revokeObjectURL(src);
}
}
document.getElementById("uploadimage").addEventListener("change", drawImage, false);
function redraw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(drawnImage,0,0);
draw();
}
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;
redraw();
}
var-drawinimage;
函数图像(ev){
控制台日志(ev);
var ctx=document.getElementById('canvas').getContext('2d'),
img=新图像(),
f=document.getElementById(“uploadimage”).files[0],
url=window.url | | window.webkitURL,
src=url.createObjectURL(f);
img.src=src;
img.onload=函数(){
drawnImage=img;
ctx.drawImage(img,0,0);
revokeObjectURL(src);
}
}
document.getElementById(“uploadimage”).addEventListener(“更改”,drawImage,false);
函数重画(){
clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(drawnImage,0,0);
draw();
}
功能手柄移动(e){
如果(已选择文本<0){
返回;
}
e、 预防默认值();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
//把你的mousemove放在这里
var dx=mouseX-startX;
var dy=鼠-星;
startX=mouseX;
斯塔蒂=老鼠;
变量文本=文本[selectedText];
text.x+=dx;
text.y+=dy;
重画();
}
示例小提琴-(图像上传不起作用)所以这不太管用,这就是为什么我没有使用ctx.clearRect,而是使用了ctx.rect,因为当你在画布中移动文本时,它会隐藏图像。哦..我没有上传图像就尝试了..让我检查一下是否有其他方法我一直在尝试解决它,但没有任何线索。我已经研究了使文本在ca中可以移动的方法nvas,看看我是否能找到另一种方法来解决这个问题,但运气不好。请检查更新的答案。但是,如果你想在画布中做太多的元素级更改,你最好使用一些库,如fabric.js。它起作用了!谢谢!我会研究fabric.js,所以这不太有效,这就是我没有ctx.clearRec的原因t,取而代之的是ctx.rect,因为当你在画布中移动文本时,它会隐藏图像。哦..我没有上传图像就尝试了..让我检查一下是否有其他方法我一直在尝试解决它,但已经解决了