图片放大, 拖动的例子

最近项目上搞一个图片缩放的功能, 闲来分享出来, 感兴趣的可以直接用;

支持对图片自动居中；增加标记;

支持缩放, 拖动; 

图片来源可以是网络图片 , 也可以是本地选取的图片(--通过URL.createObjectURL(file) 方法创建一个链接即可)

以下是效果图:

相关源码:

import {
  getDevicePixelRatio,
  returnFalse,
  normalize,
  rotate,
  isPointInBlock,
  image2Base64Data
} from './utils'
import { addEventListener, removeEventListener, defaultWheelDelta, isDomLevel2 } from './eventProxy'
import EXIF from 'exif-js'

/**
 * 一个支持拖动, 缩放的简易图片预览插件, 注册事件部分(on, off, dispatchEvent) 暂无此类需求不做实现;
 * 总体思路:
 *  把所有要绘制的物体如图片, 标记当作是一个个绘制对象, 将这一个个对象添加到一个场景中, 最后绘制这个场景;
 *    (扩展: 抽象来说, 这个场景可以设计一个独立的坐标系, 场景中的所有物体相对于这个坐标系定位, 设置尺寸;
 *          而如果有多个场景 场景之间互相独立, 可以对某一场景整体设置缩放, 平移; 又可以对另一场景整体设置旋转;
 *          svg的 g标签便是这样的一个例子;
 *      )
 *
 *  首先需要计算出图片和标记在场景中的定位和尺寸, 图片需要铺满并自动上下左右居中, 因此第一步先算出图片具体的缩放系数和尺寸, 再用这个缩放系数计算出标记的位置;
 *  由上, 完成了往场景中添加物体操作;
 *  再则在绘图时由于标记是位于图片之上的, 所以要先绘制图片, 再绘制标记(为了区分顺序, 在添加物体时增加了 zIndex属性);
 *  由上, 完成了绘制场景的操作;
 *
 *  在缩放和拖动时, 需要更新场景中物体的位置和大小, 再执行重绘
 *    在缩放操作时, 对场景中的所有物体应用缩放和偏移;
 *    在拖动操作时, 对场景中每一个物体应用偏移;
 *
 *  往场景中增加标记时, 根据标记对应的图片, 获取到图片对应的缩放系数和即时位置, 计算出标记的即时位置, 然后重绘;
 */
export default class ImagePreview {
  constructor(selector, options = { images: [] }) {
    let char = 'abcdefghijklmnopqrstuvwxyz'
    this.selector = selector
    this.container = document.querySelector(selector)
    this.domId = char[(Math.random() * char.length) | 0] + Math.random() * 1409
    this.canvas = null
    this.canvas2dContext = null
    this.dpr = getDevicePixelRatio()
    this.width = 0
    this.height = 0

    this.scene = []
    this.images = options.images || []
    this.marks = []
    this.defaultScaleExtent = options.scaleExtent || [1, 10]
    this.scaleExtent = [].concat(this.defaultScaleExtent)
    this.markStyle = options.markStyle || { stroke: '#0D9EFB', fill: 'transparent', strokeWidth: 1 }
    this.state = 0
    this.lockState = 0
    this.uuid = 10000
    this.transform = {
      k: 1
    }
    // this.eventProxy = new EventProxy(selector)
    this.drag = {}
    this.scrollHandler = this.scrollHandler.bind(this)
    this.moveStart = this.moveStart.bind(this)
    this.moveEnd = this.moveEnd.bind(this)
    this.moving = this.moving.bind(this)

    if (options.images.length) {
      this.init(options.images)
    }
  }

  init(images) {
    var domRect = this.container.getBoundingClientRect()
    var canvas = document.createElement('canvas')

    canvas.width = domRect.width * this.dpr
    canvas.height = domRect.height * this.dpr
    canvas.id = this.domId

    var canvasStyle = canvas.style
    if (canvasStyle) {
      canvasStyle.onselectStart = returnFalse // 避免页面选中的尴尬
      canvasStyle['-webkit-user-select'] = 'none'
      canvasStyle['user-select'] = 'none'
      canvasStyle['-webkit-touch-callout'] = 'none'
      canvasStyle['-webkit-tap-highlight-color'] = 'rgba(0,0,0,0)'
      canvasStyle['margin'] = 0
      canvasStyle['padding'] = 0
      canvasStyle['border-width'] = 0
      canvasStyle['transform'] = `scale(${1 / this.dpr})`
      canvasStyle['transform-origin'] = `0px 0px`
    }

    this.canvas = canvas
    this.width = canvas.width
    this.height = canvas.height
    this.canvas2dContext = canvas.getContext('2d')
    this.container.appendChild(canvas)

    if (images && images.length) {
      this.initScene(images)
      this.initEvent()
    }
  }

  initScene(newImages) {
    var allElements
    if (newImages) {
      allElements = newImages || []

      this.scaleExtent = this.defaultScaleExtent
      // this.eventProxy = null
      this.drag = {}
      this.scene = []
      this.images = allElements
      this.resetTransform()
    } else {
      allElements = this.images || []
    }

    this.state = 0
    this.lockState = allElements.length
    this.marks = []

    var current
    for (var i = 0, len = allElements.length; i < len; i++) {
      current = allElements[i]
      if (current && current['url']) {
        //
        current['scaleFactor'] = {}
        current['pid'] = this.getUUID()

        // 将图片添加到场景中
        this.addImage(current, current['pid'], current.rotate || 0)
        // 如果有标记, 将标记也添加待绘制任务中
        if (current['shapes']) {
          var _this = this
          current.shapes.forEach(function(shape) {
            _this.marks.push({
              shape: shape,
              pid: current['pid'],
              scaleFactor: current['scaleFactor'],
              angle: current.rotate || 0
            })
          })
        }
      }
    }
  }

  getUUID() {
    return ++this.uuid
  }

  // 计算图片缩放系数, 并将图片上下左右居中;
  calcScaleFactor(
    output = {},
    targetRect = {  1, height: 1 },
    sourceRect = {  1, height: 1 }
  ) {
    var t_width = targetRect.width
    var t_height = targetRect.height
    var s_width = sourceRect.width
    var s_height = sourceRect.height
    var t_x, t_y, k_x, k_y, k_f

    // 如果图片相对较小, 不放大, 只居中；如果图片相对较大, 先缩小再居中
    if (s_width > t_width || s_height > t_height) {
      k_x = t_width / s_width
      k_y = t_height / s_height
      k_f = k_x > k_y ? k_y : k_x

      t_x = (t_width - s_width * k_f) / 2
      t_y = (t_height - s_height * k_f) / 2

      output.k = k_f
      output.width = s_width * k_f
      output.height = s_height * k_f
      output.rawWidth = s_width
      output.rawHeight = s_height
      output.tx = t_x
      output.ty = t_y
    } else {
      k_f = 1
      t_x = (t_width - s_width) / 2
      t_y = (t_height - s_height) / 2

      output.k = k_f
      output.width = s_width
      output.height = s_height
      output.rawWidth = s_width
      output.rawHeight = s_height
      output.tx = t_x
      output.ty = t_y
    }
  }

