2017-04-21 62 views
0

這個想法是有一個黑白圖片,並在'mousemove'使用SVG剪輯圖像「獲得顏色」(跟隨我的鼠標移動)。我通過獲取鼠標座標並用彩色版本剪裁黑白圖片來實現這一點。它適用於所有瀏覽器的桌面。SVG上用'mousemove'和鼠標位置替代移動

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',但它根本不起作用,它只是剪輯整個彩色圖像,就是這樣。

我需要更改哪些手機才能獲得相同的結果?

回答

0

其製造與以下工作:

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

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