Canvas에서 텍스트를 드래그 할 때 발생하는 문제

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> 

// 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. 저장 이미지의 참조 후 : 텍스트가 가능 이동하게

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

   스크립트 그것은로드됩니다.

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/ (이미지 업로드가 작동하지 않습니다)