  // 辅助方法: 纠正到原图;
  getExifOrientation(img) {
    return new Promise(function(resolve, reject) {
      EXIF.getData(img, function() {
        try {
          // 借助 EXIF 读取图片元信息, 获取 Orientation:图片方向
          var orient = EXIF.getTag(this, 'Orientation')
          // console.log(EXIF.getAllTags(this))
          switch (orient) {
            // 不旋转
            case 1:
              resolve(0)
              break
            // 旋转 -90度
            case 6:
              resolve(90)
              break
            // 旋转 90度
            case 8:
              resolve(-90)
              break
            // 旋转 180度
            case 3:
              resolve(-180)
              break
            default:
              resolve(0)
              break
          }
        } catch (e) {
          resolve(0)
        }
      })
    })
  }

  /**
   * imageInfo: {
   *              url: 图片地址,
   *            }
   */
  addImage(imageInfo = {}, pid, angle) {
    // width, height 自定义的下载图片尺寸;
    // url 图片地址
    // image Image() 对象的实例; 可以直接拿来绘制不需要下载
    var { url, image, width, height, doNotRotate } = imageInfo
    var _this = this
    var img

    if (!image) {
      img = new Image()
      img.crossOrigin = 'anonymous'
      img.src = url
      img.onload = function(e) {
        width = width || this.width
        height = height || this.height

        if (doNotRotate) {
          _this.addImageToScene(img, imageInfo)
          return
        }
        // 由于 .jpg格式的图片会有自动旋转的 bug, 需要对图片纠正到原图的方向, PNG格式的图片暂未验证
        // 然后再依据 angle(也即 Ocr给出的旋转角度) 对图片再次旋转;
        _this.getExifOrientation(img).then(function(rotate) {
          // 无需旋转, 图片正常
          if (rotate === 0) {
            if (angle) {
              // 存储 base64格式的图片数据;
              var base64Switch = image2Base64Data(img, {
                width,
                height,
                rotate: angle
              })
              var newImg = new Image()
              newImg.src = base64Switch.result
              newImg.width = base64Switch.width
              newImg.height = base64Switch.height
              newImg.onload = function() {
                _this.addImageToScene(newImg, imageInfo)
              }
            } else {
              _this.addImageToScene(img, imageInfo)
            }
          } else {
            // 将图片旋转至原图, 并存储 base64格式的图片数据;
            var base64Switch = image2Base64Data(img, {
              width,
              height,
              rotate: rotate
            })

            // 得到纠正到正确角度的原图
            var newImg = new Image()
            newImg.src = base64Switch.result
            newImg.width = base64Switch.width
            newImg.height = base64Switch.height
            newImg.onload = function() {
              // 如果 ocr 识别结果需要对图片应用旋转
              if (angle) {
                var finalBase64Image = image2Base64Data(newImg, {
                   newImg.width,
                  height: newImg.height,
                  rotate: angle
                })

                var finalImg = new Image()
                finalImg.src = finalBase64Image.result
                finalImg.width = finalBase64Image.width
                finalImg.height = finalBase64Image.height
                finalImg.onload = function() {
                  _this.addImageToScene(finalImg, imageInfo)
                }
              } else {
                _this.addImageToScene(newImg, imageInfo)
              }
            }
          }
        })
      }

      img.onerror = function(e) {
        _this.updateState()
      }
    } else {
      // 取消对 Image实例的支持;
    }
  }

  rotateImage(pid, rotate) {
    var sourceImg, imageInfo, current, cur
    for (var i = 0; i < this.scene.length; i++) {
      cur = this.scene[i]
      if ((cur.type === 'image' && cur.pid === pid) || cur.url === pid) {
        sourceImg = cur.image
        break
      }
    }

    for (var k = 0; k < this.images.length; i++) {
      current = this.images[k]
      if (current.url === pid || current.pid === pid) {
        imageInfo = current
        break
      }
    }

    // 对图片进行旋转, 并重新计算图片的缩放系数: this.image[i].scaleFactor
    // 并且清除场景中的图片和标记, 将图片添加到场景中
    if (sourceImg && imageInfo && rotate % 360 !== 0) {
      var base64Switch = image2Base64Data(sourceImg, {
         sourceImg.width,
        height: sourceImg.height,
        rotate: rotate
      })

      var newImg = new Image()
      var _this = this
      newImg.src = base64Switch.result
      newImg.width = base64Switch.width
      newImg.height = base64Switch.height
      newImg.onload = function() {
        //
        _this.state = 0
        _this.resetTransform()
        _this.clearScene()
        // 重绘:::
        _this.addImageToScene(newImg, imageInfo)
      }
    }
  }

  //
  addImageToScene(img, imageInfo) {
    // 初始化缩放系数, 使图片自动铺满画布并上下左右居中
    this.calcScaleFactor(
      imageInfo['scaleFactor'],
      {  this.width, height: this.height },
      {  img.width, height: img.height }
    )
    // console.log('图片下载完毕:::', width, height)
    // console.log('准备计算缩放系数::', _this.width, _this.height)

    // 获取到缩放系数
    var scaleFactor = imageInfo.scaleFactor
    var pid = imageInfo.pid

    this.scene.push({
      type: 'image',
      actions: null,
      image: img,
      pid: pid,
      rotate: rotate,
      shape: {
        x: scaleFactor.tx,
        y: scaleFactor.ty,
         scaleFactor.width,
        height: scaleFactor.height
      },
      rawShape: {
        x: scaleFactor.tx,
        y: scaleFactor.ty,
         scaleFactor.width,
        height: scaleFactor.height
      },
      zIndex: 1,
      uid: this.getUUID()
    })

    this.updateState()
  }

  /**
   * shape: {
   *    type: "rect", 形状,矩形;
   *    x: 100, 形状相对原图 x方向坐标
   *    y: 100, 形状相对原图 y方向坐标
   *     100, 形状本身的宽度
   *    height: 100 形状本身的高度
   * },
   * scaleFactor: {
   *    k: 缩放系数,
   *     缩放后的宽度,
   *    height: 缩放后的高度,
   *    rawWidth: 原始宽度,
   *    rawHeight: 原始高度
   *    tx: x方向的偏移,
   *    ty: y方向的偏移
   * }
   */
  addShape(shape, scaleFactor, pid) {
    var k = scaleFactor.k
    var x = scaleFactor.tx + shape.x * k
    var y = scaleFactor.ty + shape.y * k
    var width = Math.round(shape.width * k)
    var height = Math.round(shape.height * k)

    this.scene.push({
      type: 'rect',
      actions: null,
      pid: pid,
      origin: {
        ...shape
      },
      shape: {
        x: x,
        y: y,
         width,
        height: height
      },
      rawShape: {
        x: x,
        y: y,
         width,
        height: height
      },
      zIndex: 2,
      uid: this.getUUID()
    })
  }

  updateState() {
    this.state++
    // 等待所有图片下载完成, 将标记也添加到场景
    if (this.state === this.lockState) {
      // 将标记添加到场景中
      var allElements = this.marks,
        current

      for (var i = 0, len = allElements.length; i < len; i++) {
        current = allElements[i]
        this.addShape(current.shape, current.scaleFactor, current['pid'])
      }

      this.renderPass()
    }
  }

