JointJS入门实例01-补充第一篇在JOINTJS元素中使用HTML

最新推荐文章于 2024-05-10 17:09:09 发布
最新推荐文章于 2024-05-10 17:09:09 发布
阅读量1k 收藏 1
点赞数
分类专栏： jointjs学习教程 文章标签： html css js web
原文链接：https://blog.csdn.net/u013411654/article/details/77506637
版权
本文档介绍了如何在JointJS图表中使用自定义视图呈现HTML输入和其他HTML元素，以实现与HTML的交互。通过创建一个自定义的`html.Element`视图，更新HTML元素的位置和大小，并监听输入变化来同步JointJS模型。示例代码展示了如何创建带有输入框、下拉选择和删除按钮的元素，并展示了如何处理模型和视图之间的交互。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.1 简介

很多时候，您可能希望在JointJS图表中使用HTML输入或其他HTML元素。本实例中使用的技术是创建一个自定义视图，用于呈现HTML并处理与HTML的交互。一种不同的方法可能是使用 foreignObject并将其嵌入markup到您的JointJS元素中。然而，由于浏览器支持不佳，这种技术是有问题的。但是，这似乎是将来在JointJS中将HTML与SVG相结合的正确方法。如果您正确设置自定义HTML视图，则可以利用JointJS提供的许多功能。

1.2 实例

1.2.1 效果图

在这里插入图片描述

1.2.2 主要JS代码简介

 如何创建一个自定义的JointJS视图来呈现HTML（包括功能输入）。诀窍是更新HTML元素的位置和维度，以便它遵循基本的JointJS元素。另外，我们观察嵌入式输入的变化，并相应更新JointJS模型。这也是相反的，如果模型发生变化，我们会反映HTML中的变化。下面以文件中的htmlInJoint.js的主要代码片段进行简单讲解：

1、新建画布

var graph = new joint.dia.Graph;
    var paper = new joint.dia.Paper({
     el: $('#paper-html-elements'), 
     width:700,
      height: 400,
      gridSize: 1,
      model: graph
    });

2、创建一个自定义html元素

 joint.shapes.html = {};
    joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
        defaults: joint.util.deepSupplement({
            type: 'html.Element',
            attrs: {
                rect: { stroke: 'none', 'fill-opacity': 0 }
            }
        }, joint.shapes.basic.Rect.prototype.defaults)
    });

3、为在页面显示HTML的div元素创建自定义视图
1）创建template

template: [
            '<div class="html-element">',
            '<button class="delete">x</button>',
            '<label></label>',
            '<span></span>', '<br/>',
            '<select><option>--</option><option>Q</option><option>L</option><option>Y</option></select>',
            '<input type="text" value="I\'m HTML input" />',
            '</div>'
        ].join(''),

在这里插入图片描述
2）初始化

initialize: function() {    //初始化
            _.bindAll(this, 'updateBox');
            joint.dia.ElementView.prototype.initialize.apply(this, arguments);
 
            this.$box = $(_.template(this.template)());
            // 防止paper向下处理指针.
            this.$box.find('input,select').on('mousedown click', function(evt) {
                evt.stopPropagation();
            });
            // 这是对输入变化做出反应并将输入数据存储在单元格模型中的一个例子。
            this.$box.find('input').on('change', _.bind(function(evt) {
                this.model.set('input', $(evt.target).val());
            }, this));
            this.$box.find('select').on('change', _.bind(function(evt) {
                this.model.set('select', $(evt.target).val());
            }, this));
            this.$box.find('select').val(this.model.get('select'));
            this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
            // 基础模型发生更改时更新框位置
            this.model.on('change', this.updateBox, this);
            // 当模型获取从图中删除时，删除框。
            this.model.on('remove', this.removeBox, this);
 
            this.updateBox();
        },

3）函数

render: function() {
            joint.dia.ElementView.prototype.render.apply(this, arguments);
            this.paper.$el.prepend(this.$box);
            this.updateBox();
            return this;
        },
        updateBox: function() {
            // 设置框的位置和尺寸，以便它涵盖了JointJS元素
            var bbox = this.model.getBBox();
            // Example of updating the HTML with a data stored in the cell model.
            this.$box.find('label').text(this.model.get('label'));
            this.$box.find('span').text(this.model.get('select'));  //将从select获取的元素回显到span
            this.$box.css({
                width: bbox.width,
                height: bbox.height,
                left: bbox.x,
                top: bbox.y,
                transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)'
            });
        },
        removeBox: function(evt) {
            this.$box.remove();
        }

