प्रत्येक ज़ूम स्तर

Question

पर एक ग्रिड बनाना जो ग्रिड बनाना है, मैं प्रत्येक ज़ूम/पैन स्तर पर फिर से खींचा जाने वाला ग्रिड बनाने की कोशिश कर रहा हूं ताकि इसमें केवल वर्तमान-देखने योग्य-स्क्रीन क्षेत्र शामिल हो।

कैसे ग्रिडों और स्क्रॉल ज़ूम करने के लिए माउस-स्थिति काम:

• प्रत्येक zoomin या Zoomout वर्तमान में देखे जाने योग्य क्षेत्र के आधार पर एक ग्रिड ड्रॉ (जहां ड्राइंग शुरू करने के लिए तर्क के रूप में उपयोग करते हुए paper.view.bounds ग्रिड और कितने कोशिकाओं की आवश्यकता है)

• मैं एक नया ग्रिड बनाने से पहले प्रत्येक ज़ूम इन/आउट पर पहले से रखी गई ग्रिड को भी हटा देता हूं।

यह गतिशील ग्रिड की एक अवधारणा है जो बहुत प्रदर्शन में सुधार के बाद से एक बहुत बड़े स्थिर ग्रिड होने एक विशाल प्रदर्शन हिट है है। इसलिए ग्रिड केवल वर्तमान में देखने योग्य स्क्रीन क्षेत्र को कवर करता है।

मुद्दा यह है कि ग्रिड अपेक्षाकृत उनके बीच स्थित नहीं है।

• ज़ूम घरों में माउस स्थिति पर इस प्रकार यह paper.view.bounds वस्तु बदल जाता है। दुर्भाग्यवश ग्रिड-ड्रॉइंग फ़ंक्शन भी उस ऑब्जेक्ट का उपयोग ग्रिड को आकर्षित करने के लिए करता है, इस प्रकार ग्रिड एक-दूसरे के सापेक्ष स्थित नहीं होते हैं।

• अगर मैं ज़ूम स्तर 1 पर एक आयत बनाएं और फिर मैं आयत नहीं रह गया है ग्रिड के लिए गठबंधन किया है, क्योंकि ग्रिड पिछले ग्रिड के साथ एक अपेक्षाकृत गलत स्थिति में रखा गया था ज़ूम इन/आउट।

कोई विचार?

Answer 1

हालांकि एलेक्स के जवाब अधिक सही हो सकता है,

मैं इस समाधान जहां मैं एक xPos/yPos कि निश्चित रूप से एक gridline नियुक्ति के अनुरूप होगा पर ग्रिड बनाने पता लगा है।

तो yPos/xPos अब एक correctedBoundingRectLeft और एक correctedBoundingRectTop कोड से

उनकी गणना आकर्षित करने के लिए है:

var drawGrid = function(boundingRect, cellSize) { 
    var vCellsNum = boundingRect.height/cellSize; 
    var hCellsNum = boundingRect.width/cellSize; 

    for (var i = 0; i <= hCellsNum; i++) { 
    var offsetXPos = Math.ceil(boundingRect.left/cellSize) * cellSize; 
    var xPos = offsetXPos + i * cellSize; 
    var topPoint = new paper.Point(xPos, boundingRect.top); 
    var bottomPoint = new paper.Point(xPos, boundingRect.bottom); 
    var line = new paper.Path.Line(topPoint, bottomPoint); 

    line.strokeColor = '#968d8d'; 
    } 

    for (var i = 0; i <= vCellsNum; i++) { 
    var offsetYPos = Math.ceil(boundingRect.top/cellSize) * cellSize; 
    var yPos = offsetYPos + i * cellSize; 
    var leftPoint = new paper.Point(boundingRect.left, yPos); 
    var rightPoint = new paper.Point(boundingRect.right, yPos); 
    var line = new paper.Path.Line(leftPoint, rightPoint); 

    line.strokeColor = '#968d8d'; 
    } 
} 

// where `30` is the cell width/height in px 
drawGrid(paper.view.bounds, 30); 

और एक Paper Sketch for the above

Answer 2

ऐसा लगता है कि आपके drawGrid() फ़ंक्शन हमेशा बिंदु (0,0) से शुरू होगा। इसके बजाए, आपको एक बिंदु को एक तर्क के रूप में पारित करना चाहिए जो उचित राशि से ग्रिड को ऑफ़सेट करता है।