  /** 由于 canvas是有状态的, 设置状态后后面的绘制会一直生效, 可以利用这一点对做性能优化;
   *    在绘图时, 要有效利用这一机制, 避免频繁的状态切换; 在具体绘制图形时, 对图形进行分组, 比如:
   *    一个堆叠柱状图, 有N多的柱形(分3类: 从深蓝->浅蓝, 从棕色->浅黄, 从亮蓝->天蓝, 并分别有不同线框), 如果一个个绘制会频繁的设置渐变和描边属性, 可以对其先分类成
   *      深蓝 -> 浅蓝, 框 1
   *      棕色 -> 浅黄, 框 2
   *      亮蓝 -> 天蓝, 框 3
   *    这三组图形, 然后只需设置三次描边属性, 创建三个渐变即可;
   */
  renderPass() {
    this.scene.sort(function(pre, next) {
      return pre.zIndex > next.zIndex ? 1 : -1
    })

    // var group = { index: 0 }
    // var initZindex = 0
    // this.scene.forEach(function(shape) {
    //   if (shape.zIndex > initZindex) {
    //     initZindex = shape.zIndex

    //     group.index++
    //     group[group.index] = {}
    //   }

    //   if (group[group.index][shape.type]) {
    //     group[group.index][shape.type].push(shape)
    //   } else {
    //     group[group.index][shape.type] = [shape]
    //   }
    // })
    this.clearRect(0, 0, this.width, this.height)

    if (this.scene.length) {
      var style = this.markStyle
      this.canvas2dContext.strokeStyle = style.stroke
      this.canvas2dContext.lineWidth = style.strokeWidth
      this.canvas2dContext.fillStyle = style.fill
    }

    var current
    for (var i = 0, len = this.scene.length; i < len; i++) {
      current = this.scene[i]
      switch (current.type) {
        case 'rect':
          current = current.shape
          this.canvas2dContext.beginPath()
          this.canvas2dContext.rect(current.x, current.y, current.width, current.height)
          this.canvas2dContext.stroke()
          this.canvas2dContext.fill()
          this.canvas2dContext.closePath()
          break
        case 'image':
          this.canvas2dContext.drawImage(
            current.image,
            current.shape.x,
            current.shape.y,
            current.shape.width,
            current.shape.height
          )
          break
        default:
          break
      }
    }
  }

  // 事件初始化
  initEvent() {
    var support =
      'onwheel' in document.createElement('div')
        ? 'wheel' // 各个厂商的高版本浏览器都支持"wheel"
        : document.onmousewheel !== undefined
        ? 'mousewheel' // Webkit 和 IE一定支持"mousewheel"
        : 'DOMMouseScroll' // 低版本firefox
    addEventListener(this.canvas, support, this.scrollHandler)
    addEventListener(this.canvas, 'mousedown', this.moveStart)
  }

  // 设置光标样式: 预留代码,暂无此需求;
  setCursorStyle(style, isDocument) {
    if (style) {
      if (isDocument) {
        document.body.style.cursor = style
      } else {
        this.canvas.style.cursor = style
      }
    }
  }

  moveStart(e) {
    this.drag.lastX = e.x
    this.drag.lastY = e.y
    this.drag.isDrag = true
    this.setCursorStyle('move')
    addEventListener(document.body, 'mousemove', this.moving)
    addEventListener(this.canvas, 'mouseup', this.moveEnd)
    addEventListener(document.body, 'mouseup', this.moveEnd)
  }
  moveEnd() {
    this.drag.isDrag = false
    this.setCursorStyle('default')
    removeEventListener(document.body, 'mousemove', this.moving)
    removeEventListener(this.canvas, 'mouseup', this.moveEnd)
    removeEventListener(document.body, 'mouseup', this.moveEnd)
  }

  // 拖动
  moving(e) {
    var _this = this
    requestAnimationFrame(function() {
      var moveX = e.x - _this.drag.lastX
      var moveY = e.y - _this.drag.lastY
      var speed = _this.dpr
      // 对场景中的所有物体进行平移
      _this.scene.forEach(function(item) {
        _this.translateRect(item.shape, item.shape, { x: moveX * speed, y: moveY * speed })
      })

      _this.renderPass()

      _this.drag.lastX = e.x
      _this.drag.lastY = e.y

      _this = null
    })
  }

  // 对整个画布缩放
  zoom(isZoomMax, zoomStep = 0.5) {
    var _this = this
    var step = isZoomMax ? zoomStep : -zoomStep
    var lastK = _this.transform.k
    var k, offsetDis

    _this.transform.k += step
    _this.transform.k = normalize(_this.transform.k, _this.scaleExtent)

    // 简化实现, 直接应用画布中心点进行缩放
    var imgViewCenterToCanvas = { x: this.width / 2, y: this.height / 2 }

    k = _this.transform.k / lastK
    offsetDis = _this.calcOffset(imgViewCenterToCanvas, k)

    // 先缩放, 再平移
    _this.scene.forEach(function(item) {
      _this.scaleRect(item.shape, item.shape, k)
      _this.translateRect(item.shape, item.shape, {
        x: -offsetDis.x,
        y: -offsetDis.y
      })
    })

    _this.renderPass()
  }

  // 计算多个矩形的上下边界
  calcBounding(rects) {
    var i = 0,
      len = rects.length,
      left,
      right,
      top,
      bottom,
      cur
    for (; i < len; i++) {
      cur = rects[i]
      left = cur.x > left ? left : cur.x
      right = cur.x + cur.width < right ? right : cur.x + cur.width
      top = cur.y > top ? top : cur.y
      bottom = cur.y + cur.height < bottom ? bottom : cur.y + cur.height
    }
    return len ? { x: left, y: top,  right - left, height: bottom - top } : null
  }

  // 将图片局部位置缩放至中心
  zoomToCenter(block) {
    var halfW = this.width * 0.5,
      halfH = this.height * 0.5,
      k,
      kw,
      kh,
      cur,
      lastK,
      targetK

    // 块的中心点坐标
    var pCenter = { x: block.x + block.width / 2, y: block.y + block.height / 2 }
    lastK = this.transform.k

    // (block.width / lastK) 块的实际大小, (this.width * 0.6) 缩放到的位置; 以此计算出块放大的倍率
    kw = (this.width * 0.4) / (block.width / lastK)
    kh = (this.height * 0.4) / (block.height / lastK)

    targetK = Math.min(kw, kh)
    targetK = normalize(targetK, this.scaleExtent)
    // 计算出实时放大倍率
    k = targetK / lastK

    // 方式一: 应用缩放和平移
    this.transform.k = targetK
    for (var i = 0; i < this.scene.length; i++) {
      cur = this.scene[i]

      this.scaleRect(cur.shape, cur.shape, k)
      this.translateRect(cur.shape, cur.shape, {
        x: -pCenter.x * k + halfW,
        y: -pCenter.y * k + halfH
      })
    }

    // 方式二: 仅应用平移
    // for (var i = 0; i < this.scene.length; i++) {
    //   cur = this.scene[i]
    //   this.translateRect(cur.shape, cur.shape, {
    //     x: -pCenter.x + halfW,
    //     y: -pCenter.y + halfH
    //   })
    // }

    this.renderPass()
  }

