zrender的使用

技术
/
canvas

zrender 的使用

# 1. 初始化

chartInit(){
    //再rem适配的时候，页面缩放，希望canvas也跟着缩放
  // 获取根元素font-seize
  let fontSize = getComputedStyle(window.document.documentElement)['font-size']
  // 计算缩放比例，以rem基准值为100为例，fontsize110px就代表放大1.1倍
  this.baseWidth = (fontSize.substring(0, fontSize.length - 2) / 100).toFixed(2)
  // 初始化zrender，这里的渲染模式是 svg，默认是canvas
  this.zr = zrender.init(document.getElementById(`zrender${this.index}`), {
    devicePixelRatio: 1,
    renderer: 'svg',
  })
  // 创建一个group
  this.allGroup = new zrender.Group()
  // 把group添加进去
  this.zr.add(this.allGroup)
  // 根据缩放去缩放整个最外面的allGroup，达到自适应的效果
  this.allGroup.attr({
        scale: [this.baseWidth, this.baseWidth]
      })
  // 为了方便数据变化时重绘，把画的逻辑抽出
   this.reload()
  //

}

# 2.绘画及重绘

reload() {
    // 先清空Group
      this.allGroup.removeAll()

      // 创建一个子group
      this.group = new zrender.Group()
      // 添加到最外面的group
      this.allGroup.add(this.group)
      // 这个是调用的方法，画不会变的路口的背景
      this.allGroup.add(drawUtil.drawRoad())
      // 画相位
      this.drawChart()
    },

# 3.画相位元素

// 把原有的group里的内容全清空，貌似有bug，直接this.group.removeAll第一个元素清不掉
// this.group.eachChild遍历然后单个清空也有问题，所以遍历+清空所有
this.group.eachChild((res) => {
  this.group.removeAll(res)
})
// 吧各种图形的参数抽出来，方便修改
let data = {
  lineArrow: [50, 80, 4, 20, 'white', Math.PI / 2],
  leftArrow: [40, 80, 4, 20, 'white', (Math.PI / 2) * 1],
  rightArrow: [60, 80, 4, 20, 'white', (Math.PI / 2) * 1],
  turnArrow: [40, 80, 4, 20, 'white', Math.PI / 2],
  peopleLine: [34, 28, 66, 28, 1],
}
// 画各种元素
this.group.add(drawUtil.drawLineArrow(...data.lineArrow))
this.group.add(drawUtil.drawLineArrow(...data.lineArrow))
this.group.add(drawUtil.drawTrunLeft(...data.leftArrow))
this.group.add(drawUtil.drawTrunRight(...data.rightArrow))
this.group.add(drawUtil.drawTrunAround(...item.turnArrow))

# 4.绘画的方法

import * as zrender from 'zrender'
// hover 框文本样式
var Text

