suoqiu-f2/lib/graphic/engine/shape/image.js

Charts for mobile visualization.

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _common = require("../../../util/common");
var _rect = _interopRequireDefault(require("./rect"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
var imageCaches = {};
var ImageShape = /*#__PURE__*/function (_Rect) {
  function ImageShape() {
    return _Rect.apply(this, arguments) || this;
  }
  _inheritsLoose(ImageShape, _Rect);
  var _proto = ImageShape.prototype;
  _proto._initProperties = function _initProperties() {
    _Rect.prototype._initProperties.call(this);
    this._attrs.canFill = false;
    this._attrs.canStroke = false;
    this._attrs.loading = false;
    this._attrs.image = null;
    this._attrs.type = 'image';
  };
  _proto.draw = function draw(context) {
    var _this = this;
    // 如果图片还在loading中直接返回，等下次绘制
    if (this.get('loading')) {
      return;
    }

    // 如果已经有image对象，直接绘制，会调用createPath绘制
    var image = this.get('image');
    if (image) {
      _Rect.prototype.draw.call(this, context);
      return;
    }
    var attrs = this.get('attrs');
    var src = attrs.src;
    if (src && window.Image) {
      var cacheImage = this.get('cacheImage');
      // 如果有缓存，则直接从缓存中拿
      if (cacheImage && imageCaches[src]) {
        this.set('image', imageCaches[src]);
        this.draw(context);
        return;
      }
      this.set('loading', true);
      var _image = new Image();
      // 设置跨域, 等同于 image.crossOrigin = 'anonymous'
      _image.crossOrigin = '';
      _image.onload = function () {
        _this.set('loading', false);
        _this.set('image', _image);
        _this.draw(context);
      };
      // src 一定要在 crossOrigin 之后，否则 toDataURL 就会报 SecurityError
      _image.src = src;

      // 设置全局缓存
      if (cacheImage) {
        imageCaches[src] = _image;
      }
    }
  };
  _proto.createPath = function createPath(context) {
    var image = this.get('image');
    this.drawImage(context, image);
  };
  _proto.drawImage = function drawImage(context, image) {
    var _this$_attrs = this._attrs,
      attrs = _this$_attrs.attrs,
      destroyed = _this$_attrs.destroyed;
    if (destroyed) {
      return;
    }
    var x = attrs.x,
      y = attrs.y,
      width = attrs.width,
      height = attrs.height,
      sx = attrs.sx,
      sy = attrs.sy,
      swidth = attrs.swidth,
      sheight = attrs.sheight,
      radius = attrs.radius,
      fillOpacity = attrs.fillOpacity;
    if (radius) {
      context.save();
      this.createRadiusPath(context, x, y, width, height, radius);
      context.clip();
    }
    // 设置透明度
    var originOpacity = context.globalAlpha;
    if (!(0, _common.isNil)(fillOpacity)) {
      context.globalAlpha = fillOpacity;
    }
    if (!(0, _common.isNil)(sx) && !(0, _common.isNil)(sy) && !(0, _common.isNil)(swidth) && !(0, _common.isNil)(sheight)) {
      context.drawImage(image, sx, sy, swidth, sheight, x, y, width, height);
    } else {
      context.drawImage(image, x, y, width, height);
    }
    context.globalAlpha = originOpacity;
    if (radius) {
      // 因为 save 和 restore 会一定程度上影响绘图性能，所以只在必要是调用
      context.restore();
    }
  };
  return ImageShape;
}(_rect["default"]);
var _default = exports["default"] = ImageShape;