캔버스 오프셋 - 마우스 포인터가 동기화되지 않았습니다.

그림이 마우스 포인터와 동기화되지 않았으므로 터치 스크린과 동일합니다. 나는 터치 좌표에 대해 마우스 좌표와 함수 그리기 (이벤트)에 대해 getMouse (e) 오프셋을 설정했습니다. 내 PC에서만 작동합니다. 다른 터치 스크린 PC와 호환되지 않습니다. 어디에서 어떻게 변경해야하는지. 도와주세요. 여기 캔버스 오프셋 - 마우스 포인터가 동기화되지 않았습니다.

는 코딩을하다

http://jsfiddle.net/gFXam/

HTML

<button onClick="openPopup();">drawing</button> 
<div id="test" class="popup" > 
<canvas id="canvas1" width="790" height="1110" style=" border:solid #00F"> </canvas> 
<p>&nbsp;</p> 
</div>

CSS

<style> 
    #canvas1 { 
     left:0; /* adjust as needed */ 
     top:0; 
     position: inline; 
     width: 100%; 
     height: 100%; 
    } 
    .popup{ 
     position:absolute; 
     top:0px; 
     left:0px; 
     margin:0px; 
     width: 764px; 
     height: 1120px; 
     font-family:verdana; 
     font-size:13px; 
     background-color:rgba(255, 255, 255, 0); 
     border:2px solid green; 
     z-index:100000000000000000; 
     display:none; 
     opacity:0.6; 
     filter:alpha(opacity=60); 
     margin-left: 400px; 
     margin-top: 100px; 
    } 
    .cancel{ 
     display:relative; 
     cursor:pointer; 
     margin:0; 
     float:right; 
     height:10px; 
     width:14px; 
     padding:0 0 5px 0; 
     background-image:url(/images/icon-cross.png); 
     text-align:center; 
     font-weight:bold; 
     font-size:11px; 
     color:white; 
     border-radius:3px; 
     z-index:100000000000000000; 
    } 
    .cancel:hover{ 
     background-color:#09F; 
    } 
    </style>

SCRIPT :

<script> 
function openPopup() { 
    var p = document.getElementById('test'); 
    p.style.display = 'block'; 

    canvas.width = parseInt(p.style.width, '10'); //only when you use pixels 
    canvas.height = parseInt(p.style.height, '10'); 
} 

function closePopup() { 
    document.getElementById('test').style.display = 'none'; 
} 



function choosecolor(cps) { 
    ctx.strokeStyle = cps; // red 
} 

var can = document.getElementById('canvas1'); 
var ctx = can.getContext('2d'); 

var isPressed = false; 
var mx = 4, my = 4; 
//http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing 
function clear_canvas_width() 
{ 
    var s = document.getElementById ("canvas1"); 
    var w = s.width; 
    s.width = 4; 
    s.width = w; 
    ctx.clear(); 
} 


function move(e) { 
    getMouse(e); 
    if (isPressed) { 
    ctx.lineTo(mx, my); 
    ctx.stroke() 
    } 
} 

function up(e) { 
    getMouse(e); 
    isPressed = false; 
} 

function down(e) { 
    getMouse(e); 
    ctx.beginPath(); 
    ctx.moveTo(mx, my); 
    isPressed = true; 
} 

can.onmousemove = move; 
can.onmousedown = down; 
can.onmouseup = up; 

// for mouse: 


function getMouse(e) { 
    var element = can, offsetX = 0, offsetY = 0; 
    mx = e.pageX - 400; 
    my = e.pageY - 108; 
} 



     /*For touch screen*/ 
     window.addEventListener('load',function(){ 
     // get the canvas element and its context 
     var canvas = document.getElementById('canvas1'); 
     var context = canvas.getContext('2d'); 

     // create a drawer which tracks touch movements 
     var drawer = { 
      isDrawing: false, 
      touchstart: function(coors){ 
       context.beginPath(); 
       context.moveTo(coors.x, coors.y); 
       this.isDrawing = true; 
      }, 
      touchmove: function(coors){ 
       if (this.isDrawing) { 
        context.lineTo(coors.x, coors.y); 
        context.stroke(); 
       } 
      }, 
      touchend: function(coors){ 
       if (this.isDrawing) { 
        this.touchmove(coors); 
        this.isDrawing = false; 
       } 
      } 
     }; 
     // create a function to pass touch events and coordinates to drawer 
     function draw(event){ 

      // get the touch coordinates 
      var coors = { 
       x: event.targetTouches[0].pageX - 400, 
       y: event.targetTouches[0].pageY - 100 
      }; 
      // pass the coordinates to the appropriate handler 
      drawer[event.type](coors); 
     } 

     // attach the touchstart, touchmove, touchend event listeners. 
     canvas.addEventListener('touchstart',draw, false); 
     canvas.addEventListener('touchmove',draw, false); 
     canvas.addEventListener('touchend',draw, false); 

     // prevent elastic scrolling 
     document.body.addEventListener('touchmove',function(event){ 
      event.preventDefault(); 
     },false); // end body.onTouchMove 

    },false); // end window.onLoad 
</script>

출처

2013-06-28 charmz

이 당신의 getMouse을 변경

와 그것을 작동합니다 :

function getMouse(e) { 
    mx = e.clientX - canvas.offsetLeft; 
    my = e.clientY - canvas.offsetTop; 
}

마우스 위치는 전체 페이지를 기준으로 캔버스에 그들을 상대 얻을 수있는 캔버스 요소의 오프셋 (offset)를 뺄 필요가 있도록.

출처

2013-06-28 10:32:29 K3N

캔버스 오프셋 - 마우스 포인터가 동기화되지 않았습니다.

답변

관련 문제