캔버스에 크롬으로 마우스를 그려 넣는 것

Question

나는 마우스를 사용하여 캔버스를 그리려하고있다. 내 응용 프로그램은 파이어 폭스에서 잘 작동하지만 크롬에서는 작동하지 않습니다. 내 코드는 다음과 같다 : 코드에서

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) 
     }; 

     } 

내가 마우스 좌표를 얻을 위, 캔버스는 "Lienzo"라는 DIV에 포함합니다. 나는 해결책을 찾기 위해 노력했다

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%; 
} 

,하지만 난 정말 잘못 이해 해달라고 할 수 없기 때문에 : 캔버스와 lienzo에 대한 CSS는 다음과 같다.

마우스로 그리는 데 사용하는 코드는 좌표를 밀어 넣는 배열로 구성되어 있으며 마우스를 놓으면 배열에 포함 된 모든 좌표가 인쇄됩니다.

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

내가 바이올린의 링크를 첨부 그것을 명확하게하기 위해 : 다음은 코드의 조각이다 https://jsfiddle.net/ciberlook/rhwcbwwL/18/ 어떤 도움을?

Answer 1

해결책을 찾았습니다. 위 코드에서 mostrarForma() 함수는 잘못된 이벤트에서 시작됩니다. 해결책은 다음과 같습니다.

$('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();