拖動HTML5的任何形狀

我正在嘗試使用JavaScript來繪製HTML5中的東西。
而我想要的形狀可以互動。
我知道我可以通過javascript計算當前鼠標的pos是否落入形狀（任何形狀，可能是不規則形狀）。
但這太微不足道了。
是否有一些api或lib在某些便利條件下執行此計算。
就像，例如。拖動HTML5的任何形狀

var anyshape = new Shape(); 
anyshape.addEventListen('mousemove', onMouseMove);

或

var anyshape = new Shape(); 
anyshape.onMouseMove = function(){};

來源

2012-03-14 Magic

Fabric.js提供形狀拖動開箱。還支持事件監聽和點擊/懸停等對象的檢測。

var myShape = /* any shape */; 
canvas.observe('mouse:down', function(e) { 
    if (e.memo.target === myShape) { 
    /* mouse down on myShape */ 
    } 
});

另請參閱event inspector demo。

來源

2012-03-14 13:19:30 kangax

但是，如果我們有大量形狀。我們應該寫一堆if else或switch/case。維護這些代碼令人頭疼。我需要一個更乾淨的方式。 – Magic 2012-03-15 02:51:02

你必須自己實現所有的功能或者使用庫。

如果你不想使用庫，我已經寫了一個few tutorials製作可移動的形狀。

我強烈建議看看SVG，看看它是否能更好地滿足您的需求。 SVG中已經包含了內置事件監聽器和內置命中測試的複雜路徑。

來源

2012-03-15 13:46:12

你的教程並不完全是我需要的。 – Magic 2012-03-16 03:05:20

這不完全是，但概念是一樣的。你必須跟蹤你想要做的形狀的一切，並自己做點擊測試或者使用一個庫。沒有乾淨的內置方式。對你來說可能更好的是SVG，這裏有很多這樣的內容。 – 2012-03-16 15:58:59

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/ kinetic給你最好，最簡單的方法。您現在可以簡單地在for循環中添加多個svgs和事件偵聽器。

for{ 
create shape code 
add event listener 
console log - kinetic rocks

}

來源

2013-06-06 05:54:57 tussh13

拖動HTML5的任何形狀

回答

相關問題