feat: 新增imageShape组件

src/graphic/index.js

@@ -5,6 +5,7 @@ import Matrix from './util/matrix';
 import Vector2 from './util/vector2';
 
 import './shape/rect';
+import './shape/image';
 import './shape/circle';
 import './shape/line';
 import './shape/polygon';

src/graphic/shape/image.js

@@ -0,0 +1,76 @@
+import { isNil } from '../../util/common';
+import Shape from '../shape';
+
+class ImageShape extends Shape {
+  _initProperties() {
+    super._initProperties();
+    this._attrs.canFill = false;
+    this._attrs.canStroke = false;
+    this._attrs.loading = false;
+    this._attrs.image = null;
+    this._attrs.type = 'image';
+  }
+
+  getDefaultAttrs() {
+    return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+  }
+
+  createPath(context) {
+    const attrs = this.get('attrs');
+    const { src } = attrs;
+
+    if (this.get('loading')) {
+      return;
+    }
+
+    const image = this.get('image');
+
+    if (image) {
+      this.drawImage(context, image);
+    } else {
+      if (src && Image) {
+        this.set('loading', true);
+        const image = new Image();
+        image.src = src;
+        // 设置跨域
+        image.crossOrigin = 'Anonymous';
+        image.onload = () => {
+          this.set('loading', false);
+          this.set('image', image);
+          this.drawImage(context, image);
+        };
+      }
+    }
+  }
+
+  drawImage(context, image) {
+    const attrs = this.get('attrs');
+    const { x, y, width, height, sx, sy, swidth, sheight } = attrs;
+    if (!isNil(sx) && !isNil(sy) && !isNil(swidth) && !isNil(sheight)) {
+      context.drawImage(image, sx, sy, swidth, sheight, x, y, width, height);
+    } else {
+      context.drawImage(image, x, y, width, height);
+    }
+  }
+
+  calculateBox() {
+    const attrs = this.get('attrs');
+    const { x, y, width, height } = attrs;
+    // 和rect一样
+    return {
+      minX: x,
+      minY: y,
+      maxX: x + width,
+      maxY: y + height
+    };
+
+  }
+}
+
+Shape.Image = ImageShape;
+export default ImageShape;

test/unit/graphic/shape/image-spec.js

@@ -0,0 +1,39 @@
+import Canvas from '../../../../src/graphic/canvas';
+import '../../../../src/graphic';
+
+const dom = document.createElement('canvas');
+dom.id = 'canvas';
+document.body.appendChild(dom);
+
+describe('imageShape', function() {
+  it('new imageShape', function() {
+    const canvas = new Canvas({
+      el: 'canvas',
+      width: 200,
+      height: 100
+    }); // 创建 canvas 实例
+
+    const container = canvas.addGroup({
+      zIndex: 2
+    }); // canvas 添加一个 group
+
+    const imageShape = container.addShape('image', {
+      zIndex: 31,
+      attrs: {
+        x: 0,
+        y: 0,
+        src: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
+        width: 50,
+        height: 50
+      }
+    });
+
+    container.sort();
+    canvas.sort(); // canvas 容器内的元素排序
+    expect(imageShape.get('loading')).toBe(false);
+    canvas.draw(); // 绘制
+    expect(imageShape.get('loading')).toBe(true);
+    expect(imageShape.get('image')).toBe(null);
+
+  });
+});