मैं कैनवास

Question

में जेड-इंडेक्स का अनुकरण कैसे कर सकता हूं मैंने पहले एक प्रश्न पूछा है: How can I control z-index of canvas objects? और हम ऐसे समाधान तक पहुंचे जो जटिल स्थितियों के लिए अच्छा नहीं हो सकता है।

मैंने पाया कि कैनवास में ज़ेड-इंडेक्स सिस्टम नहीं है, लेकिन एक सरल ऑर्डर ड्राइंग है। अब एक नया सवाल है: जटिल परिस्थितियों में इस समस्या को ठीक करने के लिए मैं जेड-इंडेक्स सिस्टम का अनुकरण कैसे कर सकता हूं?

अच्छा उत्तर एक बड़ी समस्या का समाधान कर सकता है।

Answer 1

ऐसा नहीं है कि कैनवास में ज़ेड-इंडेक्स नहीं है, यह है कि कैनवास HTML पृष्ठ के विपरीत खींची गई वस्तुओं को नहीं रखता है। यह सिर्फ पिक्सेल मैट्रिक्स पर खींचता है।

• वस्तु लोगों (आमतौर पर वेक्टर): वस्तुओं रखा और इंजन द्वारा प्रबंधित किया जाता

  मूल रूप से ड्राइंग मॉडल के दो प्रकार के होते हैं। उन्हें आमतौर पर हटाया या बदला जा सकता है। उनके पास एक जेड-इंडेक्स

• बिटमैप वाले हैं: कोई ऑब्जेक्ट नहीं है। आप बस एक पिक्सेल मैट्रिक्स

कैनवास मॉडल एक बिटमैप है। अन्य लोगों पर वस्तुओं को आकर्षित करने के लिए, आपको उन्हें के बाद खींचना होगा। इसका मतलब है कि आपको जो आकर्षित करना है उसे प्रबंधित करना होगा।

कैनवास मॉडल बहुत तेज़ है, लेकिन यदि आप अपनी ऑब्जेक्ट्स को प्रबंधित करने वाली ड्राइंग सिस्टम चाहते हैं, तो आपको इसके बजाय SVG की आवश्यकता हो सकती है।

---

यदि आप कैनवास का उपयोग करना चाहते हैं, तो सबसे अच्छा यह है कि आप वस्तुओं के रूप में क्या आकर्षित करते हैं।

var c = document.getElementById('c').getContext('2d'); 
function Square(x, y, s, color) { 
    this.x = x; this.y = y; this.s = s; this.color = color; 
    this.zindex=0; 
} 
Square.prototype.draw = function(c) { 
    c.fillStyle = this.color; 
    c.fillRect(this.x, this.y, this.s, this.s); 
} 
var squares = [ 
    new Square(10, 10, 50, 'blue'), new Square(40, 10, 40, 'red'), new Square(30, 50, 30, 'green'), 
    new Square(60, 30, 40, '#111'), new Square(0, 30, 20, '#444'), new Square(70, 00, 40, '#999') 
]; 

function draw() { 
    c.fillStyle = "white"; 
    c.fillRect(0, 0, 1000, 500); 
    for (var i=0; i<squares.length; i++) squares[i].draw(c); 
} 
setInterval(function(){ 
    // give all squares a random z-index 
    squares.forEach(function(v){v.zindex=Math.random()}); 
    // sort the list accordingly to zindex 
    squares.sort(function(a,b){return a.zindex-b.zindex}); 
    draw(); 
}, 1000); 

Demonstration

विचार यह है कि वर्ग सरणी zindex को तदनुसार क्रमबद्ध हो जाता है है: मैं उन्हें पुनः बनाने एक वर्ग की सूची और हर दूसरे मैं उनके zindex randomize और रखें: यहाँ एक उदाहरण मैं सिर्फ बनाया है । इसे आसानी से अन्य प्रकार की वस्तुओं तक बढ़ाया जा सकता है।

Answer 2

जैसा कि डाइस्ट्रॉय ने कहा है, जेड-इंडेक्स, सबसे सरल, केवल एक सूचकांक है जो आपको कैनवास पर चीजों को आकर्षित करने के क्रम में बताता है, ताकि वे ठीक से ओवरलैप हो जाएं।

यदि आप इससे अधिक कुछ करना चाहते हैं, तो ब्राउज़र के मौजूदा कार्यों को दोहराने के लिए कहें, तो आपके पास और अधिक काम करना होगा। जिस क्रम में वस्तुओं एक ब्राउज़र में तैयार कर रहे हैं एक जटिल गणना कि से प्रेरित है है:

1. डोम पेड़
2. तत्वों 'position विशेषताओं
3. तत्वों' z-index विशेषताओं

विहित इसका स्रोत सीएसएस विनिर्देश का हिस्सा Elaborate description of Stacking Contexts है।