2015-11-27 2 views
1

Я собираюсь тщательно изучить учебник, в частности HelloWorld (http://www.jointjs.com/tutorial#hello-world). Основной пример отлично работает, за исключением того, что пространство в тексте: «мой ящик», приводит к странному характеру. Однако добавление еще одного небольшого документа, как предлагается в учебнике, не работает, я не получаю 2 рабочих документа, как указано в учебнике. Предлагаемое дополнение:Как добавить другую бумажную переменную в представление JointJs HTML?

var paperSmall = new joint.dia.Paper({ 
el: $('#myholder-small'), 
width: 600, 
height: 100, 
model: graph, 
gridSize: 1 
}); 
paperSmall.scale(.5); 
paperSmall.$el.css('pointer-events', 'none'); 

Как совместить добавление с основным кодом? Основной код ниже:

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="joint.css" /> 
<script src="jquery.js"></script> 
<script src="lodash.js"></script> 
<script src="backbone.js"></script> 
<script src="joint.js"></script> 
</head> 
<body> 
<div id="myholder"></div> 
<script type="text/javascript"> 

var graph = new joint.dia.Graph; 

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

var rect = new joint.shapes.basic.Rect({ 
    position: { x: 100, y: 30 }, 
    size: { width: 100, height: 30 }, 
    attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } } 
}); 

var rect2 = rect.clone(); 
rect2.translate(300); 

var link = new joint.dia.Link({ 
    source: { id: rect.id }, 
    target: { id: rect2.id } 
}); 

graph.addCells([rect, rect2, link]); 

</script> 
</body> 
</html> 

ответ

1

Как-то учебник не уточняет, что вторая бумага должна быть связана с другим DIV в HTML:

<div id="myholder-small"></div> 
Смежные вопросы