HTML5 responsive Leinwand Mausposition und Größe ändern

Question

Ich habe eine Zeichnungsschnittstelle, die die Zeichnungen bei 1280x720px gespeichert werden müssen. Ich möchte jedoch, dass die Zeichenfläche in Bezug auf dieses Seitenverhältnis skalierbar sein kann. Ein Problem ist, dass wenn ich zeichne, der Anfang des Pfades nicht auf dem Cursor ist.

Ich habe überall gesucht und kann keine Lösung finden. Hier ist die javascript:

var clearButton = document.getElementById('doodle-bin'); 
 
var canvascontainer = document.getElementById('doodle-canvas-container'); 
 
var canvas = document.getElementById('doodle-canvas'); 
 
var context = canvas.getContext('2d'); 
 
var radius = (document.getElementById('doodle-canvas-container').clientWidth + document.getElementById('doodle-canvas-container').clientHeight)/150; 
 
var dragging = false; 
 

 
context.mozImageSmoothingEnabled = false; 
 
context.imageSmoothingEnabled = false; 
 

 
canvas.width = 1280; 
 
canvas.height = 720; 
 
canvas.style.width = '100%'; 
 
canvas.style.height = '100%'; 
 

 
/* CLEAR CANVAS */ 
 
function clearCanvas() { 
 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 
} 
 

 
clearButton.addEventListener('click', clearCanvas); 
 

 
var putPoint = function (e) { 
 
    if (dragging) { 
 
     context.lineTo(e.offsetX, e.offsetY); 
 
     context.lineWidth = radius * 2; 
 
     context.stroke(); 
 
     context.beginPath(); 
 
     context.arc(e.offsetX, e.offsetY, radius, 0, Math.PI * 2); 
 
     context.fill(); 
 
     context.beginPath(); 
 
     context.moveTo(e.offsetX, e.offsetY); 
 
    } 
 
}; 
 

 
var engage = function (e) { 
 
    dragging = true; 
 
    putPoint(e); 
 
}; 
 

 
var disengage = function() { 
 
    dragging = false; 
 
    context.beginPath(); 
 
}; 
 

 
canvas.addEventListener('mousedown', engage); 
 
canvas.addEventListener('mousemove', putPoint); 
 
canvas.addEventListener('mouseup', disengage); 
 
document.addEventListener('mouseup', disengage); 
 
canvas.addEventListener('contextmenu', disengage);

Answer 1

Verwenden Sie die folgende Funktion, um die richtige Mausposition zu erhalten, auch wenn die Leinwand skalierten wieder wird. Dies wird das Startproblem beheben.

function getMouesPosition(e) { 
    var mouseX = e.offsetX * canvas.width/canvas.clientWidth | 0; 
    var mouseY = e.offsetY * canvas.height/canvas.clientHeight | 0; 
    return {x: mouseX, y: mouseY}; 
} 

---

var clearButton = document.getElementById('doodle-bin'); 
 
var canvascontainer = document.getElementById('doodle-canvas-container'); 
 
var canvas = document.getElementById('doodle-canvas'); 
 
var context = canvas.getContext('2d'); 
 
var radius = (document.getElementById('doodle-canvas-container').clientWidth + document.getElementById('doodle-canvas-container').clientHeight)/150; 
 
var dragging = false; 
 
context.mozImageSmoothingEnabled = false; 
 
context.imageSmoothingEnabled = false; 
 

 
canvas.width = 1280; 
 
canvas.height = 720; 
 
canvas.style.width = '100%'; 
 
canvas.style.height = '100%'; 
 

 
/* CLEAR CANVAS */ 
 
function clearCanvas() { 
 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 
} 
 

 
clearButton.addEventListener('click', clearCanvas); 
 

 
function getMouesPosition(e) { 
 
    var mouseX = e.offsetX * canvas.width/canvas.clientWidth | 0; 
 
    var mouseY = e.offsetY * canvas.height/canvas.clientHeight | 0; 
 
    return {x: mouseX, y: mouseY}; 
 
} 
 

 
var putPoint = function (e) { 
 
    if (dragging) { 
 
     context.lineTo(getMouesPosition(e).x, getMouesPosition(e).y); 
 
     context.lineWidth = radius * 2; 
 
     context.stroke(); 
 
     context.beginPath(); 
 
     context.arc(getMouesPosition(e).x, getMouesPosition(e).y, radius, 0, Math.PI * 2); 
 
     context.fill(); 
 
     context.beginPath(); 
 
     context.moveTo(getMouesPosition(e).x, getMouesPosition(e).y); 
 
    } 
 
}; 
 

 
var engage = function (e) { 
 
    dragging = true; 
 
    putPoint(e); 
 
}; 
 
var disengage = function() { 
 
    dragging = false; 
 
    context.beginPath(); 
 
}; 
 

 
canvas.addEventListener('mousedown', engage); 
 
canvas.addEventListener('mousemove', putPoint); 
 
canvas.addEventListener('mouseup', disengage); 
 
document.addEventListener('mouseup', disengage); 
 
canvas.addEventListener('contextmenu', disengage);

body{margin:0;overflow:hidden}canvas{border:1px solid #ccc}

<button id="doodle-bin">Clear</button> 
 
<div id="doodle-canvas-container"> 
 
    <canvas id="doodle-canvas"></canvas> 
 
</div>