  // 缩放
  scrollHandler(e) {
    var _this = this
    requestAnimationFrame(function() {
      var eventToCanvas, canvasBoundingRect
      // 如果支持 offsetX, 且为有效的值;
      if (e.offsetX) {
        eventToCanvas = { x: e.offsetX, y: e.offsetY }
      } else {
        canvasBoundingRect = _this.canvas.getBoundingClientRect()
        eventToCanvas = { x: e.x - canvasBoundingRect.x, y: e.y - canvasBoundingRect.y }
      }
      var offsetDis, k
      var lastK = _this.transform.k

      _this.transform.k += defaultWheelDelta(e)
      _this.transform.k = normalize(_this.transform.k, _this.scaleExtent)

      k = _this.transform.k / lastK
      offsetDis = _this.calcOffset(eventToCanvas, k)

      // 对场景中所有物体进行缩放及平移
      _this.scene.forEach(function(item) {
        // 备选: 只对鼠标"选中"的物体进行缩放及平移
        // if (isPointInBlock(item.shape, eventToCanvas)) {
        // 先缩放, 再平移
        _this.scaleRect(item.shape, item.shape, k)
        _this.translateRect(item.shape, item.shape, {
          x: -offsetDis.x,
          y: -offsetDis.y
        })
      })

      _this.renderPass()
      _this = null
    })

    if (isDomLevel2()) {
      e.preventDefault()
      e.stopPropagation()
    } else {
      e.returnValue = false
      e.cancelBubble = true
    }

    return false
  }

  // 计算缩放偏移的距离
  calcOffset(point, scale) {
    var x = point.x * scale - point.x
    var y = point.y * scale - point.y
    return {
      x: x,
      y: y
    }
  }

  subVector2(output, vector1, vector2) {
    output.x = vector1.x - vector2.x
    output.y = vector1.y - vector2.y
  }

  translateRect(output, block, translate) {
    output.x = block.x + translate.x
    output.y = block.y + translate.y
  }

  scaleRect(output, block, scale) {
    output.width = block.width * scale // Math.round(block.width * scale)
    output.height = block.height * scale // Math.round(block.height * scale)
    output.x = block.x * scale // Math.round(block.x * scale)
    output.y = block.y * scale // Math.round(block.y * scale)
  }

  /**
   * 一个矩形绕点旋转后的形状
   */
  rotateRect(output, block, rotatePoint, angel) {
    var ltp = { x: block.x, y: block.y }
    var rtp = { x: block.x + block.width, y: block.y }
    var lbp = { x: block.x, y: block.y + block.height }
    var rbp = { x: block.x + block.width, y: block.y + block.height }

    output.lt = rotate(ltp, rotatePoint, angel)
    output.rt = rotate(rtp, rotatePoint, angel)
    output.lb = rotate(lbp, rotatePoint, angel)
    output.rb = rotate(rbp, rotatePoint, angel)
  }

  clearRect(x, y, width, height) {
    this.canvas2dContext.clearRect(x, y, width, height)
  }

  clearAllEvent() {
    // 清除挂载的DOM事件
    // from: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/wheel_event
    var support =
      'onwheel' in document.createElement('div')
        ? 'wheel' // 各个厂商的高版本浏览器都支持"wheel"
        : document.onmousewheel !== undefined
        ? 'mousewheel' // Webkit 和 IE一定支持"mousewheel"
        : 'DOMMouseScroll' // 低版本firefox
    removeEventListener(this.canvas, support, this.scrollHandler)
    removeEventListener(this.canvas, 'mousedown', this.moveStart)

    removeEventListener(document.body, 'mousemove', this.moving)
    removeEventListener(this.canvas, 'mouseup', this.moveEnd)
    removeEventListener(document.body, 'mouseup', this.moveEnd)

    // 清除挂载的自定义事件
    // this.eventProxy.disposeAll()
  }

  destroy() {
    // 清除事件
    this.clearAllEvent()
    // 清除DOM
    this.container.removeChild(this.canvas)

    // 清除属性
    for (var key in this) {
      delete this[key]
    }
  }

  on(eventName, callbacl) {}
  off(eventName, callback) {}
  dispatchEvent(eventName) {}

  // 重置所有形状回到初始位置, 重置缩放
  reset() {
    this.scene.forEach(function(item) {
      item.shape.x = item.rawShape.x
      item.shape.y = item.rawShape.y
      item.shape.width = item.rawShape.width
      item.shape.height = item.rawShape.height
    })
    this.resetTransform()
    this.renderPass()
  }

  resetTransform() {
    this.transform.k = 1
  }

  clear() {
    this.scene.length = 0
    this.images = []
    this.scaleExtent = this.defaultScaleExtent
    this.state = 0
    this.lockState = 0
    // this.eventProxy = null
    this.drag = {}

    this.resetTransform()
    this.clearAllEvent()
    this.clearRect(0, 0, this.width, this.height)
  }
  clearScene() {
    this.scene.length = 0
    this.marks.length = []
  }
  relayout() {
    this.resetTransform()
    var domRect = this.container.getBoundingClientRect()

    this.width = domRect.width * this.dpr
    this.height = domRect.height * this.dpr
    this.canvas.width = domRect.width * this.dpr
    this.canvas.height = domRect.height * this.dpr

    if (this.images && this.images.length) {
      // 偷了个懒... 这里重新计算图片的位置, 标记的位置; 然后重新渲染场景即可
      this.clearScene()
      this.initScene()
    }
  }

  removeImage(imgId) {
    if (!imgId) {
      this.images.length = 0
      this.scene.length = 0

      this.renderPass()
      return
    }

    var uid, current

    for (var i = this.images.length - 1; i >= 0; i--) {
      current = this.images[i]
      if (current.pid === imgId || current.url === imgId) {
        uid = current.uid
        this.images.splice(i, 1)
      }
    }

    if (uid) {
      for (var k = this.scene.length - 1; k >= 0; k--) {
        if (this.scene[k].pid === uid) {
          this.scene.splice(k, 1)
        }
      }
    }

    this.renderPass()
  }

  removeShape(imgId) {
    if (!imgId) {
      for (var i = 0; i < this.images.length; i++) {
        this.images[i].shapes = []
      }

      for (var i = this.scene.length - 1; i >= 0; i--) {
        if (this.scene[i].type === 'rect') {
          this.scene.splice(i, 1)
        }
      }

      this.renderPass()
      return
    }

    var uid, current
    for (var i = 0; i < this.images.length; i++) {
      current = this.images[i]
      if (current.pid === imgId || current.url === imgId) {
        uid = current.uid
        current.shapes = []
      }
    }

    for (var k = this.scene.length - 1; k >= 0; k--) {
      if (this.scene[k].type === 'rect' && this.scene[k].pid === uid) {
        this.scene.splice(k, 1)
      }
    }

    this.renderPass()
  }

  // 往场景中添加块并重绘
  addShapesToScene(imgId, shapes, autoFocus) {
    var allElements = this.images,
      addedShapes = [],
      target,
      _this,
      k,
      pid,
      scaleFactor,
      img,
      bounding

    for (var i = 0, len = allElements.length; i < len; i++) {
      if (allElements[i].pid === imgId || allElements[i].url === imgId) {
        target = allElements[i]
        break
      }
    }
    if (target) {
      target.shapes = target.shapes || []
      target.shapes = target.shapes.concat(shapes)
      pid = target.pid
      scaleFactor = target.scaleFactor

      _this = this
      k = _this.transform.k
      img = _this.scene.find(function(v) {
        return v.type === 'image' || v.pid === pid
      })

      shapes.forEach(function(shape) {
        // 将块添加到场景中
        _this.addShape(shape, target['scaleFactor'], target['pid'])
        // 获取刚刚加入的块
        var _lastShape = _this.scene[_this.scene.length - 1]

        // 计算物体绝对位置, 因为图可能会有缩放, 拖动等;
        _lastShape.shape.x = img.shape.x + _lastShape.origin.x * scaleFactor.k * k
        _lastShape.shape.y = img.shape.y + _lastShape.origin.y * scaleFactor.k * k
        _lastShape.shape.width *= k
        _lastShape.shape.height *= k

        if (autoFocus) {
          addedShapes.push(_lastShape.shape)
        }
      })

      _this.renderPass()
      // 对选中的位置进行缩放并居中;
      if (autoFocus) {
        // 如果是一次加入了多个块, 计算出多个块组成的区块边界; 以此为放大区域
        bounding = this.calcBounding(addedShapes)

        // 对块放大至画布中心
        this.zoomToCenter(bounding)
      }
    }
  }
}

　　

 ./utils.js

