Zeichnung in Leinwand mit Maus in Chrom

Question

Ich versuche, eine Leinwand mit der Maus zu zeichnen. Meine Anwendung funktioniert gut in Firefox, aber ich kann nicht erreichen, dass es in Chrom funktioniert. Mein Code ist wie folgt:

function getMousePos(canvas, evt) { 
     var rect = canvas.getBoundingClientRect(); 

     scaleX = canvas.width/rect.width, /*relationship bitmap vs. element for X*/ 
     scaleY = canvas.height/rect.height; /*relationship bitmap vs. element for Y*/ 
     return { 
      x: Math.round((evt.clientX - rect.left)*scaleX), 
      y: Math.round((evt.clientY - rect.top)*scaleY) 
     }; 

     } 

In dem obigen Code ich die Mauskoordinaten erhalten, für eine Leinwand in einem div enthalten namens „Lienzo“. Die CSS für die Leinwand und die lienzo ist wie folgt:

canvas { 
    image-rendering: -moz-crisp-edges; /* Firefox */ 
    image-rendering: pixelated;   /* Chrome */ 
    position:absolute; 
    width:100%; 
    height:auto; 
    background:white; 
    box-shadow: 0 0 10px black; 
} 

#lienzo { 
    position:relative; 
    margin-left:1em; 
    width:80%; 
} 

Ich habe nach einer Lösung zu suchen versucht, aber ich kann nicht, weil ich verstehe nicht wirklich, was falsch ist.

Der Code, den ich benutze, um mit der Maus zu malen, besteht in einem Array, wo ich die Koordinaten verschiebe und wenn ich die Maus loslasse, druckt es alle Koordinaten, die im Array enthalten sind. Hier ist ein Fragment des Codes:

this.mostrarForma= function(){ 
      for(var i=0; i < lista_de_puntos.length; i++) 
        {     
       ctx.strokeStyle=color; 
       ctx.lineJoin=tipo; 
       ctx.lineWidth=grosor; 
       ctx.beginPath(); 
       //If i am at the begining of the array 
          if(lista_de_puntos[i][2] && i){ 
        //Entramos aqui si pulsamos y arrastramos 
             ctx.moveTo(lista_de_puntos[i-1][0], lista_de_puntos[i-1][1]); 
           }else{ 
        //If I press and I release the button 
             ctx.moveTo(lista_de_puntos[i][0], lista_de_puntos[i][1]); 
           } 
           ctx.lineTo(lista_de_puntos[i][0], lista_de_puntos[i][1]); 
           ctx.closePath(); 
           ctx.stroke(); 
        } 
     } 

lege ich eine Geige Link, um es deutlicher: https://jsfiddle.net/ciberlook/rhwcbwwL/18/ Jede Hilfe ??

Answer 1

Ich fand die Lösung. Im obigen Code wird die Funktion mosrarForma() im falschen Ereignis ausgelöst. Hier ist die Lösung:

$('canvas').mousedown(function(e){ 
    pulsado=true; 
    var posX=getMousePos(this,e).x; 
    var posY=getMousePos(this,e).y; 
     forma.definirForma(posX,posY,false); 
     forma.mostrarForma();  

    }); 

    $('canvas').mousemove(function(e){ 
     var posX=getMousePos(this,e).x; 
     var posY=getMousePos(this,e).y; 

     if (pulsado){ 

      forma.definirForma(posX,posY,true); 
      forma.mostrarForma(); 

     } 
    }); 

    $('canvas').mouseup(function(e){ 
     pulsado=false; //I release the button 

    }); 

    $('canvas').mouseleave(function(e){ 
     pulsado=false; 
    }); 
    forma.mostrarForma();