如何使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纸张响应？

回答

相关问题