function getDevicePixelRatio() {
  var divicePixelRatio = 1
  if (typeof window !== 'undefined') {
    divicePixelRatio = window.devicePixelRatio || 1
    divicePixelRatio = Math.max(divicePixelRatio, 1)
  }
  return divicePixelRatio
}

function returnFalse() {
  return false
}

// 以 cornerX, cornerY 为 x,y; 输出一个 宽度为 width, 高度为 height, 圆角大小为 cornerRadius 的圆角矩形路径
function roundedRect(canvas2dContext, cornerX, cornerY, width, height, cornerRadius) {
  if (width > 0) {
    canvas2dContext.moveTo(cornerX + cornerRadius, cornerY)
  } else {
    canvas2dContext.moveTo(cornerX - cornerRadius, cornerY)
  }

  canvas2dContext.arcTo(cornerX + width, cornerY, cornerX + width, cornerY + height, cornerRadius)
  canvas2dContext.arcTo(cornerX + width, cornerY + height, cornerX, cornerY + height, cornerRadius)
  canvas2dContext.arcTo(cornerX, cornerY + height, cornerX, cornerY, cornerRadius)
  if (width > 0) {
    canvas2dContext.arcTo(cornerX, cornerY, cornerX + cornerRadius, cornerY, cornerRadius)
  } else {
    canvas2dContext.arcTo(cornerX, cornerY, cornerX - cornerRadius, cornerY, cornerRadius)
  }
}

/**
 * 绘制一个支持渐变, 支持圆角的矩形; 仅支持 canvas.2d 绘图对象
 *
 */
function fillRect(
  canvas2dContext,
  x,
  y,
  width,
  height,
  background,
  border,
  borderRadius,
  boxShadow,
  isSave
) {
  if (isSave) {
    canvas2dContext.save()
  }
  canvas2dContext.beginPath()
  var gradient = null
  // 渐变
  if (background && background.indexOf(':') !== -1) {
    var gradientText = background.split(':'),
      colors = [],
      direction = null

    try {
      gradientText.forEach((t, index) => {
        var tx = ''
        if (index === 0) {
          direction = t.split(' ')[1].trim()
        } else {
          tx = t.trim()
          var start = tx.match(/^[0-9.%]+/)[0]
          var color = tx.slice(start.length)

          start = start[start.length - 1] === '%' ? parseFloat(start) / 100 : +start
          colors.push({
            rate: start,
            color: color.trim()
          })
        }
      })
    } catch (e) {
      console.warn('绘制矩形错误 ', e)
    }

    switch (direction) {
      case 'top':
        gradient = canvas2dContext.createLinearGradient(x, y + height, x, y)
        break
      case 'bottom':
        gradient = canvas2dContext.createLinearGradient(x, y, x, y + height)
        break
      case 'left':
        gradient = canvas2dContext.createLinearGradient(x + width, y, x, y)
        break
      case 'right':
        gradient = canvas2dContext.createLinearGradient(x, y, x + width, y)
        break
      case 'topLeft':
        gradient = canvas2dContext.createLinearGradient(x + width, y + height, x, y)
        break
      case 'topRight':
        gradient = canvas2dContext.createLinearGradient(x, y + height, x + width, y)
        break
      case 'bottomLeft':
        gradient = canvas2dContext.createLinearGradient(x + width, x, y, y + height)
        break
      case 'bottomRight':
        gradient = canvas2dContext.createLinearGradient(x, y, x + width, y + height)
        break
      default:
        break
    }

    if (direction && gradient) {
      colors.forEach(color => {
        gradient.addColorStop(+color.rate, color.color)
      })

      canvas2dContext.fillStyle = gradient
    }
  }
  // 纯色
  else {
    canvas2dContext.fillStyle = background || '#000'
  }

  // 圆角
  if (borderRadius) {
    roundedRect(canvas2dContext, x, y, width, height, borderRadius)
  } else {
    canvas2dContext.rect(x, y, width, height)
  }

  if (boxShadow) {
    boxShadow = boxShadow.split(':')
    canvas2dContext.shadowColor = boxShadow[0]
    canvas2dContext.shadowBlur = boxShadow[1] || 0
    canvas2dContext.shadowOffsetX = boxShadow[2] || 0
    canvas2dContext.shadowOffsetY = boxShadow[3] || 0
  }
  canvas2dContext.fill()
  if (border && border.borderWidth) {
    canvas2dContext.strokeWidth = border.borderWidth
    canvas2dContext.strokeStyle = border.color
    canvas2dContext.stroke()
  }

  canvas2dContext.closePath()
  if (isSave) {
    canvas2dContext.restore()
  }
}

function normalize(value, range) {
  return value >= range[1] ? range[1] : value <= range[0] ? range[0] : value
}

// 判断点是否在某一个矩形方块内:
// block: x, y, width, height; point: x, y;
function isPointInBlock(block, point) {
  return (
    block.x <= point.x &&
    block.x + block.width >= point.x &&
    block.y <= point.y &&
    block.y + block.height >= point.y
  )
}

// 公式:
// x0= (x - rx0)*cos(a) - (y - ry0)*sin(a) + rx0 ;
// y0= (x - rx0)*sin(a) + (y - ry0)*cos(a) + ry0 ;
// 点 p绕着 p0旋转 angle度; angle为正时, 表示逆时针旋转, angle为负时, 表示顺时针旋转
function rotate(p, p0, angle) {
  var rad = (Math.PI / 180) * angle
  var sinR = Math.sin(rad)
  var cosR = Math.cos(rad)
  return {
    x: p0.x + (p.x - p0.x) * cosR - (p.y - p0.y) * sinR,
    y: p0.y + (p.x - p0.x) * sinR + (p.y - p0.y) * cosR
  }
}

function image2Base64Data(img, option = {}) {
  // width 图片本身的原始宽度
  // height 图片本身的原始高度
  var { width = 0, height = 0, rotate = 0 } = option
  var canvas = document.createElement('canvas')
  var context = canvas.getContext('2d')
  var dataURL, rotatedWidth, rotatedHeight, sinReg, cosReg

  canvas.width = width
  canvas.height = height

  if (rotate) {
    // 任意角度的旋转
    // _w = w * cos? + h * sin?
    // _h = w * sin? + h * cos?

    sinReg = Math.sin((rotate * Math.PI) / 180)
    cosReg = Math.cos((rotate * Math.PI) / 180)
    canvas.width = Math.abs(width * cosReg) + Math.abs(height * sinReg)
    canvas.height = Math.abs(width * sinReg) + Math.abs(height * cosReg)
    context.translate(canvas.width / 2, canvas.height / 2)
    context.rotate((rotate * Math.PI) / 180)

    context.drawImage(img, -width / 2, -height / 2, width, height)
  } else {
    context.drawImage(img, 0, 0, width, height)
  }

  rotatedWidth = canvas.width
  rotatedHeight = canvas.height
  dataURL = canvas.toDataURL()
  canvas = null

  return {
    result: dataURL,
     rotatedWidth,
    height: rotatedHeight
  }
}