4、创建JointJS元素并将它们添加到图形像往常一样

var el1 = new joint.shapes.html.Element({
        position: { x: 80, y: 80 },
        size: { width: 170, height: 100 },
        label: 'I am HTML',
        select: 'L'
    });
    var el2 = new joint.shapes.html.Element({
        position: { x: 370, y: 160 },
        size: { width: 170, height: 100 },
        label: 'Me too',
        select: 'Y'
    });
    var l = new joint.dia.Link({
        source: { id: el1.id },
        target: { id: el2.id },
        attrs: { '.connection': { 'stroke-width': 5, stroke: '#34495E' } }
    });
 
    graph.addCells([el1, el2,l]);

1.2.3 代码

1、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo01</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/lodash.js"></script><!--注意加载顺序-->
    <script type="text/javascript" src="js/backbone.js"></script>
    <script type="text/javascript" src="js/joint.js"></script>
    <link  rel="stylesheet" type="text/css" href="css/htmlInJoint.css"/>
 
</head>
<body>
    <div id="paper-html-elements"></div>
    <script type="text/javascript" src="js/htmlInJoint.js"></script>
</body>
</html>

2、htmlInJoint.css

#paper-html-elements {
    position: relative;
    border: 1px solid gray;
    display: inline-block;
    background: transparent;
    overflow: hidden;
}
#paper-html-elements svg {
    background: transparent;
}
/*#paper-html-elements svg .link {*/
    /*z-index: 2;*/
/*}*/
.html-element {
    position: absolute;
    background: PINK;
    /* Make sure events are propagated to the JointJS element so, e.g. dragging works.*/
    pointer-events: none;
    -webkit-user-select: none;
    border-radius: 4px;
    border: 2px solid WHITE;
    box-shadow: inset 0 0 5px black, 2px 2px 1px gray;
    padding: 5px;
    box-sizing: border-box;
    z-index: 2;
}
.html-element select,
.html-element input,
.html-element button {
    /* Enable interacting with inputs only. */
    pointer-events: auto;
}
.html-element button.delete {
    color: white;
    border: none;
    background-color: #C0392B;
    border-radius: 20px;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: middle;
    position: absolute;
    top: -15px;
    left: -15px;
    padding: 0;
    margin: 0;
    font-weight: bold;
    cursor: pointer;
}
.html-element button.delete:hover {
    width: 20px;
    height: 20px;
    line-height: 20px;
}
.html-element select {
    position: absolute;
    right: 2px;
    bottom: 28px;
}
.html-element input {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border: none;
    color: #333;
    padding: 5px;
    height: 16px;
}
.html-element label {
    color: #333;
    text-shadow: 1px 0 0 lightgray;
    font-weight: bold;
}
.html-element span {
    position: absolute;
    top: 2px;
    right: 9px;
    color: white;
    font-size: 10px;
}

3、htmlInJoint.js

(function() {
 
    var graph = new joint.dia.Graph;
    var paper = new joint.dia.Paper({ el: $('#paper-html-elements'), width:700, height: 400, gridSize: 1, model: graph });
 
// 创建一个自定义元素
// ------------------------
 
    joint.shapes.html = {};
    joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
        defaults: joint.util.deepSupplement({
            type: 'html.Element',
            attrs: {
                rect: { stroke: 'none', 'fill-opacity': 0 }
            }
        }, joint.shapes.basic.Rect.prototype.defaults)
    });
 
