javascript - 在 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>
//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. 在鼠标移动期间，清除 Canvas 并使用以下命令再次添加图像步骤 (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();
}

fiddle 样本 - https://jsfiddle.net/rbkdLbcm/1/ (图片上传不起作用)