2017-10-25 24 views
7

बदलने में देरी मेरी स्क्रीन में चार canvas है, दो ऊपर और दो नीचे स्थित है।एचटीएमएल ऑफ़सेट लेफ्ट

प्रत्येक के पास एक बटन होता है जो कैनवास को अधिकतम करने, दूसरों को छिपाने के लिए संभव बनाता है।

यह बटन कैनवास के offsetTop और offsetLeft पर आधारित पूर्ण स्थिति के साथ प्रत्येक कैनवास के ऊपर स्थित है।

हालांकि, जब मैं कैनवास को अधिकतम या छोटा करता हूं, तो बटन सूत्र केवल width प्रॉपर्टी अपडेट करता है।

अजीब बात यह है कि अगर मैं स्क्रीन का आकार बदलता हूं, जो resize फ़ंक्शन भी कॉल करता है, तो सब कुछ सही जगह पर जाता है।

Initial screen

After maximizing

Then after resizing screen

संपादित करें: अतिरिक्त जानकारी: मैं VueJS उपयोग कर रहा हूँ और व्यवस्था अन्य कैनवास को छिपाने के लिए, मैं लागू v-show="false" उन्हें जो केवल माता-पिता divs, करने के लिए display: none लागू होता है।

कुछ स्निपेट:

प्रारंभिक आकार और श्रोता:

window.onload = function() { 
    resizeAll(); 
    window.addEventListener('resize', resizeAll, false); 
}; 

आकार हब:

function resizeAll() { 
    vue.$refs.panelOne.resizeDefault(); 
    // ... 
    vue.$refs.panelN.resizeDefault(); 
} 

पैनल के आकार डिफ़ॉल्ट और विधि का आकार बदलें।

resizeDefault() { 
     let dimensions; 
     if (this.expanded) { 
      dimensions = getScreenDimensions(); 
     } else { 
      dimensions = getHalfScreenDimensions(); 
     } 
     this.resize(dimensions.width, dimensions.height); 
    } 

resize (width, height) { 
     this.canvas.width = width; 
     this.canvas.height = height; 
     this.expandStyles.top = (this.canvas.offsetTop + 10) + 'px'; 
     this.expandStyles.left = (this.canvas.offsetLeft + this.canvas.width - 40) + 'px'; 
     drawInterface.redraw(); 
    } 

और अंत में, आयाम ही टिककर खेल:: "expandStyles" बटन के लिए आवेदन किया सीएसएस शैलियों है

function getScreenDimensions() { 
    return { 
     width: window.innerWidth - 310, 
     height: window.innerHeight * 0.92 
    }; 
} 

function getHalfScreenDimensions() { 
    return { 
     width: (window.innerWidth - 310)/2, 
     height: (window.innerHeight * 0.92)/2 
    }; 
} 
+1

आप शायद पूरे स्निपेट को संलग्न करना चाहते हैं ताकि लोग आपकी मदद कर सकें। यदि आपके स्निपेट को वू से अलग नहीं किया जा सकता है, तो आप https://codesandbox.io/s/vue – deathangel908

+0

का उपयोग कर सकते हैं अपने कैनवास का आकार बदलने का प्रयास करें और अपना बटन फिर से करें। जब आप अपना बटन फिर से चलाते हैं तो कैनवास के ऑफ़सेट टॉप और बाएं मान शायद अपडेट नहीं होते हैं। यदि यह काम नहीं करता है, तो एक setTimeOut का उपयोग करें। –

+0

और स्निपेट जोड़ा गया। असल में, सेटटाइमआउट को लागू करना यह काम करता है। हालांकि, मैं एक और अधिक सरल समाधान चुनना चाहता हूं। अगर कुछ और काम नहीं करता है, तो मुझे जवाब स्वीकार करने में खुशी होगी। – Luiz

उत्तर

1

मैं स्फिंक्स से सहमत हैं, यह समस्या की तरह लगता है के प्रसार के साथ निहित है इस .expandStyles में वास्तविक डोम में प्रतिक्रियाशील गुण। उपयोगी होगा यदि आप टेम्पलेट का हिस्सा साझा कर सकते हैं जिसमें आपके कैनवस और पोजिशनिंग एप्लिकेशन हैं।

इस बीच, अगर setTimeOut आप के लिए सही महसूस नहीं करता है, आप चीजों को और अधिक "Vue तरह से" Vue: nextTick का उपयोग कर (शैलियों पुनर्गणना, पुनः बनाने) के संचालन के क्रम निर्धारित करने के लिए से कर सकते हैं।

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