Question

我创建了一个jQuery临时票证，其工作方式是用户可以左键单击+保持并移动光标以刮开顶部图像以查看下面的图像。这适用于鼠标事件。我希望能够在iPad上使用（触摸事件）。我该如何修改它？

var topImage = new Image();
var bottomImage = new Image();
var coinImage = new Image();
bottomImage.src = "images/question.png";
coinImage.src = "images/coin.png";  

function init()
{
var isMouseDown = false;
var canvasWidth = $('#canvas').width();
var canvasHeight = $('#canvas').height();
$('body').append('<canvas id="overlay" width="'+canvasWidth+'" height="'+canvasHeight+'" />'); // Create the coin overlay canvas
var overlayctx = $('canvas')[1].getContext('2d');
overlayctx.drawImage(coinImage, 0,0);


function scratchOff(x, y)
{
    mainctx.save();
    mainctx.beginPath();
    mainctx.arc(x,y,radius,0,Math.PI*2,false); // we don't fill or stroke the arc intentionally
    mainctx.clip();
    mainctx.drawImage(bottomImage, 0, 0);
    mainctx.restore();
}

$('#overlay').mousedown(function(e){
        isMouseDown = true;
        var relX = e.pageX - this.offsetLeft;
        var relY = e.pageY - this.offsetTop;
        scratchOff(relX, relY, true);
});
$('#overlay').mousemove(function(e){
    var relX = e.pageX - this.offsetLeft;
    var relY = e.pageY - this.offsetTop;
    overlayctx.clearRect(0,0,canvasWidth,canvasHeight);
    overlayctx.drawImage(coinImage, relX-radius, relY-radius);
    if (isMouseDown) scratchOff(relX, relY, false);
});
$('#overlay').mouseup(function(e){
    isMouseDown = false;
});

var mainctx = $('canvas')[0].getContext('2d');
var radius = 20;
topImage.onload = function(){
    mainctx.drawImage(topImage, 0, 0);
};
topImage.src = "images/skava.png";
}

Answer 1

更改以下事件名称：

mousedown - ＆gt; touchstart

mouseup - ＆gt; touchend

对于“擦拭”（从左到右或从右到左）的手势，我建议使用： http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

希望有所帮助

如何将这些jQuery鼠标事件转换为触摸事件（适用于iPad）

1 个答案: