jointJS(一）--关于jointJS的初认识

最近由于项目需要，开始接触jointJS，妥妥不停刷文档模式，先写一下对于jointjs的粗浅认识吧。

我们可以使用JointJS已提供的图元素绘图，也可根据需求自定义一些图元素。除此之外，JointJS创建的图表就是SVG图形，想改变图形样式，就去GoogleSVG相关语法就好啦。另外，它极易上手且操作简单，并且支持所有的现代浏览器。

下面先通过一个小的demo来展示jointjs的使用~

首先先去官网下载一下这些文件，详见HTML代码块head里的内容：一切准备好就绪，我们就开始了。

先看HTML代码，body就一个div#myholder用来盛放我的画板graph，这里肯定有人会问什么是graph，憋急，请往下看。

JS代码如下：首先是定义画板和画布

 
 
  
  var graph = new joint.dia.Graph;   
     
  var paper = new joint.dia.Paper({   
     
  el: $('#myholder'),//此处是你要放graph的容器   
     
  width: 1300,   
     
  height: 800,   
     
  model: graph,   
     
  gridSize: 1   
     
  });

接下来，就先画个简单的矩形，想要改变一些默认样式的话需要了解元素的SVG DOM结构：

 
 
  
  var rect = new joint.shapes.basic.Rect({   
      position: {   
          x: 100,   
          y: 30   
      },   
      size: {   
          width: 200,   
          height: 30   
      },   
      attrs: {   
          //attr SVG attr      prop- custom data   
          rect: {   
              fill: 'rgb(238,244,247)',   
              'stroke': 'rgb(47,152,223)',   
              'stroke-width': '1px'   
                  //svg上色 fill stroke   
          },   
          text: {   
              text: 'my box',   
              fill: 'black'   
          }   
      }   
  });

跟矩形相似，我们也可以画个椭圆，代码如下：

 
 
  
  var ellipse = new joint.shapes.basic.Rect({   
      position: {   
          x: 100,   
          y: 30   
      },   
      size: {   
          width: 200,   
          height: 30   
      },   
      attrs: {   
          //attr SVG attr      prop- custom data   
          rect: {   
              fill: 'rgb(238,244,247)',   
              'stroke': 'rgb(47,152,223)',   
              'stroke-width': '1px',   
              'rx': '10px',   
              'ry': '30px'   
                  //svg上色 fill stroke   
          },   
          text: {   
              text: 'ellipse',   
              fill: 'pink'   
          }   
      }   
  });

要让他们有一定的距离

 
 
  
  ellipse.translate(300); //两块的距离

接下来，再来画个连线：

 
 
  
  var link = new joint.dia.Link({   
      source: {   
          id: rect.id   
      },   
      target: {   
          id: ellipse.id   
      }   
  });

***，把前面造的对象都放到画板中：

 
 
  
  graph.addCells([rect, rect2, link]);

那么，一个小小的demo就实现了，是不是挺简单的，接下来我还会陆续分享使用jointjs中的问题以及我找到的***的方法，jointjs的初认识就先到这里啦，加油!

分享文章：jointJS(一）--关于jointJS的初认识
浏览地址：http://www.shufengxianlan.com/qtweb/news37/320737.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联