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

而且代碼的其餘部分仍然是相同的。