संयुक्तजेड पेपर उत्तरदायी कैसे बनाएं?

Question

मैं सिर्फ जावास्क्रिप्ट लाइब्रेरी JointJs खोजता हूं और मैंने कागज और rects के साथ एक ग्राफ लागू किया।

लेकिन जब मैं ब्राउज़र आकार को कम करता हूं तो मैं इसे उत्तरदायी नहीं बना सकता, मेरा ग्राफ सही तरीके से प्रदर्शित नहीं होता है।

मैं अपने पेपर को संयुक्त राष्ट्र के साथ कैसे उत्तरदायी बना सकता हूं?

Answer 1

मैं बूटस्ट्रैप जैसे उत्तरदायी लेआउट सीएसएस का उपयोग करने की अनुशंसा करता हूं, मैं व्यक्तिगत रूप से शुद्ध सीएसएस (http://purecss.io) की सिफारिश करता हूं और बाकी एक HTML पृष्ठ के लिए आधार लेआउट सेट करने के बाद बाकी आसान होता है जिसमें संयुक्त जेएस पेपर होता है।

उदाहरण के लिए मान लीजिए कि आपने एचटीएमएल बेस बनाया है और आपने विशेष रूप से "मॉडल कन्ववास" नामक एक डिवी कंटेनर बनाया है, यह div एक उत्तरदायी सीएसएस के साथ बनाया गया था (इस उदाहरण के लिए मैंने शुद्ध सीएसएस का उपयोग किया था)।

<div id="modelCanvas" style="height:100%;width:100%; overflow-y: auto; overflow-x: auto;background-image:url(../res/tiny_grid.png);background-repeat:repeat;">

अब अपने वेब साइट आप के जे एस भाग में, हम init

var graph = new joint.dia.Graph; 

var paper = new joint.dia.Paper({ 
el: $('#modelCanvas'), 
gridSize: 10, 
height: $('#modelCanvas').height(), 
width: $('#modelCanvas').width(), 
gridSize: 1, 
model: graph, 
}); 

आवश्यक JointJS कागज और ग्राफ को प्रारंभ करेंगे अब JointJS कागज उत्तरदायी है बेस्ट, एजी

Answer 2

आप प्रारंभ में पेपर को उसी आयाम के रूप में सेट कर सकते हैं क्योंकि इसमें शामिल है आईएनजी तत्व, लेकिन जब पेपर बनाया जाता है तो शुरुआत में इसकी गणना की जाती है। यदि आप अपने ब्राउज़र का आकार बदलते समय आकार बदलने के लिए पेपर बनाना चाहते हैं, तो आपको ईवेंट का आकार बदलने के लिए प्रतिक्रिया करने की आवश्यकता होगी।

सबसे पहले, आपको अपने कंटेनर पर छिपाने के लिए अतिप्रवाह सेट करना होगा, अन्यथा इसके आयाम अपने बच्चे को फिट करने के लिए फैले होंगे, और यदि आप ब्राउज़र को छोटा करते हैं तो यह कम नहीं होगा।

#modelCanvas { 
    overflow: hidden; 
} 

आप सुनिश्चित करें कि आपके #modelCanvas तत्व कुछ विधि द्वारा उपलब्ध स्थान को भरने के लिए विस्तृत होंगी, या तो स्थापित करने height: 100% (स्थितियों में, जहां कि काम करेंगे में) या flexbox या निरपेक्ष स्थिति का उपयोग कर बनाने के लिए होगा।

दूसरे, आप एक आकार बदलने ईवेंट हैंडलर

$(window).resize(function() { 
    var canvas = $('#modelCanvas'); 
    paper.setDimensions(canvas.width(), canvas.height()); 
});