var drawUtil = {
  // 画十字路口
  drawRoad() {
    let group = new zrender.Group()
    let roadLine = [
      [25, 0, 25, 20],
      [0, 25, 20, 25],
      [75, 0, 75, 20],
      [100, 25, 80, 25],
      [0, 75, 20, 75],
      [25, 102, 25, 80],
      [80, 75, 100, 75],
      [75, 102, 75, 80],
    ]
    let arcLine = [
      [20, 20, 5, 0, Math.PI / 2],
      [80, 20, 5, Math.PI / 2, Math.PI],
      [80, 80, 5, Math.PI, (Math.PI / 2) * 3],
      [20, 80, 5, (Math.PI / 2) * 3, Math.PI * 2],
    ]
    roadLine.map((v) => {
      group.add(drawUtil.drawLine(...v))
    })
    arcLine.map((v) => {
      group.add(drawUtil.drawArcLine(...v))
    })
    return group
  },
  // 绘制方块
  drawRect(fillColor, x, y, width, height) {
    var rect = new zrender.Rect({
      style: {
        fill: fillColor, //填充颜色
        stroke: 'rgba(40, 81, 136, 0.85098)', //描边颜色
      },
      shape: {
        x: x,
        y: y,
        width: width,
        height: height,
        r: [0], //圆角
      },
    })
    return rect
  },
  drawArcLine(cx, cy, r, startAngle, endAngle) {
    var arcLine = new zrender.Arc({
      shape: {
        cx: cx,
        cy: cy,
        r: r,
        startAngle: startAngle,
        endAngle: endAngle,
      },
      style: {
        stroke: 'white',
      },
    })
    return arcLine
  },
  // 绘制线条
  drawLine(x1, y1, x2, y2) {
    var line = new zrender.Line({
      shape: {
        x1: x1,
        y1: y1,
        x2: x2,
        y2: y2,
      },
      style: {
        stroke: 'white',
      },
    })
    // group.add(line);
    return line
  },
  // 绘制虚线
  drawDashedLine(x1, y1, x2, y2, color, lineWidth) {
    var line = new zrender.Line({
      shape: {
        x1: x1,
        y1: y1,
        x2: x2,
        y2: y2,
      },
      style: {
        lineDash: [5, 5],
        stroke: color,
        lineWidth: lineWidth,
      },
      zlevel: 100,
    })
    return line
  },
  // 初始化悬浮文本
  initHoverText(zr, fontSize) {
    Text = new zrender.Text({
      style: {
        fontSize: fontSize,
        textBackgroundColor: '#FFF',
        textBorderColor: '#000',
        textBorderWidth: 1,
        textBorderRadius: 2,
        textPadding: 5,
      },
      zlevel: 100,
    })
    zr.add(Text)
    Text.hide()
  },
  // 绘制横向文本
  drawHorizontalText(str, px, py, fontSize) {
    let group = new zrender.Group()
    var text = new zrender.Text({
      style: {
        fill: '#9ab8e3', // '#cae0ff'
        text: str,
        fontSize: fontSize,
        textFill: '#9ab8e3',
        textBackgroundColor: 'transparent',
        width: 200,
        textAlign: 'center',
        overflow: 'break',
      },
    })
    group.add(text)
    group.attr('position', [px, py])
    return group
  },
  // 绘制纵向文本
  drawVerticalText(str, dx, dy, fontSize) {
    let group = new zrender.Group()

    for (var i = 0; i < str.length; i++) {
      var text = new zrender.Text({
        style: {
          text: str.charAt(i),
          fontSize: fontSize,
          textFill: '#FF4949',
          textBackgroundColor: '#FFF',
        },
      })
      let y = 14 * i
      text.attr('position', [0, y])
      group.add(text)
    }
    group.attr('position', [dx, dy])
    return group
  },
  // 绘制上箭头
  drawUpArrow(x, y, r, height, color) {
    let group = new zrender.Group()
    let isogon = new zrender.Isogon({
      shape: {
        x: x,
        y: y,
        r: r, //认识半径
        n: 3,
      },
      style: {
        fill: color,
      },
    })
    group.add(isogon)
    let rect = new zrender.Rect({
      style: {
        fill: color, //填充颜色
        stroke: color, //描边颜色
      },
      shape: {
        x: x - r / 4,
        y: y - r / 2,
        width: r / 2,
        height: height,
        r: [0], //圆角
      },
    })
    group.add(rect)
    return group
  },
  // 绘制右箭头
  drawLineArrow(x, y, r, height, color, rotation) {
    let group = new zrender.Group()
    let isogon = new zrender.Isogon({
      shape: {
        x: x,
        y: y,
        r: r,
        n: 3,
      },
      style: {
        fill: color,
      },
    })
    // 三角形旋转
    let rotationPI = (Math.PI * 2) / 4 / 3
    isogon.attr('rotation', [rotationPI])
    isogon.attr('origin', [x, y])
    group.add(isogon)
    let rect = new zrender.Rect({
      style: {
        fill: color, //填充颜色
        stroke: color, //描边颜色
      },
      shape: {
        x: x - r / 2 - height,
        y: y - r / 12,
        width: height,
        height: r / 6,
        r: [0], //圆角
      },
    })
    group.add(rect)
    rotation
      ? group.attr({
          rotation: [rotation],
          origin: [x, y],
        })
      : ''
    return group
  },
  // 右转箭头
  drawTrunRight(x, y, r, height, color, rotation) {
    let group = new zrender.Group()
    let isogon = new zrender.Isogon({
      shape: {
        x: x,
        y: y - 7.5,
        r: r,
        n: 3,
      },
      style: {
        fill: color,
      },
    })
    let rotationPI = ((Math.PI * 2) / 8) * 4
    isogon.attr('rotation', [rotationPI])
    isogon.attr('origin', [x, y])
    group.add(isogon)
    let rect = new zrender.Rect({
      style: {
        fill: color, //填充颜色
        stroke: color, //描边颜色
      },
      shape: {
        x: x - r / 2 - height,
        y: y - r / 12,
        width: height + r / 2,
        height: r / 6,
        r: [0], //圆角
      },
    })
    group.add(rect)
    let rect2 = new zrender.Rect({
      style: {
        fill: color, //填充颜色
        stroke: color, //描边颜色
      },
      shape: {
        x: x,
        y: y,
        width: 1,
        height: 5,
        r: [0], //圆角
      },
    })
    group.add(rect2)
    rotation
      ? group.attr({
          rotation: [rotation],
          origin: [x, y],
        })
      : ''
    return group
  },
  // 左转箭头
  drawTrunLeft(x, y, r, height, color, rotation) {
    let group = new zrender.Group()
    let isogon = new zrender.Isogon({
      shape: {
        x: x,
        y: y - 7.5,
        r: r,
        n: 3,
      },
      style: {
        fill: color,
      },
    })
    let rotationPI = ((Math.PI * 2) / 8) * 8
    isogon.attr('rotation', [rotationPI])
    isogon.attr('origin', [x, y])
    group.add(isogon)
    let rect = new zrender.Rect({
      style: {
        fill: color, //填充颜色
        stroke: color, //描边颜色
      },
      shape: {
        x: x - r / 2 - height,
        y: y - r / 12,
        width: height + r / 2,
        height: r / 6,
        r: [0], //圆角
      },
    })
    group.add(rect)
    let rect2 = new zrender.Rect({
      style: {
        fill: color, //填充颜色
        stroke: color, //描边颜色
      },
      shape: {
        x: x - 1,
        y: y - 5,
        width: 1,
        height: 5,
        r: [0], //圆角
      },
    })
    group.add(rect2)
    rotation
      ? group.attr({
          rotation: [rotation],
          origin: [x, y],
        })
      : ''
    return group
  },
  // 调头箭头
  drawTrunAround(x, y, r, height, color, rotation) {
    let group = new zrender.Group()
    let isogon = new zrender.Isogon({
      shape: {
        x: x + 5,
        y: y - 7.5,
        r: r,
        n: 3,
      },
      style: {
        fill: color,
      },
    })
    let rotationPI = ((Math.PI * 2) / 8) * 2
    isogon.attr('rotation', [rotationPI])
    isogon.attr('origin', [x, y])
    group.add(isogon)
    let rect = new zrender.Rect({
      style: {
        fill: color, //填充颜色
        stroke: color, //描边颜色
      },
      shape: {
        x: x - r / 2 - height,
        y: y - r / 12,
        width: height + r / 2,
        height: r / 6,
        r: [0], //圆角
      },
    })
    group.add(rect)
    let rect2 = new zrender.Rect({
      style: {
        fill: color, //填充颜色
        stroke: color, //描边颜色
      },
      shape: {
        x: x - 1,
        y: y - 5,
        width: 1,
        height: 5,
        r: [0], //圆角
      },
    })
    group.add(rect2)
    let rect3 = new zrender.Rect({
      style: {
        fill: color, //填充颜色
        stroke: color, //描边颜色
      },
      shape: {
        x: x - 1,
        y: y - 5,
        width: -5,
        height: -1,
        r: [0], //圆角
      },
    })
    group.add(rect3)
    rotation
      ? group.attr({
          rotation: [rotation],
          origin: [x, y],
        })
      : ''
    return group
  },
  drawPeople() {
    var path = new zrender.Path(
      zrender.path.createFromString(
        'M539.282416 283.737123q-29.101243 0-55.019538-11.367673t-45.015986-30.465364-30.465364-45.015986-11.367673-55.019538 11.367673-55.019538 30.465364-45.015986 45.015986-30.465364 55.019538-11.367673 55.019538 11.367673 45.015986 30.465364 30.010657 45.015986 10.912966 55.019538-10.912966 55.019538-30.010657 45.015986-45.015986 30.465364-55.019538 11.367673zM741.172291 411.055062q24.554174 18.188277 40.468917 42.287744t15.914742 48.653641l0 90.031972q0 15.460036-17.73357 23.64476t-39.104796 8.184725-39.104796-7.730018-17.73357-25.008881l0-38.195382q0-13.641208-8.184725-20.461812t-16.369449-11.367673q-9.094139-4.547069-20.916519 4.092362t-11.82238 29.55595l0 240.085258q0 21.825933 14.550622 40.01421t35.46714 33.648313q18.188277 12.731794 30.920071 25.463588l30.010657 30.010657q5.456483 5.456483 4.092362 16.824156t-7.730018 24.099467-15.914742 25.463588-21.371226 20.007105-24.099467 7.275311-23.190053-11.82238q-16.369449-17.278863-26.373002-27.737123t-17.73357-18.642984-15.914742-15.460036-20.007105-20.007105q-23.64476-23.64476-40.468917-60.476021t-16.824156-73.207815l0-73.662522q-10.912966 13.641208-18.642984 21.825933t-17.73357 27.282416q-3.637655 7.275311-7.275311 19.097691t-6.820604 24.554174-5.001776 25.463588-1.818828 21.825933l0 75.48135q0 17.278863-17.73357 25.918295t-39.104796 8.184725-39.104796-10.003552-17.73357-28.646536l0-66.387211q0-35.46714 10.912966-62.749556t24.554174-58.202487q18.188277-41.833037 26.827709-67.296625t13.186501-35.46714q9.094139-20.916519 9.094139-37.285968l0-29.101243q-10.003552 6.365897-16.824156 11.82238t-18.642984 20.007105q-11.82238 13.641208-24.099467 17.73357t-38.650089 4.092362l-59.111901 0q-21.825933 0-32.284192-17.73357t-10.003552-38.650089 11.367673-38.650089 31.829485-17.73357l54.564831 0q10.912966 0 17.73357-2.728242t12.731794-8.184725 12.731794-12.731794 16.824156-16.369449q12.731794-10.912966 25.918295-32.284192t25.008881-43.197158q13.641208-25.463588 26.373002-54.564831 19.097691 0.909414 35.46714 1.818828 14.550622 0.909414 29.55595 1.364121t25.008881 0.454707 22.735346-0.454707 24.554174-1.364121q13.641208-0.909414 28.191829-1.818828 24.554174 15.460036 47.28952 28.191829 19.097691 11.82238 38.195382 22.735346t29.101243 18.188277z',
        {
          style: {
            fill: 'white',
          },
        }
      )
    )
    var rect = path.getBoundingRect()
    var m = rect.calculateTransform({ x: 2.6, y: 2.6, width: 1, height: 1 })
    path.applyTransform(m)
    path.scale = [16, 16]
    return path
  },
  // 人行道
  drawPeopleRoad(x1, y1, x2, y2, type) {
    let group = new zrender.Group()
    var line = new zrender.Line({
      shape: {
        x1: x1,
        y1: y1,
        x2: x2,
        y2: y2,
      },
      style: {
        lineDash: [3, 2],
        stroke: 'white',
        lineWidth: 1,
      },
      zlevel: 100,
    })
    group.add(line)
    let leftArrow = new zrender.Polyline({
      style: {
        stroke: 'white',
        lineWidth: 1,
      },
      shape: {
        points: [
          [x1, y1 - 3],
          [x1 - 3, y1],
          [x1, y1 + 3],
        ], //坐标集合
      },
    })
    leftArrow.attr('rotation', type === 2 ? [(Math.PI / 2) * 3] : 0)
    leftArrow.attr('origin', [x1, y1])
    group.add(leftArrow)
    let rightArrow = new zrender.Polyline({
      style: {
        stroke: 'white',
        lineWidth: 1,
      },
      shape: {
        points: [
          [x2, y2 - 3],
          [x2 + 3, y2],
          [x2, y2 + 3],
        ], //坐标集合
      },
    })
    rightArrow.attr('rotation', type === 2 ? [(Math.PI / 2) * 3] : 0)
    rightArrow.attr('origin', [x2, y2])
    group.add(rightArrow)

    return group
  },

  // 绘制×
  drawX(Obj, Color, fontSize) {
    return new zrender.Text({
      style: {
        text: '×',
        fontSize: fontSize,
        textFill: Color,
      },
      position: [Obj.x - 7, Obj.y - 11],
    })
      .on('mouseover', function () {
        Text.show()

        Text.attr('position', [Obj.x, Obj.y])
        Text.attr({
          style: {
            text: Obj.txt,
          },
        })
      })
      .on('mouseout', function () {
        Text.hide()
      })
  },
}

export default drawUtil
JS图形计算

JS图形计算
PDF下载

PDF下载

PDF 下载