Question

我一直在使用JointJS在页面上绘制流程图，非常沮丧，目前只发现JointJS只能在页面加载之前映射图形，因此，我想点击一个按钮，画布上的图形（如矩形）绘制，简单的代码架构如下：

<button onclick='addCell()'/>
<div id='paper'/>

var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
            el: $('#paper'),
            width: 1580,
            height: 450,
            gridSize: 1,
            model: graph,
            perpendicularLinks: true
        });
var r1 = new joint.shapes.basic.Rect({
            position: {
                x: 10,
                y: 10
            },
            size: {
                width: 100,
                height: 40
            },
            attrs: {
                text: {
                    text: 'Rect1'
                }
            }
        });
function addCell(){
   graph.addCells(r1);
}

给我一个想法，并提前感谢您的回复。

Answer 1

您的代码本质上是正确的，但是有一些HTML 不准确语法：

<div id="paper"></div>
<button id="btn-layout", onclick="addCell()">Add cell</button>

<!-- code -->
<script type="text/javascript">

var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
            el: $('#paper'),
            width: 1580,
            height: 450,
            gridSize: 1,
            model: graph,
            perpendicularLinks: true
        });
var r1 = new joint.shapes.basic.Rect({
            position: {
                x: 10,
                y: 10
            },
            size: {
                width: 100,
                height: 40
            },
            attrs: {
                text: {
                    text: 'Rect1'
                }
            }
        });
function addCell(){
   graph.addCells(r1);
}
</script>

也不要忘记包含installation tutorial中所述的JointJS依赖项。

使用JonintJS，如何在页面加载后在画布上绘制图形？

1 个答案: