SVG上用'mousemove'和鼠标位置替代移动

Question

这个想法是有一个黑白图片，并在'mousemove'使用SVG剪辑图像“获得颜色”（跟随我的鼠标移动）。我通过获取鼠标坐标并用彩色版本剪裁黑白图片来实现这一点。它适用于所有浏览器的桌面。

var clientX = 0; 
var clientY = 0; 

getCoordinates = function(event) { 
    clientX = event.clientX; 
    clientY = event.clientY; 
}; 

updateRect = function() { 
    creative.dom.rect.setAttribute('x', clientX); 
    creative.dom.rect.setAttribute('y', clientY); 
}; 

clipThroughImage = function() { 
    updateRect(); 
}; 

creative.dom.imageBw.addEventListener('mousemove', getCoordinates); 
creative.dom.imageBw.addEventListener('mousemove', clipThroughImage); 

然而，在移动设备上，剪裁仅通过点击“工作”（当我保留'mousemove'时）。我的手指移动之后的颜色（就像它用鼠标一样），而不是在我点击时立即到达那里。

我尝试使用'touchmove'，但它根本不起作用，它只是剪辑整个彩色图像，就是这样。

我需要更改哪些手机才能获得相同的结果？

Answer 1

其制造与以下工作：

var allowSwipe = true; 

getCoordinates = function(event) { 

    if (!allowSwipe) return; 
    allowSwipe = false; 

    setTimeout(function() { 
    allowSwipe = true; 
    }, 10); 

    clientX = (event.clientX || event.touches[0].clientX); 
    clientY = (event.clientY || event.touches[0].clientY); 

    clipThroughImage(); 
}; 

creative.dom.imageBw.addEventListener('touchmove', getCoordinates); 
creative.dom.imageBw.addEventListener('mousemove', getCoordinates); 

而且代码的其余部分仍然是相同的。