JointJS零基础入门04-链接样式
来源:互联网 发布:java的布尔类型 编辑:程序博客网 时间:2024/06/06 00:25
4.1 SVG
当我们知道如何设计元素时,我们来看看如何设置链接。再次,我们需要知道链接的SVG结构,然后使用外部CSS,链接的SVG结构如下:
<path class="connection"/><path class="marker-source"/><path class="marker-target"/><path class="connection-wrap"/><g class="labels" /><g class="marker-vertices"/><g class="marker-arrowheads"/><g class="link-tools" />
<g class="joint-theme-default joint-cell joint-type-link joint-link" id="j_1" model-id="3856002c-38e2-4f15-b8e5-e2649d580ad2" data-type="link"> <path xmlns="http://www.w3.org/2000/svg" class="connection" id="v-9" stroke="blue" d="M 20 20 L 240 20" /> <path xmlns="http://www.w3.org/2000/svg" class="marker-source" id="v-10" fill="red" stroke="black" transform="translate(10 15) scale(1) rotate(0)" d="M 10 0 L 0 5 L 10 10 Z" /> <path xmlns="http://www.w3.org/2000/svg" class="marker-target" id="v-11" fill="yellow" stroke="black" transform="translate(250 25) scale(1) rotate(-180)" d="M 10 0 L 0 5 L 10 10 Z" /> <path xmlns="http://www.w3.org/2000/svg" class="connection-wrap" d="M 20 20 L 240 20" /> <g xmlns="http://www.w3.org/2000/svg" class="labels" /> <g xmlns="http://www.w3.org/2000/svg" class="marker-vertices" /> <g xmlns="http://www.w3.org/2000/svg" class="marker-arrowheads"><g class="marker-arrowhead-group marker-arrowhead-group-source" id="v-7" transform="translate(10 7) scale(1) rotate(0)"><path class="marker-arrowhead" d="M 26 0 L 0 13 L 26 26 Z" end="source" /></g><g class="marker-arrowhead-group marker-arrowhead-group-target" id="v-8" transform="translate(250 33) scale(1) rotate(-180)"><path class="marker-arrowhead" d="M 26 0 L 0 13 L 26 26 Z" end="target" /></g></g> <g xmlns="http://www.w3.org/2000/svg" class="link-tools"><g class="link-tool" id="v-6" transform="translate(60 20)"><g class="tool-remove" event="remove"><circle r="11" /><path transform="scale(0.8) translate(-16 -16)" d="M 24.778 21.419 L 19.276 15.917 L 24.777 10.415 L 21.949 7.585 L 16.447 13.087 L 10.945 7.585 L 8.117 10.415 L 13.618 15.917 L 8.116 21.419 L 10.946 24.248 L 16.447 18.746 L 21.948 24.248 Z" /><title>Remove link.</title></g><g class="tool-options" event="link:options"><circle transform="translate(25)" r="11" /><path fill="white" transform="scale(0.55) translate(29 -16)" d="M 31.229 17.736 c 0.064 -0.571 0.104 -1.148 0.104 -1.736 s -0.04 -1.166 -0.104 -1.737 l -4.377 -1.557 c -0.218 -0.716 -0.504 -1.401 -0.851 -2.05 l 1.993 -4.192 c -0.725 -0.91 -1.549 -1.734 -2.458 -2.459 l -4.193 1.994 c -0.647 -0.347 -1.334 -0.632 -2.049 -0.849 l -1.558 -4.378 C 17.165 0.708 16.588 0.667 16 0.667 s -1.166 0.041 -1.737 0.105 L 12.707 5.15 c -0.716 0.217 -1.401 0.502 -2.05 0.849 L 6.464 4.005 C 5.554 4.73 4.73 5.554 4.005 6.464 l 1.994 4.192 c -0.347 0.648 -0.632 1.334 -0.849 2.05 l -4.378 1.557 C 0.708 14.834 0.667 15.412 0.667 16 s 0.041 1.165 0.105 1.736 l 4.378 1.558 c 0.217 0.715 0.502 1.401 0.849 2.049 l -1.994 4.193 c 0.725 0.909 1.549 1.733 2.459 2.458 l 4.192 -1.993 c 0.648 0.347 1.334 0.633 2.05 0.851 l 1.557 4.377 c 0.571 0.064 1.148 0.104 1.737 0.104 c 0.588 0 1.165 -0.04 1.736 -0.104 l 1.558 -4.377 c 0.715 -0.218 1.399 -0.504 2.049 -0.851 l 4.193 1.993 c 0.909 -0.725 1.733 -1.549 2.458 -2.458 l -1.993 -4.193 c 0.347 -0.647 0.633 -1.334 0.851 -2.049 L 31.229 17.736 Z M 16 20.871 c -2.69 0 -4.872 -2.182 -4.872 -4.871 c 0 -2.69 2.182 -4.872 4.872 -4.872 c 2.689 0 4.871 2.182 4.871 4.872 C 20.871 18.689 18.689 20.871 16 20.871 Z" /><title>Link options.</title></g></g></g></g>
4.2 attr
方法如下,参考见dia.link
4.2.1 效果图
4.2.2 代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>MyJointJS05</title> <link rel="stylesheet" href="css/joint.css" /> <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></head><body><div id="myDiv"></div><script type="text/javascript"> var graph=new joint.dia.Graph; //创建模型 var paper=new joint.dia.Paper({ el: $('#myDiv'), //纸放在哪 width: 1000, //纸多大 height: 500, model: graph, //纸里有什么 gridSize: 1 }); //注意Paper,js对大小写敏感 var rect=new joint.shapes.basic.Rect({ //绘制元素 position:{x: 100 , y: 70}, size: {width: 100 ,height: 30}, attrs: {rect: {fill: 'pink' }, text: {text: 'QLY' , fill: 'white'} } }); var rect1=rect.clone(); rect1.translate(300); var link=new joint.dia.Link({ source: { id:rect.id }, target: { id:rect1.id } }); var link1=link.clone(); var link2=link.clone(); link.set('smooth', true) link.attr({ '.connection': { stroke: 'blue' }, '.marker-source': { fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' }, '.marker-target': { fill: 'yellow', d: 'M 10 0 L 0 5 L 10 10 z' } }); link1.attr({ '.connection': { stroke: '#e74c3c' ,'stroke-width':5, d:'M 20 60 L 206 62 L 240 60' }, '.marker-source': { fill: '#e74c3c', d: 'M 10 0 L 0 5 L 10 10 z' }, '.marker-target': { fill: '#e74c3c', d: 'M 10 0 L 0 5 L 10 10 z' } }); link2.attr({ '.connection': { stroke: '#3498db' ,'stroke-dasharray':(5,2),'stroke-width':3, d:'M 30 100 L 245 96 L 226 81' }, '.marker-source': { fill: '#3498db', d: 'M 5.5 15.499 L 15.8 21.447 L 15.8 15.846 L 25.5 21.447 L 25.5 9.552 L 15.8 15.152 L 15.8 9.552 Z' }, '.marker-target': { fill: '#3498db', d: 'M 4.834 4.834 L 4.833 4.833 c -5.889 5.892 -5.89 15.443 0.001 21.334 s 15.44 5.888 21.33 -0.002 c 5.891 -5.891 5.893 -15.44 0.002 -21.33 C 20.275 -1.056 10.725 -1.056 4.834 4.834 Z M 25.459 5.542 c 0.833 0.836 1.523 1.757 2.104 2.726 l -4.08 4.08 c -0.418 -1.062 -1.053 -2.06 -1.912 -2.918 c -0.859 -0.859 -1.857 -1.494 -2.92 -1.913 l 4.08 -4.08 C 23.7 4.018 24.622 4.709 25.459 5.542 Z M 10.139 20.862 c -2.958 -2.968 -2.959 -7.758 -0.001 -10.725 c 2.966 -2.957 7.756 -2.957 10.725 0 c 2.954 2.965 2.955 7.757 -0.001 10.724 C 17.896 23.819 13.104 23.817 10.139 20.862 Z M 5.542 25.459 c -0.833 -0.837 -1.524 -1.759 -2.105 -2.728 l 4.081 -4.081 c 0.418 1.063 1.055 2.06 1.914 2.919 c 0.858 0.859 1.855 1.494 2.917 1.913 l -4.081 4.081 C 7.299 26.982 6.379 26.292 5.542 25.459 Z M 8.268 3.435 l 4.082 4.082 C 11.288 7.935 10.29 8.571 9.43 9.43 c -0.858 0.859 -1.494 1.855 -1.912 2.918 L 3.436 8.267 c 0.58 -0.969 1.271 -1.89 2.105 -2.727 C 6.377 4.707 7.299 4.016 8.268 3.435 Z M 22.732 27.563 l -4.082 -4.082 c 1.062 -0.418 2.061 -1.053 2.919 -1.912 c 0.859 -0.859 1.495 -1.857 1.913 -2.92 l 4.082 4.082 c -0.58 0.969 -1.271 1.891 -2.105 2.728 C 24.623 26.292 23.701 26.983 22.732 27.563 Z'} }); graph.addCells([rect,rect1,link,link1,link2]); </script></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>MyJointJS05</title> <link rel="stylesheet" href="css/joint.css" /> <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></head><body><div id="myDiv"></div><script type="text/javascript"> var graph=new joint.dia.Graph; //创建模型 var paper=new joint.dia.Paper({ el: $('#myDiv'), //纸放在哪 width: 1000, //纸多大 height: 500, model: graph, //纸里有什么 gridSize: 1 }); //注意Paper,js对大小写敏感 var rect=new joint.shapes.basic.Rect({ //绘制元素 position:{x: 100 , y: 70}, size: {width: 100 ,height: 30}, attrs: {rect: {fill: 'pink' }, text: {text: 'QLY' , fill: 'white'} } }); var rect1=rect.clone(); rect1.translate(300); var link=new joint.dia.Link({ source: { id:rect.id }, target: { id:rect1.id } }); var link1=link.clone(); var link2=link.clone(); link.set('smooth', true) link.attr({ '.connection': { stroke: 'blue' }, '.marker-source': { fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' }, '.marker-target': { fill: 'yellow', d: 'M 10 0 L 0 5 L 10 10 z' } }); link1.attr({ '.connection': { stroke: '#e74c3c' ,'stroke-width':5, d:'M 20 60 L 206 62 L 240 60' }, '.marker-source': { fill: '#e74c3c', d: 'M 10 0 L 0 5 L 10 10 z' }, '.marker-target': { fill: '#e74c3c', d: 'M 10 0 L 0 5 L 10 10 z' } }); link2.attr({ '.connection': { stroke: '#3498db' ,'stroke-dasharray':(5,2),'stroke-width':3, d:'M 30 100 L 245 96 L 226 81' }, '.marker-source': { fill: '#3498db', d: 'M 5.5 15.499 L 15.8 21.447 L 15.8 15.846 L 25.5 21.447 L 25.5 9.552 L 15.8 15.152 L 15.8 9.552 Z' }, '.marker-target': { fill: '#3498db', d: 'M 4.834 4.834 L 4.833 4.833 c -5.889 5.892 -5.89 15.443 0.001 21.334 s 15.44 5.888 21.33 -0.002 c 5.891 -5.891 5.893 -15.44 0.002 -21.33 C 20.275 -1.056 10.725 -1.056 4.834 4.834 Z M 25.459 5.542 c 0.833 0.836 1.523 1.757 2.104 2.726 l -4.08 4.08 c -0.418 -1.062 -1.053 -2.06 -1.912 -2.918 c -0.859 -0.859 -1.857 -1.494 -2.92 -1.913 l 4.08 -4.08 C 23.7 4.018 24.622 4.709 25.459 5.542 Z M 10.139 20.862 c -2.958 -2.968 -2.959 -7.758 -0.001 -10.725 c 2.966 -2.957 7.756 -2.957 10.725 0 c 2.954 2.965 2.955 7.757 -0.001 10.724 C 17.896 23.819 13.104 23.817 10.139 20.862 Z M 5.542 25.459 c -0.833 -0.837 -1.524 -1.759 -2.105 -2.728 l 4.081 -4.081 c 0.418 1.063 1.055 2.06 1.914 2.919 c 0.858 0.859 1.855 1.494 2.917 1.913 l -4.081 4.081 C 7.299 26.982 6.379 26.292 5.542 25.459 Z M 8.268 3.435 l 4.082 4.082 C 11.288 7.935 10.29 8.571 9.43 9.43 c -0.858 0.859 -1.494 1.855 -1.912 2.918 L 3.436 8.267 c 0.58 -0.969 1.271 -1.89 2.105 -2.727 C 6.377 4.707 7.299 4.016 8.268 3.435 Z M 22.732 27.563 l -4.082 -4.082 c 1.062 -0.418 2.061 -1.053 2.919 -1.912 c 0.859 -0.859 1.495 -1.857 1.913 -2.92 l 4.082 4.082 c -0.58 0.969 -1.271 1.891 -2.105 2.728 C 24.623 26.292 23.701 26.983 22.732 27.563 Z'} }); graph.addCells([rect,rect1,link,link1,link2]); </script></body></html>
ps:参考网址
http://resources.jointjs.com/tutorial/link-styling
阅读全文
1 0
- JointJS零基础入门04-链接样式
- JointJS零基础入门03-元素样式
- JointJS零基础入门01-JointJS安装&HelloWorld
- JointJS零基础入门02-事件处理
- JointJS零基础入门05-创建自定义元素
- 前端零基础入门(六):基础css样式之border
- 前端零基础入门(七):基础css样式之background
- SpringMVC 零基础入门
- JAVA零基础入门
- CSS零基础入门
- 零基础入门Sketch
- maven 零基础入门
- 前端零基础入门
- LaTeX零基础入门
- 模式识别零基础入门
- 零基础入门 Docker
- 零基础入门Linux
- activeMQ零基础入门
- js笔记:js正则表达式语法(es5)
- UVA 136
- input点击后placeholder中的提示消息消失
- Eclipse项目转换成studio项目
- (练习)java字符串
- JointJS零基础入门04-链接样式
- Two strings CodeForces
- office excel无法打开超链接解决方法
- TextView和ImageView的倾斜
- Java中的集合框架
- execl单元格不为0的时候设置颜色
- 异常行为分析模型设计
- pgrouting路径分析(任意两点之间的最短路径)
- GBDT&Spark mllib