KineticJS

Question

का उपयोग करके माउसओवर पर एक आकार को याद करना मैंने अभी Kinetic.js का उपयोग करना शुरू कर दिया है, और मैं भी कैनवास से बहुत अपरिचित हूं, इसलिए यदि यह प्रश्न छोटा है तो मेरे साथ बेकार है।

मेरे पास एक कैनवास है जो मध्यम से बड़ी मात्रा में आकार (50-500) रखेगा।

मैं आकार मैं इन उपकरणों का उपयोग करना चाहते हैं की रूपरेखा ड्राइंग में सफल रहा है:

function DrawPolygon(diagramLayer, polygon) { 
    var diagramImage = new Kinetic.Shape(function() { 
     var context = this.getContext(); 
     context.beginPath(); 
     context.lineWidth = 1; 
     context.strokeStyle = "#ff0000"; 

     var lastVertice = polygon.Vertices[polygon.Vertices.length - 1]; 

     context.moveTo(lastVertice.X, lastVertice.Y); 

     for (var i = 0; i < polygon.Vertices.length; i++) { 
      var vertice = polygon.Vertices[i]; 
      context.lineTo(vertice.X, vertice.Y); 
     } 

     context.stroke(); 
     context.closePath(); 
    }); 

    diagramImage.on("mouseover", function() { 
    }); 

    diagramLayer.add(diagramImage); 
    planViewStage.add(diagramLayer); 
} 

मैं माउसओवर पर एक अलग रंग के लिए diagramImage के संदर्भ के strokeStyle परिवर्तन करना चाहते हैं। मैं समझता हूं कि कैनवास तत्व 'राज्य' का ट्रैक नहीं रखता है और, इस तरह, इस बात का कोई अंदाजा नहीं है कि वर्तमान में इसका आकार है।

1. कैनवास के बारे में ऊपर तथ्य काइनेटिक की परत तत्व के लिए सच है:

   मैं कुछ चीजें सोच रहा हूँ?

2. ऐसा लगता है कि मुझे चित्र को स्पष्ट करने की आवश्यकता होगी छवि का संदर्भ और एक अलग रंग का उपयोग करके फिर से निकालना - क्या यह माउसओवर पर झिलमिलाहट करेगा?
3. मेरे वर्तमान आकार के नीचे 'आकार के नीचे' रंग का एक और रंग चित्रकारी लायक होगा? क्या मैं फिर से आकार को छुपा सकता हूं - शायद जेड-इंडेक्स को संशोधित करके - आकृतियों के रंग को 'बदलने' के लिए?
4. यदि 3 सत्य है, तो क्या इसमें 500 तत्वों को 1000 से दोगुना करने के साथ कोई प्रदर्शन चिंता होगी?

किसी भी जानकारी की सराहना की। धन्यवाद

Answer 1

यहाँ एक प्रयोगशाला से पता चलता है कि कैसे आप माउसओवर के साथ एक आकार के रंग बदल सकते हैं:

http://www.html5canvastutorials.com/labs/html5-canvas-interactive-flower/