如何使jointjs文件具有响应性? [英] How to make jointjs paper responsive?

问题描述

我只是发现了JavaScript库JointJs，并用纸和矩形实现了一个图形.

I just discover javascript library JointJs and I implemented a graph with paper and rects.

但是当我减小浏览器大小时，我无法使其响应，我的图形无法正确显示.

But I can't make it responsive when I reduce the browser size my graph doesn't display correctly.

我如何使我的论文与jointjs相对应?

How can I make my paper responsive with jointjs ?

推荐答案

您最初可以将纸张设置为其包含元素的尺寸，但是仅在创建纸张时才进行初始计算.如果您想在调整浏览器大小时通过纸张更改大小，则需要对调整事件大小做出反应.

You can initially set the paper to be the same dimensions as it's containing element, but that's only calculated initially when the paper is created. If you want to paper to change size as you resize your browser, you'll need to react to resize events.

首先，您需要将溢出设置为隐藏在容器上，否则容器的尺寸将拉伸以适合其子容器，并且如果收缩浏览器也不会收缩.

Firstly, you'll need to set overflow to hidden on your container, otherwise its dimensions will stretch to fit its child, and it won't shrink if you shrink the browser.

#modelCanvas {
    overflow: hidden;
}

您必须确保您的#modelCanvas元素将通过某种方法拉伸以填充可用空间，或者设置height: 100%(在可行的情况下)，或者使用flexbox或绝对定位.

You'll have to make sure your #modelCanvaselement will stretch to fill available space by some method, either setting height: 100% (in situations where that will work) or using flexbox or absolute positioning.

第二，您需要调整事件处理程序大小

Secondly, you'll need a resize event handler

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

这篇关于如何使jointjs文件具有响应性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！