如何使jointjs紙張響應？

我只是發現javascript庫JointJs和我用紙和rects實現了一個圖。如何使jointjs紙張響應？

但是我不能讓它響應，當我減少瀏覽器的大小我的圖形不能正確顯示。

如何使我的論文對jointjs有反應？

2015-03-13 Mbaye Babacar SADIKH

我推薦使用響應式佈局css，比如bootstrap我個人推薦使用純css（http://purecss.io），其餘部分很簡單，只要爲包含JointJS論文的html頁面設置基本佈局即可。

例如，假設您創建了html基礎，並且專門創建了一個名爲「modelCanvas」的div容器，該div使用響應式css（對於此示例，我使用了純CSS）。

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

現在到你的網站，你的JS部分，我們將初始化需要JointJS紙和圖形初始化

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紙響應最佳， AG

來源

2015-03-26 14:44:12 hellspawn

'$（ '＃modelCanvas'）。寬度（）在我的情況'等於0。因爲它有助於某人。 – Neil 2015-11-26 11:12:12

不是最好的答案，因爲這並不是真正的響應（即，這不會幫助將平板從橫向轉換爲縱向），因爲在初始負載不會更新紙張後更改介質斷點。 SpoonMeiser的答案更好，因爲它包含JavaScript支持，因此它是真正的響應。 – user1158023 2016-11-16 18:32:00

您可以將紙張初始設置爲與其包含的尺寸相同但這只是在創建紙張時才計算出來的。如果您希望在調整瀏覽器大小時更改紙張大小，則需要對調整大小事件做出反應。

首先，您需要將溢出設置爲隱藏在您的容器上，否則其尺寸將拉伸至適合其子級，並且如果縮小瀏覽器，則尺寸不會縮小。

#modelCanvas { 
    overflow: hidden; 
}

你必須確保你的#modelCanvas元素將延伸通過某種方法來填充可用空間，無論是設置height: 100%（在的情況下，將工作），或使用Flexbox的或絕對定位。

其次，你需要一個resize事件處理函數

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

來源

2015-12-15 17:57:15 SpoonMeiser

有了這個解決方案，有時當窗口調整到較小時，單元就會丟失。在調整窗口大小的時候，是否還有一種方法可以爲單元元素設置setdimensions – 2016-11-24 12:24:32

您可以在resize事件處理程序中執行任何操作。你可以調用'paper.scale（）'（也可能是'paper.setOrigin（）'）來改變視圖以包含你以前的所有細節，但是你需要找出傳遞給那些參數的參數。 – SpoonMeiser 2016-11-24 12:34:57

如何使jointjs紙張響應？

回答

相關問題