export {
  getDevicePixelRatio,
  returnFalse,
  roundedRect,
  fillRect,
  normalize,
  isPointInBlock,
  rotate,
  image2Base64Data
}

　　

./eventProxy.js

function addEventListener(el, name, handler) {
  if (el.addEventListener) {
    el.addEventListener(name, handler)
  } else if (el.attachEvent) {
    el.attachEvent('on' + name, handler)
  } else {
    el['on' + name] = handler
  }
}

function removeEventListener(el, name, handler) {
  if (el.removeEventListener) {
    el.removeEventListener(name, handler)
  } else if (el.detachEvent) {
    el.detachEvent('on' + name, handler)
  } else {
    el['on' + name] = null
  }
}

function isDomLevel2() {
  return typeof window !== 'undefined' && !!window.addEventListener
}

function getBoundingClientRect(el) {
  return el.getBoundingClientRect
    ? el.getBoundingClientRect()
    : {
        left: 0,
        top: 0
      }
}
function canvasSupported() {
  return !!document.createElement('canvas').getContext
}

function defaultWheelDelta(e) {
  // 一般浏览器
  if (e.deltaY) {
    return -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002)
  }
  // IE浏览器
  else if (e.wheelDelta) {
    // e.wheelDelta 正, 向上滚动-放大, 负, 向下滚动-缩小
    return e.wheelDelta > 0 ? e.wheelDelta * 0.002 : e.wheelDelta * 0.002
  }
}

// 返回一个 dom相对于屏幕距离的对象
function defaultGetZrXY(el, e, out) {
  // This well-known method below does not support css transform.
  var box = getBoundingClientRect(el)
  out.zrX = e.clientX - box.left
  out.zrY = e.clientY - box.top
}

// 输出 鼠标点与某一个 dom的相对 x,y 距离
// from: https://github.com/ecomfe/zrender/tree/master/src/core/event.js
function clientToLocal(el, e, out, calculate) {
  out = out || {} // According to the W3C Working Draft, offsetX and offsetY should be relative
  // to the padding edge of the target element. The only browser using this convention
  // is IE. Webkit uses the border edge, Opera uses the content edge, and FireFox does
  // not support the properties.
  // (see http://www.jacklmoore.com/notes/mouse-position/)
  // In zr painter.dom, padding edge equals to border edge.
  // FIXME
  // When mousemove event triggered on ec tooltip, target is not zr painter.dom, and
  // offsetX/Y is relative to e.target, where the calculation of zrX/Y via offsetX/Y
  // is too complex. So css-transfrom dont support in this case temporarily.

  if (calculate || canvasSupported()) {
    defaultGetZrXY(el, e, out)
  } // Caution: In FireFox, layerX/layerY Mouse position relative to the closest positioned
  // ancestor element, so we should make sure el is positioned (e.g., not position:static).
  // BTW1, Webkit don't return the same results as FF in non-simple cases (like add
  // zoom-factor, overflow / opacity layers, transforms ...)
  // BTW2, (ev.offsetY || ev.pageY - $(ev.target).offset().top) is not correct in preserve-3d.
  // <https://bugs.jquery.com/ticket/8523#comment:14>
  // BTW3, In ff, offsetX/offsetY is always 0.
  // else if (env.browser.firefox && e.layerX != null && e.layerX !== e.offsetX) {
  // out.zrX = e.layerX;
  // out.zrY = e.layerY;
  //   } // For IE6+, chrome, safari, opera. (When will ff support offsetX?)
  else if (e.offsetX != null) {
    out.zrX = e.offsetX
    out.zrY = e.offsetY
  } // For some other device, e.g., IOS safari.
  else {
    defaultGetZrXY(el, e, out)
  }

  return out
}

// 为某个 dom, 输出一个规格化的事件对象：
// 该对象会在原本的 MouseEvent 对象基础上, 添加三个属性: zrX, zrY, zrDelta; 分别表示 MouseEvent对象相对于 dom的 x, y距离, MouseEvent对象 缩放的系数
// from: https://github.com/ecomfe/zrender/tree/master/src/core/event.js
function normalizeEvent(el, e, calculate) {
  e = e || window.event

  if (e.zrX != null) {
    return e
  }

  var eventType = e.type
  var isTouch = eventType && eventType.indexOf('touch') >= 0

  if (!isTouch) {
    clientToLocal(el, e, e, calculate)
    e.zrDelta = e.wheelDelta ? e.wheelDelta / 120 : -(e.detail || 0) / 3
  } else {
    // var touch = eventType !== 'touchend' ? e.targetTouches[0] : e.changedTouches[0];
    // touch && clientToLocal(el, touch, e, calculate);
  }

  return e
}

/**
 * 支持 DOM事件, 自定义事件, 制定的一个事件代理函数;
 * 思路: 对于一个 canvas 元素而言, 事件代理主要围绕 坐标体系/路径/点 之类来为不同位置 注册不同的事件类型;
 *       因此在实现上, 考虑了两种添加事件方式:
 *          1. 如果声明了坐标区域, 那么仅仅在坐标区域才 触发坐标区域内的监听函数队列: 这种只支持 MouseEvent事件类型, 不支持 keyboardEvent 类型事件(因为 keyboardEvent 类型事件没有坐标信息, 只有键盘按下信息):
 *          2. 如果没有声明坐标区域, 那么当同类型事件发生时, 则直接触发同类型的函数队列（排除有声明区域的）
 *
 *       这个事件对象必须包含的基本功能有:
 *          1. 注册事件: 为某一个坐标位置, 注册不同类型事件
 *                  坐标位置: { type: 'block', data: {参数}, area: {x, y, width, height} } area 表示注册事件的区域,
 *                      注意为 area区域注册事件会存在覆盖的情况, 也即同一区域注册有多个事件后, 会同时触发所有同类型的注册事件, 这可能并不是我们所希望看到的;
 *                      比如一个块内的某一点分别注册有点击事件, 点击块内的点并不希望触发块的点击事件
 *
 *                      处理方式目前支持两种:
 *                          1. 设置函数的 silence属性;
 *                                  有时事件不应该被注销, 但也不应该被触发, 所以增加了一个额外的 silence属性来控制
 *                                  只有当 silence为 false时, 才会触发事件; 这里简化了实现, 直接为注册事件挂载一个 silence属性即可:
 *                          2. 为注册事件增加权重 zIndex(默认为 0), 并为事件返回 true, 即可停止事件派发
 *                                  权重较高的, 会被放置在队列前面, 派发事件时从前往后, 如果其中有一个事件返回结构判断为 true, 则会停止事件派发;
 *
 *                  支持的事件类型: 在MouseEvent, keyboardEvent 中选择部分来实现, 出于浏览器兼容性考虑, 部分事件需要特殊处理
 *
 *          2. 解绑事件: 清空某一个类型中的某个事件; 清空所有同类型的事件回调; 清空注册区块的所有事件回调等
 *          3. 派发事件: 判断鼠标所在位置, 判断是否在形状中/坐标位置内; 然后找出位置中所有注册的回调函数, 然后调用:
 *                          并在调用时传入 该事件对象, 传入当前 dom 等必要信息, 传入注册时的 data信息
 *
 */

