qunee for html5 绘图

学习方式

看官方网站 http://www.qunee.com/ 里的文档和示例。本文记录一些自己在使用过程中的心得，以备后续查询。

1、拓扑图绘制的方式

拓扑图绘制的方式，简单点就两种。
1. 插件自动布局 http://doc.qunee.com/1147021.html。
创建好图元和连线后，调用自动布局方法，自动布局节点和连线。
适合对布局没有啥要求的项目。
3. 人工手动布局。
根据提供的原型图，自己绘制相应的布局图。这需要计算好每个节点的x、y 坐标。坐标不是一次就能固定好的，需要反复去调整各个节点的坐标值。
适合必须按照原型图一对一复刻的项目。

2、节点图标

1. 具体使用方案参考 http://doc.qunee.com/1146952.html。
2. 网络拓扑图一般需要展示设备的告警信息，相应的，图标也需要变换颜色。
   使用image 图片的方式，就意味着同一设备得准备多个不同颜色的图片，根据状态，给节点添加不同颜色的设备图片。确定就是得维护很多图片，如果有新的颜色需求，就得重新提供图片。
3. 【推荐】使用 “SVG转换成Canvas代码” 的方式加载图标，再配合RENDER_COLOR 样式属性，动态改变图标颜色。
   【注意】canvas 代码中图片的颜色必须是浅色系，参考颜色 #dfdfdf。

   e.setStyle(Q.Styles.RENDER_COLOR, color)

3、节点名称

名称过长时，使用 '\n ’ 附后换行显示。

/*
         str:需要换行的字符串
         n:换行间隔字符数
         */
        function insertEnter(str,n){
            var len = str.length;
            var strTemp = '';
            if(len > n){
                strTemp = str.substring(0,n);
                str = str.substring(n,len);
                return strTemp+'\n '+insertEnter(str,n);
            }else{
                return str;
            }
        }

4、拓扑图中插入性能图、柱状图等

两种方案

4.1 用echart 绘图，并通过获取canvas 图片的方式插入节点中

function BarUI3(data) {
  Q.doSuperConstructor(this, BarUI3, arguments)
}
BarUI3.prototype = {
  width: 450,
  height: 300,
  draw: function (ctx, scale, selected) {
  // this.data 就是绘制好的echart图表
    const offcanvas = this.data.getRenderedCanvas({
      pixelRatio: 1,
      backgroundColor: 'transparent'
    })
    ctx.drawImage(offcanvas, 0, 0, this.width, this.height)
  }
}
Q.extend(BarUI3, Q.BaseUI)
Q.BarUI2 = BarUI3

【优点】绘图方便，可以对接echart的任何图形
【缺点】
（1）该方式一个chart图只能用一次，如果要多个相同的chart图，需要重新定义Q.BaseUI
（2）qunee 对接的echart图有可能失真

4.2 用canvas 绘图技术绘制性能图

需要有canvas功底，自己用canvas绘制性能图或者柱子图。
部分代码示例

LineUI.prototype = {
  width: 450,
  height: 150,
  measure: function () {
    this.setMeasuredBounds(this.width, this.height)
  },
  draw: function (ctx, scale, selected) {
    drawLineChart(ctx, 450, 150, this.data, tupo)
  }
}

5、点击节点，相关节点高亮显示

参考官网示例 http://demo.qunee.com/#SpringLayouter%20Demo
官网示例只是高亮当前节点相关的一层节点。
实际业务中灵活变通，需要根据业务需求，自行保存需要高亮的节点。
【注意】多层级节点高亮时，有循环关联的节点，一定要找到最终高亮的那个节点，不然容易死循环。