背景：我正嘗試構建一個應用程序，用戶可以通過同時單擊兩個動力學形狀來執行動作，但也可以拖動各個形狀畫布自由。我意識到KineticJS不支持多點觸控（但），但在解決該問題之前，我遇到了另一個問題。KineticJS：降低拖動事件的敏感度

問題： 我（在Chrome瀏覽器平面27" 氦，在Windows 8）使用觸摸屏似乎很難解決的觸摸事件以及這意味着，‘點擊’（和按住）一Kinetic fires中的形狀可以拖動事件，而不是單擊或輕擊事件，當發生這種情況時，我可以清楚地看到形狀跳過手指下方几個像素，這表明觸摸事件正在移動位置，即使手指住在同一個地方

我想什麼： 的一種方式來調整拖動事件的敏感性，使他們只有火的時候了DISTA從當前形狀位置開始到達一定數量的像素。理想情況下，點擊事件會觸發，然後在某個閾值之後進行dragstart。我假設在開始時停止發射阻力事件也意味着當我按住按鍵時，形狀將在我的手指下稍微停止移動。我有一個在KineticJS源代碼周圍，但我似乎無法看到這樣的代碼應該在哪裏實現。

已解決！請參閱下面的解決方案。

來源

2014-02-13 Kerplunk

你已經擁有了什麼？你可以發佈一個jsFiddle嗎？ – RobinvdA

此問題已得到解決，在最近推出的dragDistance屬性的承諾在KineticJS項目（https://github.com/ericdrowell/KineticJS/commit/0b93e21e0b9e11165dfed7574dbafa0ae2a144e0，或見https://github.com/ericdrowell/KineticJS/pull/725用於拉入請求）

要使用該功能，只需將觸發前必須超過的值（以像素爲單位）賦予形狀或組的dragDistance屬性。 touchStart事件低於此閾值將不會觸發dragStart，這意味着現在在觸摸方案中tap事件更有用。

var rect = new Kinetic.Rect({ 
    draggable: true, 
    dragDistance: 5 
});

來源

2014-03-12 15:57:11 Kerplunk

基本上我認爲你必須只有當事情發生一段時間後，結合點擊目標，做一些事情：

/* ######################### 
    ########## HTML ######### 
    ######################### */ 

<div id='target'></div> 

/* ######################### 
    ###### JAVASCRIPT ####### 
    ######################### */ 

var mousedownID = -1; 
var timer = 0; /* tenth of second */  
var timeToDrag = 25; 


var mousedown = function(event) { 
    if(mousedownID==-1) 
    mousedownID = setInterval(whilemousedown, 100); 
} 

var mouseup = function(event) { 
    if(mousedownID!=-1) { 
    clearInterval(mousedownID); 
    mousedownID=-1; 
    } 

} 

var whilemousedown = function() { 
    timer += 1; 
    if(timer > timeToDrag) { 
    /* Call drag */ 
    /* if you want you can force mouseup calling mouseup() function */ 
    } 
} 

$('#target').mousedown(mousedown); 
$('#targer').mouseup(mouseup);

你可以看看fiddle。希望這是有益的！

編輯

同樣，你可以綁定touchstart和touchend事件：

$('#target').bind("touchstart", mousedown); 
$('#target').bind("touchend", mouseup);

來源

2014-02-13 14:22:09

感謝您的回覆，但我認爲您誤解了。正如我在問題中所說的，我使用的是KineticJS畫布庫，它有自己的事件系統。另外，我正在處理觸摸，而不是鼠標事件。 – Kerplunk

難道你不能綁定touchstart和touchend？看看編輯.. –

@Velthune +1你肯定有正確的想法。 KineticJS自動處理綁定，因此手動覆蓋其事件系統需要非標準代碼。 – markE

你可以用動力學的前*事件，以避免拖動，直到達到一個特定的拖動距離。

但是，當前版本的KineticJS已經移除了所有適合您情況的before*事件。

您可以查看以前的版本並在*事件之前重新安裝這些版本。

或者

在touchstart你可以告訴節點上停止聽一段小小的週期事件。

通過這種方式，節點不會在短時間內收聽，也不會通過開始拖動來響應您無意中的手指抽搐。

這裏的untested-probably-needs-tweeking-code可以在短時間內關閉收聽。

每個節點上添加屬性來定義延遲：

// delay 100ms when a delay is requested 

myNode.delayAmount=100; 

// initialize with no delay (delayUntil==0) 

myNode.delayUntil=0;

補充一點，停止在未來

myNode.on("touchstart"){ 

    this.listening(false); 

    this.delayUntil=new Date().now()+this.delayAmount; 

    debounce(this); 

}

不久偵聽此節點，直到時間touchstart處理器定期檢查延遲時間是否已過。如果是的話，打開聽回

function debounce(node){ 

    var delayUntil=node.delayUntil; 

    if(delayUntil==0){return;} 

    if((new Date().now())<delayUntil){ 
     requestAnimationFrame(debounce); 
     return; 
    } 

    node.isListening(true); 

    node.delayUntil=0; 

    } 

}

來源

2014-02-13 16:39:26 markE

KineticJS：降低拖動事件的敏感度

回答

編輯

相關問題