キャンバスでテキストをドラッグしたときの問題

Question

現在、写真エディタで作業していますが、イメージにテキストを追加してドラッグすることができます。テキストをドラッグすると正確に表示されますどこに移動したのですかWhat It looks like when you move the text around

何が原因なのか？またはそれを固定する方法は？私はしばらくの間、コードを試してきましたが、この問題を修正することはできませんでした。前もって感謝します！ :)

HTML：

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

スクリプトテキストがエイブルに移動します：

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

Answer 1

1. 保存後の画像の参照ロードされます。
2. マウスの移動中に、ステップ（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(); 
} 

サンプルフィドルスニペット - https://jsfiddle.net/rbkdLbcm/1/（画像のアップロードが動作しません）