// 为在页面显示HTML的div元素创建自定义视图。
// -------------------------------------------------------------------------
 
    joint.shapes.html.ElementView = joint.dia.ElementView.extend({
 
        template: [
            '<div class="html-element">',
            '<button class="delete">x</button>',
            '<label></label>',
            '<span></span>', '<br/>',
            '<select><option>--</option><option>Q</option><option>L</option><option>Y</option></select>',
            '<input type="text" value="I\'m HTML input" />',
            '</div>'
        ].join(''),
 
        initialize: function() {    //初始化
            _.bindAll(this, 'updateBox');
            joint.dia.ElementView.prototype.initialize.apply(this, arguments);
 
            this.$box = $(_.template(this.template)());
            // 防止paper向下处理指针.
            this.$box.find('input,select').on('mousedown click', function(evt) {
                evt.stopPropagation();
            });
            // 这是对输入变化做出反应并将输入数据存储在单元格模型中的一个例子。
            this.$box.find('input').on('change', _.bind(function(evt) {
                this.model.set('input', $(evt.target).val());
            }, this));
            this.$box.find('select').on('change', _.bind(function(evt) {
                this.model.set('select', $(evt.target).val());
            }, this));
            this.$box.find('select').val(this.model.get('select'));
            this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
            // 基础模型发生更改时更新框位置
            this.model.on('change', this.updateBox, this);
            // 当模型获取从图中删除时，删除框。
            this.model.on('remove', this.removeBox, this);
 
            this.updateBox();
        },
        render: function() {
            joint.dia.ElementView.prototype.render.apply(this, arguments);
            this.paper.$el.prepend(this.$box);
            this.updateBox();
            return this;
        },
        updateBox: function() {
            // 设置框的位置和尺寸，以便它涵盖了JointJS元素
            var bbox = this.model.getBBox();
            // Example of updating the HTML with a data stored in the cell model.
            this.$box.find('label').text(this.model.get('label'));
            this.$box.find('span').text(this.model.get('select'));  //将从select获取的元素回显到span
            this.$box.css({
                width: bbox.width,
                height: bbox.height,
                left: bbox.x,
                top: bbox.y,
                transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)'
            });
        },
        removeBox: function(evt) {
            this.$box.remove();
        }
    });
 
// 创建JointJS元素并将它们添加到图形像往常一样。
// -----------------------------------------------------------
 
    var el1 = new joint.shapes.html.Element({
        position: { x: 80, y: 80 },
        size: { width: 170, height: 100 },
        label: 'I am HTML',
        select: 'L'
    });
    var el2 = new joint.shapes.html.Element({
        position: { x: 370, y: 160 },
        size: { width: 170, height: 100 },
        label: 'Me too',
        select: 'Y'
    });
    var l = new joint.dia.Link({
        source: { id: el1.id },
        target: { id: el2.id },
        attrs: { '.connection': { 'stroke-width': 5, stroke: '#34495E' } }
    });
 
    graph.addCells([el1, el2,l]);
 
}());

本文转载链接

深度学习·理论篇(2023版)·第005篇深度学习和概率论基础02：一篇文章图形化联合熵/条件熵/交叉熵/KL散度/JS散度/互信息之间的关系+最大似然估计(MLE)
小李的研究生学习日记
11-01 2万+
一篇文章图形化联合熵/条件熵/交叉熵/KL散度/JS散度/互信息之间的关系+最大似然估计(MLE)，有个很自然的问题就是，给定观测的数据和分布下，如何才能找到一组参数让分布和数据最大程度地吻合？这个问题就是最大似然估计要解决的。顾名思义，最大似然估计要解决的是下面问题。具体来说，对于一组观测到的数据{x1,x2,…,xn}，最大似然的参数为下面的问题：用一个简单例子来看一下，如图2-21所示，为一组观测到的数据在3组不同的正态分布参数下的可视化例子。
汇总|3D点云分割算法
3D视觉工坊
02-19 1881
点击上方“3D视觉工坊”，选择“星标”干货第一时间送达前言最近在arXiv和一些会议上看到了几篇3D点云分割paper，觉得还不错，在这里分享下基本思路。1、SceneEncoder: ...
jointjs 例子 左边组件框 选则 可以在右边进行流程组合
12-03
jointjs 例子 左边组件框 选则 可以在右边进行流程组合 jointjs 组件框 例子 jointjs例子 流程组合
JointJS Demo
11-16
JointJS 结合Rappid Demo
JointJS简单小例子
qq_40858865的博客
09-29 2056
JointJS是一个HTML5的JavaScript库，用于创建完全互动式的图表，它极易上手且操作简单，并且支持所有的现代浏览器，对于时间紧迫的我们非常有利。我们可以使用JointJS已提供的图元素绘图，也可根据需求自定义一些图元素。除此之外，JointJS创建的图表就是SVG图形，它具有SVG的所有优点，但是我们却不必在意SVG的那些元素是怎么定义的，不用在意那些标签规则，我们更注重的是逻辑，只...
【数据流图】用JointJs实现数据流图（二）
最新发布
VVVVV
05-10 503
JointJS基本使用教程
jointjs教程例子
qq_32615575的博客
04-14 1343
用JointJS做一个简单的功能控制图 一个官方的HelloWorld： window.onload=function() { var graph = new joint.dia.Graph; // 创建画板，所有图上的元素都在画板里 var paper = new joint.dia.Paper({ // 创建画板上的画布，画布是用来渲染画板 el: document.getElementById('myGraph'), // 指向HTML里ID为"myG
Spring Boot入门到精通（超详细）
qq_41627024的博客
06-06 6541
本文主要讲了Springboot从基础到高阶涉及到的相关技术，让读者能够快速入门，深入了解Springboot框架，并能够熟练的使用springboot，快速提升个人技能。
Springboot入门到精通（超详细文档）
m0_67393413的博客
06-12 3819
我们知道，从 2002 年开始，Spring 一直在飞速的发展，如今已经成为了在Java EE（Java Enterprise Edition）开发中真正意义上的标准，但是随着技术的发展，Java EE使用 Spring 逐渐变得笨重起来，大量的 XML 文件存在于项目之中。繁琐的配置，整合第三方框架的配置问题，导致了开发和部署效率的降低。2012 年 10 月，Mike Youngstrom 在 Spring jira 中创建了一个功能请求，要求在 Spring 框架中支持无容器 Web 应用程序体系结构
Box2D：HTML5游戏开发跨平台新选择的内幕
本文详细介绍了Box2D引擎的基础理论、核心概念、物理模拟原理以及数学模型，并深入探讨了Box2D在HTML5游戏中的应用和实践。文章从基础理论出发，对Box2D引擎进行了全面的分析，包括世界、刚体、形状、碰撞检测、动力...
jointjs_demo.rar
12-17
jointjs 2个案例，无依耐，可直接运行,适合新手学习，后期有需要可以评论区留言，或者加646500947@qq.com看到会第一时间回复
在JOINTJS元素中使用HTML
08-25
如何创建一个自定义的JointJS视图来呈现HTML（包括功能输入）。
vue中使用gojs/jointjs的示例代码
12-10
因为公司项目需求，要画出相关业务的流程图，以便客户了解自己身处何处 搜索框输入 “前端流程图插件”，查了很多资料，总结一下有以下几种 flow-chart 代码写法繁琐，不是json就可以解决，效果也比较丑,PASS darge-d3 github :https://github.com/dagrejs/dagre-d3 效果图 下载里面的demo,改一下json就可以了 // States var states = [ "NEW", "SUBMITTED","FINISHED" ,"FAILED","DELIVER", "CANCELED", "ABOLISHED" , "DE
JointJS HelloWorld Demo
08-17
JointJS HelloWorld Demo
JointJs快速入门
热门推荐
qq_40858865的博客
09-29 1万+
JointJS速览 入门 Hello World 下面时官方给出的入门demo例子，可以看到 JointJS 依赖jquery、lodash、backbone，使用 JointJS 只需要引入joint.css和joint.js即可。定义一个div用来盛放绘制的图形。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;li
【数据流图】用JointJs实现数据流图（一）
VVVVV
05-10 897
创建静态图表或完全交互式图表工具，例如工作流编辑器、流程管理工具、IVR 系统、API 集成器、演示应用程序等等。demo网址：https://resources.jointjs.com/demos#jointjsAPI文档：https://resources.jointjs.com/docs/jointjs/v3.5/joint.html其中linkInfo为自定义，可以使用起点元素id与终点元素id，也可使用起点元素坐标与终点元素坐标，以官方文档link的使用为准使用节点连接使用坐标连接。
在JointJS元素中使用html
xiaobai_ol的博客
01-26 1791
问题背景 在工作中有个需求需要画一幅“树图”，本想使用echarts进行绘制的。奈何echarts的label中不支持formatter html，即html文本的渲染。故为了使图的节点更具有交互性，这里选择使用jointjs。 问题解决 jointjs是一个js图表库，其可在浏览器的网页中创建可交互的图表工具，它依赖于js与SVG。（这个在网页渲染后可以在浏览器按F12查看页面元素看到） 基...
jointjs
饭叔
04-25 2144
http://www.jointjs.com/
JointJS入门实例01-在JOINTJS元素中使用HTML
QLY的博客
08-23 2880
如何创建一个自定义的JointJS视图来呈现HTML（包括功能输入）。诀窍是更新HTML元素的位置和维度，以便它遵循基本的JointJS元素。另外，我们观察嵌入式输入的变化，并相应更新JointJS模型。这也是相反的，如果模型发生变化，我们会反映HTML中的变化。下面以文件中的htmlInJoint.js的主要代码片段进行简单讲解.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值