@antv/f6/es/behavior/zoom-canvas.js

A Mobile Graph Visualization Framework in JavaScript

export default {
  firstScale: null,
  getDefaultCfg: function getDefaultCfg() {
    return {
      originScale: 1,
      sensitivity: 2,
      minZoom: undefined,
      maxZoom: undefined,
      enableOptimize: false,
      optimizeZoom: 0.1,
      fixSelectedItems: {
        fixAll: false,
        fixLineWidth: false,
        fixLabel: false,
        fixState: 'selected'
      }
    };
  },
  getEvents: function getEvents() {
    var fixSelectedItems = this.fixSelectedItems;
    if (!fixSelectedItems.fixState) fixSelectedItems.fixState = 'selected';
    if (fixSelectedItems.fixAll) {
      fixSelectedItems.fixLineWidth = true;
      fixSelectedItems.fixLabel = true;
    }
    return {
      pinchstart: 'onPinch',
      pinchmove: 'onPinch'
    };
  },
  onPinch: function onPinch(evt) {
    if (evt.preventDefault) evt.preventDefault();
    if (evt.originalEvent.preventDefault) evt.originalEvent.preventDefault();
    var pointers = evt.originalEvent.pointers;
    if (pointers.length < 2) return;
    if (evt.type === 'pinchstart') {
      this.firstScale = this.graph.getZoom();
    }
    var scale = evt.originalEvent.scale || evt.originalEvent.srcEvent.extra.scale;
    // 应用到画布上的缩放比例
    var zoom = this.firstScale * scale;
    // 缓存当前的缩放比例
    this.currentScale = zoom;
    var minZoom = this.get('minZoom') || this.graph.get('minZoom');
    var maxZoom = this.get('maxZoom') || this.graph.get('maxZoom');
    if (zoom > maxZoom || zoom < minZoom) {
      return;
    }
    var canvas = this.graph.get('canvas');
    var posA = {
      x: pointers[0].clientX,
      y: pointers[0].clientY
    };
    var posB = {
      x: pointers[1].clientX,
      y: pointers[1].clientY
    };
    // 缩放点放中间
    var point = canvas.getPointByClient((posA.x + posB.x) / 2, (posA.y + posB.y) / 2);
    this.graph.zoomTo(zoom, {
      x: point.x,
      y: point.y
    });
  }
};