2010-10-10 10 views
9

मैं एचटीएमएल 5 कैनवास ढांचे की जरूरत है ऐसा करने के लिए:एचटीएमएल 5 कैनवास उन्नत ढांचे

  • ड्रा वस्तु (जैसे आयत)
  • वस्तु रंग बदल/बॉर्डर शैली की onmouseover घटना पर क्लिक करने पर ही
  • कुछ js कार्रवाई करना

tHX

संपादित करें: मैं अंत में raphaeljs (वैकल्पिक का उपयोग करने का फैसला किया टिव dojo होगा)। यह ढांचा अद्भुत है। (यह एचटीएमएल 5 कैनवास की जरूरत नहीं है और उपयोग करता एसवीजी)

उत्तर

8

यह क्या आप वास्तव में चाहते हैं एक retained mode ग्राफिक्स इंटरफेस है, जहां आप एक वस्तु बना सकते हैं, इस पर उस पर माउस घटनाओं, परिवर्तन गुण मिलता है, इसे स्थानांतरित है की तरह लगता है आदि और ब्राउजर को आवश्यकतानुसार स्क्रीन को फिर से खींचना है। इस मामले में आप <canvas> के बजाय एसवीजी के साथ बेहतर होंगे, जो immediate mode ग्राफिक्स सतह के रूप में वास्तव में केवल पिक्सेल से भरा बॉक्स है।

+0

हाँ है, एसवीजी क्या जाने के लिए सबसे आसान तरीका होता है। जहां तक ​​मुझे पता है, वहां कोई कैनवास पुस्तकालय नहीं है जो आप चाहते हैं कि घटना का पता लगाने के प्रकार का समर्थन करें। –

1

इस सवाल पर एक नज़र डालें:

What is the current state of the art in HTML canvas JavaScript libraries and frameworks?

Fabric.js mightly प्रभावशाली है और केक भी एक सभ्य पुस्तकालय है।

+0

Thx, मैंने पहले ही Fabric.js को आजमाया है। यह आश्चर्यजनक है, लेकिन लोग एनीमेशन और घटनाओं की समस्या को हल नहीं करते हैं (कम से कम एक सामान्य कार्यक्षमता के रूप में नहीं)। – ChRapO

+0

क्या आपने कैक की कोशिश की है? – Castrohenge

+2

नहीं, कोई समस्या है कि परियोजना मौत है। लेकिन वर्तमान कार्यक्षमता अच्छी है। – ChRapO

0

bHive यह वास्तव में अच्छी तरह से करता है और एक्शनस्क्रिप्ट पृष्ठभूमि से आ रहा है मुझे इसे उपयोग करना काफी आसान लगता है, मुझे डेमो को देखना था क्योंकि दस्तावेज़ीकरण सहायक नहीं है!

आप मदद करने के लिए ..

square = engine.createShape({ 
    shape: 'square', 
    style: 'filled', 
    backgroundColor: '#000', 
    width: 120, 
    height: 20, 
    x: 20, 
    y: 100 
}); 

किसी भी माउस कार्य आप एक क्लिप वस्तु को जोड़ने के लिए की जरूरत है ऐसा करने के लिए।

clip = engine.createClip({ x: 20, y: 20 }); 

फिर

clip.add(square); 

पाश आप तो वर्ग आकर्षित करने की आवश्यकता में एक घटना श्रोता

clip.addEventListener('onmouseover',function(e) { some code ... }); 
clip.addEventListener('onclick',function(e) { some code ... }); 

जोड़ें।

clip.draw(); 

मैं मेरी मदद करने के लिए के माध्यम से ऐसा हो सकता है http://www.bhivecanvas.com/demos/cargame.php की जाँच के रूप में है कि यह में रोलओवर और onclicks है क़ौम के स्रोत का उपयोग कर रहा हूँ।

6

KineticJS, कौन-कौन से उल्लेख किया है तुलना में बेहतर प्रदर्शन के बारे में मत भूलना, प्लस यह एक बहुत सरल एपीआई

संबंधित मुद्दे