javery with jquery with canvas에서 캔버스에 텍스트를 얻으려면

다음 자바 스크립트가 있습니다. mouseover가 제대로 작동하지만 지원되는 장치에서 줄을 추적 할 때 touchmove 이벤트가 발생하지 않습니다. 무엇이 내가 여기에 없으며 거기에 있습니까? 터치 이벤트를 사용하여 스팬을 가리키면 텍스트를 경고하는 방법은 무엇입니까?javery with jquery with canvas에서 캔버스에 텍스트를 얻으려면

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6rc1.js"></script> 

<script type="text/javascript"> 
function init() { 
    setupDrawingCanvas(); 
} 

function setupDrawingCanvas() { 

    var x, y, ctx, down=false; 

var canvas = document.getElementById("graph"); 
canvas.width = window.innerWidth-45; 
    canvas.height = window.innerHeight-45; 
var maxLength = (canvas.width > canvas.height) ? canvas.width : canvas.height; 

function onTouchMove(e){ 
if (e.targetTouches.length == 1){ 

     e.preventDefault(); 
     ctx.beginPath(); 
     ctx.moveTo(x,y); 
     ctx.lineTo(e.touches[0].pageX - canvas.offsetLeft, e.touches[0].pageY - canvas.offsetTop); 
     x = e.touches[0].pageX - canvas.offsetLeft; 
     y = e.touches[0].pageY - canvas.offsetTop; 
     ctx.stroke(); 
    } 
} 

function onTouchEnd(e){ 
    if (e.targetTouches.length==1){ 
     e.preventDefault(); 
     window.removeEventListener("touchmove", onTouchMove, false); 
     window.removeEventListener("touchend", onTouchEnd, false); 
    } 
} 
function onTouchStart(e){ 
    if (e.touches.length == 1){ 
     e.preventDefault(); 
     x = e.touches[0].pageX - canvas.offsetLeft; 
     y = e.touches[0].pageY - canvas.offsetTop; 
     window.addEventListener("touchmove", onTouchMove, false); 
     window.addEventListener("touchend", onTouchEnd, false); 
    } 
} 
function dropEvent(e) 
    { 
     e.stopPropagation(); 
     e.preventDefault(); 
    } 

if (canvas.getContext){ 
    ctx = canvas.getContext("2d"); 
    ctx.strokeStyle = "#000000"; 

    canvas.addEventListener("touchstart", onTouchStart, false); 


} 


    var func = (function() {  
       var num = parseInt($(this).text()); 
          alert ("moved over" + num); 

      }); 

    var $graph = $('#graph'); 
        $('<span></span>') 
          .addClass('circle') 
          .html(1) 
          .css({ 'top': 471, 'left': 430 }) 
          .mouseover(func) 
          .insertAfter($graph); 


        $('<span></span>') 
          .addClass('circle') 
          .html(2) 
          .css({ 'top': 451, 'left': 410 }) 
          .mouseover(func) 
          .insertAfter($graph); 

     // This is not being called when the touchevent is over the span 
     $('circle').each.bind('touchmove',function(e) { 

          e.preventDefault(); 
          var num = parseInt($(this).text()); 
          alert ("moved over" + num); 

    }); 


} 

</script> 
<style type="text/css"> 
    .circle { 
     background: url('circle.png'); 
     width: 24px; 
     height: 24px; 
     text-align: center; 
     font-size: .8em; 
     line-height: 24px; 
     display: block; 
     position: absolute; 
     cursor: pointer; 
     color: #333; 
     z-index: 100; 
    } 

    #graph { 
     left: 200px; 
     top: 20px; 
     position: relative; 
     border: 1px dotted #ddd; 
    } 
</style>

<body onload="init();"> 
    <canvas id="graph" width="680" height="680"></canvas> 
</body>

출처

2011-05-03 user94437

은 '.circle'에서 '원'을 변경, 다음 호출을 수정 ...

$('.circle').each.bind('touchmove',function(e) { 
    e.preventDefault(); 
    var num = parseInt($(this).text()); 
    alert ("moved over" + num); 
});

출처

2011-07-14 02:30:20 Jake

javery with jquery with canvas에서 캔버스에 텍스트를 얻으려면

답변

관련 문제