上缩小图像的HTML画布拖动文本

Question

心中已经遇到了一个小问题，而试图创建一个易于使用的图像编辑器，在那里你可以在图像上添加多个文本拖动，然后保存与文本编辑的图像原始分辨率。

其他一切工作正常，但我希望能够在非全高清分辨率的画布（如800x600px）

我不能像在1920×1080或更大的使用分辨率编辑全高清影像，更大帆布，因为这将是巨大的，去浏览器（滚动条）的边界出来，也不会是真的那么容易管理。

我想在画布上用百分比值，它看起来不错，但文字击中格拖动鼠标时不会跟随光标。

任何提示或技巧来处理这个问题？

这里是一个示例它的外观与1920×1080帆布&全高清图像。 我想将图像和功能适合的..可以说800x600的画布，但保存的输出作为原全高清。

<canvas id="canvas" width=1920 height=1080></canvas> 

function draw() { 
    //ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.drawImage(imageObj, 0, 0, 1920, 1080); 
    for (var i = 0; i < texts.length; i++) { 
    var text = texts[i]; 
    ctx.fillText(text.text, text.x, text.y); 
    } 
} 

https://jsfiddle.net/n0mn7bcg/

// 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(); 
 

 
var imageObj = new Image(); 
 
imageObj.src = 'https://4.bp.blogspot.com/-lQwIDyafEbI/UxNch2499rI/AAAAAAAAogo/FfZxYSCIXxc/s0/Ships+in+from+the+bottle_2_HD.jpg'; 
 

 
// 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(imageObj, 0, 0, 1920, 1080); 
 
    for (var i = 0; i < texts.length; i++) { 
 
    var text = texts[i]; 
 
    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 = "80px consolas"; 
 
    text.width = ctx.measureText(text.text).width; 
 
    text.height = 80; 
 

 
    // put this new text in the texts array 
 
    texts.push(text); 
 

 
    // redraw everything 
 
    draw(); 
 

 
});

body { 
 
    background: #f3f3f3; 
 
} 
 

 
#canvas { 
 
    border: 1px solid red; 
 
} 
 

 
#theText { 
 
    width: 10em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h4>Add text to canvas and drag it</h4> 
 
<input id="theText" type="text"> 
 
<button id="submit">Draw text on canvas</button> 
 
<br> 
 
<canvas id="canvas" width=1920 height=1080></canvas>

Answer 1

如果您在鼠标按下鼠标移动和事件处理程序使用e.pageX它的工作原理：

https://jsfiddle.net/n0mn7bcg/2/

function handleMouseDown(e) { 
    e.preventDefault(); 
    startX = parseInt(e.pageX - offsetX); 
    startY = parseInt(e.pageY - offsetY); 
    // Put your mousedown stuff here 
    for (var i = 0; i < texts.length; i++) { 
    if (textHittest(startX, startY, i)) { 
     selectedText = i; 
    } 
    } 
} 

function handleMouseMove(e) { 
    if (selectedText < 0) { 
    return; 
    } 
    e.preventDefault(); 
    mouseX = parseInt(e.pageX - offsetX); 
    mouseY = parseInt(e.pageY - 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(); 
} 

的更多信息：What is the difference between screenX/Y, clientX/Y and pageX/Y?