Javascript TouchMove с JQuery на холсте, чтобы получить текст из диапазона - PullRequest
Новая
       20

Javascript TouchMove с JQuery на холсте, чтобы получить текст из диапазона

0 голосов
/ 03 мая 2011

У меня есть следующий Javascript, наведение мыши работает нормально, но событие touchmove не запускается, когда я отслеживаю линию с поддерживаемого устройства. Что мне здесь не хватает, и есть ли способ предупредить текст, когда мы наводим курсор мыши на охват с помощью сенсорного события? 

<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>

1 Ответ

1 голос
/ 14 июля 2011

Измените следующий вызов, изменив 'circle' на '.circle' ... 

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