Wie mache ich das Rechteck, das ich zeichne (mit der Maus) genau so, wie meine Maus es anzeigt?

Question

Hier ist die Geige: http://jsfiddle.net/awguo/0fep62wr/4/

In diesem Fall werde ich ein Bild hochladen und dann eine Leinwand genau darüber zeichnen.

Dann ziehe ich einen 'Bereich' (Aufnahme der Mauspositionen) und zeichne dann ein Rechteck in der Leinwand, um den Mausbereich darzustellen, den ich zeichne.

Alles funktioniert gut, außer das Rechteck ist immer nicht genau auf den Bereich, den ich zeichne.

Gibt es irgendetwas, das ich falsch im Code gemacht habe?

Danke!

-Code unten:

// get position 
function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
    x: (evt.clientX - rect.left), 
    y: (evt.clientY - rect.top) 
    }; 
} 

function readURL(input) { 
    if (input.files && input.files[0]) { 
    var reader = new FileReader(); 

    reader.onload = function (e) { 
     $('#blah').attr('src', e.target.result); 
     $('#base64_output').val(e.target.result); 
      var $cc = $('<canvas style="cursor:crosshair;width:100%;height:100%;position:absolute;top:0;left:0">'); 
     var cc = $cc[0]; 
     cc.addEventListener('mousedown', function(e) { 
     window.mousePos1 = getMousePos(cc, e); 

     }, false); 
     cc.addEventListener('mouseup', function(e){ 
     window.mousePos2 = getMousePos(cc, e); 
     var p1x = window.mousePos1.x; 
     var p1y = window.mousePos1.y; 
     var p2x = window.mousePos2.x; 
     var p2y = window.mousePos2.y; 
     if (p1x > p2x) { 
      var tempx = p2x; 
      p2x = p1x; 
      p1x = tempx; 
     } 
     if (p1y > p2y) { 
      var tempy = p2y; 
      p2y = p1y; 
      p1y = tempy; 
     } 
     var message = "area:" + p1x +',' + p1y + ',' + p2x + ',' + p2y; 
     $('#data_output').val(message); 

     // draw a preview rectangle: 
     var w = p2x-p1x;var h = p2y-p1y; 
     var ctx=cc.getContext("2d"); 
     ctx.rect(p1x,p1y,w,h); 
     ctx.stroke(); 

     }, false); 
     $('#wrapper').append($cc); 
    } 

    reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imgInp").change(function(){ 
    readURL(this); 
}); 

Answer 1

Das Problem hat mit der Verwendung von Prozent Skalierung der Leinwand zu tun. Ich sage nicht, dass Sie es nicht tun können, aber Sie müssen erkennen, dass es zu Komplikationen führt, z. B. dass Sie die Bildgröße manuell anpassen oder die Breiten- und Höhenverhältnisse oder eine andere Strategie verfolgen müssen. This SO Q & A diskutiert das Problem, und es gibt viele andere, on und off Stack Overflow.

Wenn ich mich recht erinnere, musste ich sicherstellen, dass der Canvas-Skalierungsfaktor in einigen Fällen nicht automatisch gesetzt wurde.