Как сделать совместную работу бумаги?

Question

Я только что открыл javascript library JointJs, и я реализовал график с бумагой и прямоугольниками.

Но я не могу сделать его отзывчивым, когда уменьшаю размер браузера. Мой график не отображается правильно.

Как я могу сделать свою бумагу отзывчивой с помощью совместных?

Answer 1

Я рекомендую использовать отзывчивый макет css, такой как bootstrap. Я лично рекомендую чистый css (http://purecss.io), а остальное легко после установки базовой компоновки для html-страницы, содержащей бумагу JointJS.

Например, предположим, что вы создали базу html и создали специально контейнер div, называемый «modelCanvas», этот 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 реагирует Best, AG

Answer 2

Первоначально вы можете установить, чтобы бумага была того же размера, что и она содержит , но это только рассчитывается первоначально, когда бумага создана. Если вы хотите, чтобы бумага изменяла размер при изменении размера вашего браузера, вам нужно будет реагировать на изменение размера событий.

Во-первых, вам нужно установить переполнение для скрытия на вашем контейнере, в противном случае его размеры будут растягиваться, чтобы соответствовать его дочернему элементу, и он не будет уменьшаться, если вы сократите браузер.

#modelCanvas { 
    overflow: hidden; 
} 

Вы должны убедиться, что ваш #modelCanvas элемент будет растягиваться, чтобы заполнить свободное пространство каким-либо способом, либо установив height: 100% (в тех случаях, когда это будет работать) или с помощью Flexbox или абсолютное позиционирование.

Во-вторых, вы будете нуждаться в изменении размера обработчик события

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