class EventProxy {
  constructor(selector) {
    var support =
      'onwheel' in document.createElement('div')
        ? 'wheel' // 各个厂商的高版本浏览器都支持"wheel"
        : document.onmousewheel !== undefined
        ? 'mousewheel' // Webkit 和 IE一定支持"mousewheel"
        : 'DOMMouseScroll' // 低版本firefox

    // 支持的所有类型事件;
    var supportEventAliasNames = {
      mouseenter: 'mouseover',
      mouseleave: 'mouseout',
      contextmenu: 'contextmenu',
      click: 'click',
      dblclick: 'dblclick',
      mousewheel: support == 'DOMMouseScroll' ? 'MozMousePixelScroll' : support,
      mousedown: 'mousedown',
      mouseup: 'mouseup',
      mousemove: 'mousemove',
      //  ['mousedown', 'mouseup'],     // 对于 brush事件, 尚未实现;
      setPointStyle: 'mousemove'
    }

    this.dom = document.querySelector(selector)
    this.uuid = 10000
    this.eventListener = {}
    this.eventDispatcher = {}
    this.supportEventNames = supportEventAliasNames
    this.registerBlock = []
  }
  getUUid() {
    return ++this.uuid
  }
  createFunc(aliasName) {
    var _this = this
    return function(e) {
      normalizeEvent(_this.dom, e)
      _this.dispatchEventToElement(e, _this.dom, aliasName)
    }
  }
  // 添加事件: 可能是 DOM类型事件, 也可能是自定义事件;
  // {@param.eventAliasName} 事件别名: 必要参数
  // {@param.data} 要传递的参数: 必要参数
  // {@param.cb} 要执行的回调: 可选参数
  // {@param.context} 回调函数执行时的上下文对象: 可选参数
  addEvent(eventAliasName, data, cb, context) {
    var domRawEvent
    var method = 'push'
    var args = [].slice.call(arguments, 1)
    console.log('数据:::', data)
    // 如果除事件类型外, 只有一个参数, 那么判断哪一个参数是否为函数;
    if (args.length === 1) {
      cb = typeof args[0] === 'function' ? args[0] : undefined
      data = undefined
      context = undefined
    }
    // 如果是两个参数, 可能是 data + cb, 也可能是 cb + context 的组合
    // 如果第一个参数是函数, 那么认为传入的是 回调 + 上下文的组合
    // 如果第二个参数是函数, 那么认为传入的是 数据 + 回调的组合
    else if (args.length === 2) {
      if (typeof args[0] === 'function') {
        cb = args[0]
        context = args[1]
        data = null
      } else if (typeof args[1] === 'function') {
        data = args[0]
        cb = args[1]
        context = null
      }
    } else if (args.length === 3) {
      data = args[0]
      cb = typeof args[1] === 'function' ? args[1] : undefined
      context = args[2]
    }

    if (!cb) {
      return
    }
    cb.uid = cb.uid || this.getUUid()

    // 如果是绑定的 DOM事件, 给 DOM添加同类型事件
    if ((domRawEvent = this.supportEventNames[eventAliasName])) {
      if (!this.eventDispatcher[eventAliasName]) {
        this.eventDispatcher[eventAliasName] = this.createFunc(eventAliasName)
        addEventListener(this.dom, domRawEvent, this.eventDispatcher[eventAliasName])
      }
    }
    // 如果已经注册过同类型事件
    if (this.eventListener[eventAliasName]) {
      // 默认阻止一个事件的重复挂载 ; 原则上不应该阻止, 应该遵守调用者的一切行为;
      if (
        this.eventListener[eventAliasName].findIndex(function(ev) {
          return ev.uid === cb.uid
        }) === -1
      ) {
        this.eventListener[eventAliasName][method]({
          uid: cb.uid,
          data: data,
          silence: !!cb.silence,
          callback: cb,
          zIndex: cb.zIndex || 0,
          block: (data && data.block) || cb.block,
          context: context
        })
      }
      // 如果函数声明了 $repeat属性, 表示允许重复挂载
      else if (cb.$repeat) {
        this.eventListener[eventAliasName][method]({
          uid: cb.uid,
          data: data,
          silence: !!cb.silence,
          callback: cb,
          zIndex: cb.zIndex || 0,
          block: (data && data.block) || cb.block,
          context: context
        })
      }
    }
    // 注册自定义类型事件的处理
    else {
      // 注册事件时, 传入的一个规格化的事件描述对象;
      //  uid 事件函数的唯一 id
      //  data 事件执行时, 暂存的参数值: 可能是一个原始值(primitive value), 也可能是一个引用
      //  silence 事件函数是否执行的控制条件
      //  callback 要执行的函数
      //  zIndex 事件的权重
      //  block 事件注册的位置: 这个值目前实现的是 {x, y, width, height};
      this.eventListener[eventAliasName] = [
        {
          uid: cb.uid,
          data: data,
          silence: !!cb.silence,
          callback: cb,
          zIndex: cb.zIndex || 0,
          block: (data && data.block) || cb.block,
          context: context
        }
      ]
    }
  }
  // 往 回调队列中, 删除某一个事件对象
  // {@param.eventAliasName } 要删除的事件类型别名
  // {@param.block } 要删除某一个声明块内注册的事件
  // {@param.cb } 要删除的事件
  removeEvent(eventAliasName, block, cb) {
    var uid, cur, condition

    if (!cb && block) {
      cb = block
      block = null
    }

    uid = cb.uid
    if (!uid) {
      // console.warn('未注册的回调或不是一个有效的回调, 无法清除');
      return
    }

    if (this.eventListener[eventAliasName]) {
      for (var i = 0; i < this.eventListener[eventAliasName].length; i++) {
        cur = this.eventListener[eventAliasName][i]
        condition = block
          ? this.isBlockContainBlock(block, cur.block) && cur.uid === uid
          : cur.uid === uid

        if (condition) {
          this.eventListener[eventAliasName].splice(i, 1)
        }
      }
    }
  }

  // 判断点是否在某一个矩形方块内:
  // block: x, y, width, height; point: x, y;
  isPointInBlock(block, point) {
    return (
      block.x <= point.x &&
      block.x + block.width >= point.x &&
      block.y <= point.y &&
      block.y + block.height >= point.y
    )
  }

  // 判断一个块是否全包含另一个块
  // {@param pBlock} Object{x, y, width, height}
  // {@param sBlock} Object{x1, y1, width2, height2}
  isBlockContainBlock(pBlock, sBlock) {
    return (
      pBlock.x <= sBlock.x &&
      pBlock.x + pBlock.width >= sBlock.x + sBlock.width &&
      pBlock.y <= sBlock.y &&
      pBlock.y + pBlock.height >= sBlock.y + sBlock.height
    )
  }

