Joint.js 开源项目教程

最新推荐文章于 2025-05-18 09:11:43 发布

薛锨宾

最新推荐文章于 2025-05-18 09:11:43 发布

阅读量445

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00960/article/details/141836583

Joint.js 开源项目教程

jointA proven SVG-based JavaScript diagramming library powering exceptional UIs项目地址:https://gitcode.com/gh_mirrors/jo/joint

项目介绍

Joint.js 是一个强大的 JavaScript 库，用于创建静态或交互式的图表和图表编辑器。它广泛应用于流程图、BPMN、ERD、组织结构图等领域。Joint.js 提供了丰富的图形元素和灵活的布局选项，使得开发者可以轻松构建复杂的图表应用。

项目快速启动

安装

首先，通过 npm 安装 Joint.js：

npm install jointjs

基本示例

以下是一个简单的 Joint.js 示例，展示如何创建一个基本的图表：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="node_modules/jointjs/dist/joint.css" />
</head>
<body>
    <div id="myDiagram"></div>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/lodash/lodash.js"></script>
    <script src="node_modules/backbone/backbone.js"></script>
    <script src="node_modules/jointjs/dist/joint.js"></script>
    <script>
        var graph = new joint.dia.Graph;

        var paper = new joint.dia.Paper({
            el: document.getElementById('myDiagram'),
            model: graph,
            width: 600,
            height: 400,
            gridSize: 10
        });

        var rect = new joint.shapes.standard.Rectangle();
        rect.position(100, 30);
        rect.resize(100, 40);
        rect.attr({
            body: {
                fill: 'blue'
            },
            label: {
                text: 'Hello',
                fill: 'white'
            }
        });
        rect.addTo(graph);

        var rect2 = rect.clone();
        rect2.translate(300, 0);
        rect2.attr('label/text', 'World!');
        rect2.addTo(graph);

        var link = new joint.shapes.standard.Link();
        link.source(rect);
        link.target(rect2);
        link.addTo(graph);
    </script>
</body>
</html>