JointJS零基础入门05-创建自定义元素

最新推荐文章于 2021-06-29 10:12:56 发布
最新推荐文章于 2021-06-29 10:12:56 发布
阅读量4.4k 收藏 3
点赞数
分类专栏： web前端 jointJS 文章标签： svg JointJS 自定义元素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013411654/article/details/77503687
版权
这篇博客介绍了如何在JointJS中创建自定义元素，特别是通过组合SVG标签实现元素定位。文章详细讨论了SVG的基本元素，如rect、text、circle等，并提供了使用特殊属性实现元素相对定位的方法，例如使文本在矩形中心居中的案例。
摘要由CSDN通过智能技术生成

5.1 简介

  JointJS内置了基本形状元素，这些形状都在joint.shapes.basic命名空间包括joint.shapes.basic.Rect、joint.shapes.basic.Circle、joint.shapes.basic.Text、joint.shapes.basic.Image。此外，JointJS具有插件，其中包含一些众所周知的图形元素的形状和链接。虽然有很多形状可供选择，你可能会缺少一个想要创建自己的形状。

  创建新形状非常简单，但您需要SVG元素的一些基本知识。最重要的SVG元素，你应该知道的是rect，text，circle，ellipse，image和 path。他们的详细描述与例子可以在MDN上找到。结合这些，您可以基本上做任何您喜欢的2D形状。

  如上所述，通过组合SVG标签创建自定义元素。很