  // 分发 DOM事件:
  dispatchEventToElement(event, dom, eventAliasName) {
    var listen = this.eventListener[eventAliasName]
    var length = listen && listen.length
    var _this = this
    var tobreak = false,
      curFunc,
      inBlockListen,
      stop,
      stopImmediatePropagation,
      locationToDom
    if (length) {
      listen.sort(function(fn1, fn2) {
        return fn1.zIndex > fn2.zIndex ? -1 : 1
      })

      locationToDom = { x: event.zrX, y: event.zrY }
      inBlockListen = listen.filter(function(fn) {
        if (fn.block) {
          return _this.isPointInBlock(fn.block, locationToDom)
        } else {
          return true
        }
      })
      length = inBlockListen.length
      for (var i = 0; i < length; i++) {
        curFunc = inBlockListen[i]
        if (!curFunc.silence && typeof curFunc.callback === 'function') {
          stop = curFunc.callback.call(curFunc.context, event, dom, curFunc.data)
          if (stop) {
            if (typeof stop === 'object') {
              tobreak = !!stop.stopPropagation
              stopImmediatePropagation = !!stop.stopImmediatePropagation
            } else {
              tobreak = true
            }
          } else {
            tobreak = false
          }
        }
        if (tobreak) {
          break
        }
      }
      // 鼠标右键时, 如果要阻止浏览器右键默认行为, 那么应该在 contextmenu的回调中返回一个有效值;
      if (stopImmediatePropagation) {
        if (eventAliasName === 'contextmenu') {
          document.oncontextmenu = stopImmediatePropagation
            ? function(e) {
                e.stopImmediatePropagation()
                return false
              }
            : null
        } else {
          document.oncontextmenu = null
          event.stopImmediatePropagation()
        }
      } else {
        document.oncontextmenu = null
      }
    }
  }
  // 分发自定义事件:
  dispatchEvent(eventType, params) {
    var isDomEvent = this.supportEventNames[eventType]
    var params = [].slice.call(arguments, 1)
    if (isDomEvent) {
      //
    } else {
      var listen = this.eventListener[eventType]
      var length = listen && listen.length
      var tobreak = true,
        curFunc
      if (length) {
        listen.sort(function(fn1, fn2) {
          return fn1.zIndex > fn2.zIndex ? -1 : 1
        })
        for (var i = 0; i < length; i++) {
          curFunc = this.eventListener[eventType][i]
          if (!curFunc.silence && typeof curFunc.callback === 'function') {
            tobreak =
              tobreak & !curFunc.callback.apply(curFunc.context, [curFunc.data].concat(params))
          }
          if (!tobreak) {
            break
          }
        }
      }
    }
  }

  // 清除所有注册事件;
  disposeAll(eventAliasName) {
    var supportEventNames = this.supportEventNames
    // 没传递类型, 则删除所有事件回调
    if (!eventAliasName) {
      // 清除 dom类型事件
      Object.keys(supportEventNames).forEach(aliasName => {
        var evName = supportEventNames[aliasName]
        removeEventListener(this.dom, evName, this.eventDispatcher[aliasName])
      })
      // 清除自定义类型事件
      Object.keys(this.eventListener).forEach(aliasName => {
        this.eventListener[aliasName].length = 0
        delete this.eventListener[aliasName]
      })

      document.oncontextmenu = null
    }
    // 如果传了事件类型, 只清除监听函数队列
    else {
      if (this.eventListener[eventAliasName]) {
        this.eventListener[eventAliasName].length = 0
      }
    }
  }
}

export { addEventListener, defaultWheelDelta, removeEventListener, isDomLevel2, EventProxy }

　　

调用: 

function setChart(imageUrl) {
  if (chartInstance) {
    chartInstance.clear();
    chartInstance.initEvent();
    chartInstance.initScene([{ url: imageUrl }])
  } else {
    chartInstance = new Chart(DOMselector, {
      images: [{ url: url }]
    })
  }
}

setChart(imageUrl)

整体实现比较粗糙，错误之处欢迎纠正;  

:::纠正一个 bug, 某些图片会自动旋转，后来百度发现是图片拍摄时保留的元信息中旋转角度 orientation导致。--代码已更新

在 img标签引用一个旋转了角度的照片时, 图片被浏览器自动转正. 如果浏览器兼容可以使用 css属性 image-orientation: from-image 来校正角度(css4工作草案), 考虑到兼容, 得想其他办法读取到 EXIF旋转角度然后再转正了;

推荐使用 exif-js 来读取图片信息, 用法示例:

{

参考: https://blog.csdn.net/weixin_39660922/article/details/111250912

         https://www.jianshu.com/p/a20033e33810

}

import EXIF from 'exif-js';

var img = document.getElementById("img");
EXIF.getData(img, function() {
  var orientation = EXIF.getTag(this, 'Orientation');
  switch(orientation ) {
    // 正常
    // 矫正方式: 不做操作
    case 1: , 
      break;
    // 正常镜像
    // 矫正方式: 水平翻转
    case 2: ,
      break;
    // 顺时针旋转 180°
    // 矫正方式: 逆时针旋转 180°, 向上、右移动复原位置
    case 3: 
      break;
    // 顺时针旋转 180°镜像
    // 矫正方式: 水平翻转, 逆时针旋转 90°, 向上、右移动复原位置
    case 4: 
      break;
    // 顺时针旋转 270°镜像
    // 矫正方式: 垂直翻转、顺时针旋转 90°、向上平移复原位置
    case 5: 
      break;
    // 顺时针旋转270°‍
    // 矫正方式: 顺时针旋转 90°‍、向上平移复原位置
    case 6:
      break;
    // 顺时针旋转90°镜像
    // 矫正方式: 垂直翻转、逆时针旋转 90、向右平移复原位置
    case 7:
      break;
    // 顺时针旋转90°
    // 矫正方式: 逆时针旋转 90、向右平移复原位置
    case 8:
      break;
    // 读取失败
    default:
      break;
  }
})

附: canvas 图片旋转算法

// 旋转公式与canvas绘图
// _w = w * cos? + h * sin?
// _h = w * sin? + h * cos?

canvas.width = Math.abs(width * cosReg) + Math.abs(height * sinReg)
canvas.height = Math.abs(width * sinReg) + Math.abs(height * cosReg)

context.translate(canvas.width / 2, canvas.height / 2)
context.rotate((rotate * Math.PI) / 180)

// 回到原点
context.setTransform(1, 0, 0, 1, 0, 0)

 图片翻转算法: 原理应该是类似于一个镜像, 想象一下: 照镜子时里面的自己, 和现实中的自己正是一个水平方向的翻转;

// 伪代码
// 水平翻转
var imgData = canvas.getImageData(0, 0, width, height);
var startPoint, endPoint, r, g, b, a
for (var i = 0; i < height; i++) {
  for (var j = 0; j < width; j++) {
    // 起点
    startPoint = (i * width + j) * 4
    // 对称点
    endPoint = (i * width + (width - j)) * 4
    
    r = imgData[startPoint]
    g = imgData[startPoint + 1]
    b = imgData[startPoint + 2]
    a = imgData[startPoint + 3]
    imgData[startPoint] = imgData[endPoint]
    imgData[startPoint + 1] = imgData[endPoint + 1]
    imgData[startPoint + 2] = imgData[endPoint + 2]
    imgData[startPoint + 3] = imgData[endPoint + 3]
    imgData[endPoint] = r
    imgData[endPoint + 1] = g
    imgData[endPoint + 2] = b
    imgData[endPoint + 3] = a
  }
}

// 垂直翻转方法类似

      

附: 

canvas 的优化: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas