【数据流图】用JointJs实现数据流图（二）

一、流图如何绑定绘制的元素？

通过打印JointJs生成的属性可知，id是不允许被覆盖修改的，但是cid可以。所以通过绑定元素的cid，可实现后续的操作，如查找元素、更改元素属性等。

1. 绑定cid方式示例

let textEle = new joint.shapes.standard.TextBlock();
textEle.attributes.attrs.label = {
   text: '例子',
};
textEle.attr('label/text', '例子');
textEle.resize(10, 10);
textEle.position(0, 0);
// 绑定cid
textEle.cid = cid;
textEle.addTo(this.graph);

2. 根据cid查找画布上的元素

let findEleByCid(cid){
    // 获取所有元素
    let eleList = this.graph.getElements();
    // 返回cid匹配上的元素
    return eleList.find((ele) => ele.cid === cid);
}

3. 改变属性，以改变文本内容为例

// 将textEle这个文本框元素的内容改为123
textEle.attr('label/text', '123');

二、流图中绘制使用的JointJs的API及函数封装

1. 绘制文本框

• 使用API：shapes.standard.TextBlock
• 常用属性
  • attributes.attrs.label.text：文本内容
  • attributes.attrs.label.style：文本样式，与css保持一致
  • attr(‘label/text’, text)：标签内容
  • attr(‘body/stroke’, ‘none’)：文本框的外边框
  • resize(width,height)：文本框尺寸
  • position(x,y)：文本框位置
• 绘制文本框函数示例

 drawText(text, position, size, textStyle) {
    let textEle = new joint.shapes.standard.TextBlock();
    textEle.attributes.attrs.label = {
      text: text,
      style: textStyle
    };
    textEle.attr('label/text', text);
    textEle.attr('body/stroke', 'none');
    textEle.resize(size[0], size[1]);
    textEle.position(position[0], position[1]);
    textEle.addTo(this.graph);
}

2. 绘制图片

• 使用API：shapes.standard.Image
• 常用属性
  • attr(‘image/xlinkHref’, imgSrc)：指定图片地址
  • resize(width,height)：图片尺寸
  • position(x,y)：图片位置
• 绘制图片函数示例

drawImg(imgSrc, position, size) {
    let ele = new joint.shapes.standard.Image();
    ele.attr('image/xlinkHref', imgSrc);
    ele.position(position[0], position[1]);
    ele.resize(size[0], size[1])
    ele.addTo(this.graph);
},

3. 绘制线条

• 使用API：shapes.standard.Link&dia.Link&dia.LinkView
• 常用属性
  • attr(‘line/stroke’, ‘#FF620C’)：连线颜色
  • attr(‘line/strokeWidth’, 1.5)：连线宽度
  • .connector(‘curve’, {})：贝塞尔三次曲线

贝塞尔三次曲线计算较为复杂，若不指定，按官方默认的来绘制，会呈现s型曲线

• 绘制线条函数示例

// linkInfo：连线信息
// color：圆点颜色
// sourceDirection：连线起点位置
// targetDirection：连线终点位置
drawLink(linkInfo, color, sourceDirection, targetDirection) {
      let link = new joint.shapes.standard.Link(linkInfo);
      link.attr('line/stroke', '#FF620C');
      link.attr('line/strokeWidth', 1.5);
      link.attr({
        line: {
          targetMarker: {
            type: 'path',
            'stroke-width': 1,
            fill: '#FF620C',
            d: 'M 8 -4 0 0 8 4 Z'
          }
        }
      });
      let paperLink = new joint.dia.Link(linkInfo);
      paperLink.attr({
        '.connection': { stroke: 'none' }
      });
      if (sourceDirection && targetDirection) {
        link.connector('curve', {
          sourceDirection: sourceDirection,
          targetDirection: targetDirection,
          distanceCoefficient: 0.4
        });
        paperLink.connector('curve', {
          sourceDirection: sourceDirection,
          targetDirection: targetDirection,
          distanceCoefficient: 0.4
        });
      } else {
        link.connector('curve', {
          distanceCoefficient: 0.4
        });
        paperLink.connector('curve', {
          distanceCoefficient: 0.4
        });
      }
      paperLink.addTo(this.graph);
      let vCircle = V('circle', {
        r: 5,
        fill: color
      });
      let paperLinkView = paperLink.findView(this.paper);
      paperLinkView.sendToken(vCircle, 4000);
      this.dataInterval = setInterval(() => {
        paperLinkView.sendToken(vCircle, 4000);
      }, 5000);
      link.addTo(this.graph);
    },

三、流图中绘制使用JointJs的方法总结

1. 触摸连线事件（link:mouseover）

this.paper.on('link:mouseover', (cell) => {
    // cell即为鼠标悬停的连线元素
});

2. 移出连线事件（link:mouseleave）

this.paper.on('link:mouseleave', () => {
   // cell即为鼠标离开的连线元素
});

3. 触摸元素事件（element:mouseover）

this.paper.on('element:mouseover', (cell) => {
   // cell即为鼠标悬停的元素
});

4. 移出元素事件（element:mouseleave）

this.paper.on('element:mouseleave', (cell) => {
   // cell即为鼠标移出的元素  
});

5. 鼠标点击元素事件（element:pointerclick）

this.paper.on('element:pointerclick', (cell) => {
   // cell即为鼠标点击的元素  
});

6. 获取所有画布上的元素（getElements）

// eleList即为画布上的元素
let eleList = this.graph.getElements();

7. 获取所有画布上的连线

// links即为画布上的连线
let links = this.graph.getLinks();

8. 移除画布上的元素（removeCells）

// cells为要移除的元素的数组
this.graph.removeCells(cells);

9. 画布自适应（paper.scale）

resizeCanvas() {
  let paperWidth = window.innerWidth;
  // 示例为1250，可自行更改
  if (paperWidth > 1250) {
      let scale = paperWidth / 1250;
      this.paper.scale(scale, scale);
      // this.$refs.canvas为vue获取canvas元素的方式
      if (this.$refs.canvas) {
        this.$refs.canvas.style.width = `${800 * scale}px`;
        this.$refs.canvas.style.height = `${520 * scale}px`;
      }
  }
}