最低0.47元/天 解锁文章
96QLY
关注
专栏目录
vue jointjs 拓扑图 自定义shape 按需引入
愿你走过半生，归来任是少年。
06-18 488
vue jointjs 拓扑图 自定义shape 按需引入。
JointJS+ / HTML5 / JS 4.0.1 Crack
最新发布
控件与插件之大全
06-27 853
JointJS+充分利用 HTML5 和 SVG 的优势，为您提供构建 Web 产品的合适工具。它完全在客户端运行，因此独立于您的后端技术。使用 Java、PHP、Python、Ruby 还是 NodeJS？没问题，您可以立即插入 JointJS+。这个专业的图表库还与所有主要的 JavaScript 框架集成，即 React、Angular、Vue 和 Svelte。
使用jointJS自定义元素编写动态修改元素大小的控件
robinspada的博客
12-16 1342
jointJS是一个基于svg的图形化工具库，拥有强大的功能，但是也有2个缺点 1.没有中文的官方文档 2.很多功能只存在于其收费版Rappid中，价格不菲 动态修改元素大小这是一个非常有用功能，Rappid中有这个功能，但也些不如人意的地方，最后决定自己写一个 基本思路如下 1.创建一个自定义元素，可以拖动大小和位置 2.把这个自定义元素绑定到其他元素，让其他元素的大小和位置与自定义...
JointJS
p656456564545的专栏
08-06 5844
JointJS介绍 时间 2014-03-03 15:21:24  GroovyQ 原文  http://www.groovyq.net/node/733 主题 SVG JavaScript 最近因项目需要，要在页面实现可操作的流程图——根据状态量的不同演示对应流程，这就不是单单加载一个图片的问题了，还存在控制与元素变化，用什么实现怎么实现，是个让人头疼的问题。
形状切割html,JointJs：将自定义形状html与元素一起缩放（使用paperScroller.zoom）
weixin_30359591的博客
06-04 277
扩展到Marc_Alx的答案。调用paper.translate()和paper.scale()在文件上触发'translate'和'scale'事件。自定义元素可以在他们的自定义ElementView上监听这些事件。例如，如果缩放滚轮上的活动：paper.on('blank:mousewheel', (event, x, y, delta) => {const scale = paper....
JointJS零基础入门03-元素样式
QLY的博客
08-22 1023
JointJS零基础入门03-元素样式
JointJS零基础入门01-JointJS安装&HelloWorld-附件资源
03-05
JointJS零基础入门01-JointJS安装&HelloWorld-附件资源
JointJS零基础入门04-链接样式
QLY的博客
08-22 2117
JointJS零基础入门04-链接样式：svg和attr
html控制图的宽,用JointJS做一个简单的功能控制图
weixin_31639069的博客
06-29 475
继上一篇介绍了GoJS之后，继续研究JS的绘图工具，毕竟GoJS有些小贵。这次选择了JointJS，完全开源，它还有一个商业版本叫Raddit，功能更强大。不过就我的需求场景，开源的Joint就足够了。接下来，我们看看它是怎么使用的。JointJS是基于Backbone开发的，所以使用Joint之前，要先引入Backbone的相关依赖，所以我们的HTML文件是这样的：JointJS Sample这...
jointjs.zip
07-16
jointjs.zip
类似UML可拖拽图形插件JointJS
07-11
前些日子公司让做一个因子和关系的项目，要求从数据库中取出因子和关系，然后生成可拖拽的图形，拖拽至后可以动态保存坐标到数据库，找了很久终于找到这个插件，其中里面还有很多UML类型的图，生成各种图和箭头等很方面
jointjs -- link
qq_40285497的博客
09-14 980
line label jointjs线条label改变的几个函数 line.labels(labels,opt) labels 对象数组 l.labels([{ attrs: { text: { text: 'labeds\nafdsfadf\nals', fill: 'white', fon...
jointJS(六）--cell move event&连线获取source/target
joyce_yjh的博客
12-01 1400
今天要分享两个小知识点： 一、拖动node时如何获取该node的所有信息： graph.getElements().forEach(function (element) { element.on('change:position', function () { console.log(element); putPosition(
jointjs link的几种不同路由的效果
weixin_50552284的博客
02-25 324
normal：直线连接 metro：会自动避开路上的障碍 orthogonal：折线，不会自动避开路上的障碍 manhattan：折线，会自动避开路上的障碍 oneSide：单向 wobble：抖动线条
JointJS简单小例子
qq_40858865的博客
09-29 1927
JointJS是一个HTML5的JavaScript库，用于创建完全互动式的图表，它极易上手且操作简单，并且支持所有的现代浏览器，对于时间紧迫的我们非常有利。我们可以使用JointJS已提供的图元素绘图，也可根据需求自定义一些图元素。除此之外，JointJS创建的图表就是SVG图形，它具有SVG的所有优点，但是我们却不必在意SVG的那些元素是怎么定义的，不用在意那些标签规则，我们更注重的是逻辑，只...
jointJS系列之一：jointJS的的初步使用
weixin_34203426的博客
08-11 1573
一、jointJS简介 jointJS是一个基于svg的图形化工具库，在画布上画出支持拖动的svg图形，而且可以导出JSON，也能通过JSON配置导入直接生成图形。 可以基于jointJS开发出流程图、UML图以及图表等。由于jointJS是基于svg的，因此对svg有一定的了解会对jointJS的理解和使用有较大帮助。 由于jointJ...
JointJS绘制点和线段
wxj_ios的博客
03-15 2176
// 获取线段初始化样式 getLeftLinkView() { let LinkView = joint.dia.LinkView.extend({ addVertex: function(evt, x, y) {}, removeVertex: function(endType) {}, pointerdown: function(evt, x, y) { ...
JointJS创建节点时为g元素添加class
06-01
要在JointJS创建节点时为g元素添加class，可以使用以下代码： ```javascript // 创建一个矩形节点 var rect = new joint.shapes.basic.Rect({ position: { x: 100, y: 100 }, size: { width: 100, height: 50 }, }); // 设置节点的样式 rect.attr({ rect: { fill: 'blue', rx: 10, ry: 10, 'class': 'your-class' // 添加class }, text: { text: 'My Rect' } }); // 将节点添加到画布中 paper.model.addCell(rect); ``` 其中，`rect`是一个矩形节点对象，`'class': 'your-class'`语句可以为节点的g元素添加class。最后，使用`paper.model.addCell()`方法将节点添加到画布中即可。 请注意，这里的`your-class`应该替换为你想要添加的类名。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值