上縮小圖像的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?