fix: 修复 image 绘制的层级问题. Closed #1489 (#1490)

antvis · May 22, 2022 · 5549c5d · 5549c5d
1 parent 050d5cf
commit 5549c5d
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/.../canvas/__image_snapshots__/graphic-test-tsx-canvas-image-image-绘制层级-1-snap.png b/.../canvas/__image_snapshots__/graphic-test-tsx-canvas-image-image-绘制层级-1-snap.png
diff --git a/packages/f2/test/canvas/graphic.test.tsx b/packages/f2/test/canvas/graphic.test.tsx
@@ -249,5 +249,38 @@ describe('Canvas', () => {
       expect(context).toMatchImageSnapshot();
       expect(createImageCallback.mock.calls.length).toBe(1);
     });
+
+    it('image 绘制层级', async () => {
+      const context = createContext();
+      const { props } = (
+        <Canvas context={context} animate={false} pixelRatio={1}>
+          <group>
+            <image
+              attrs={{
+                src:
+                  'https://gw.alipayobjects.com/mdn/zhima_credit/afts/img/A*Ckg-R4Md9MgAAAAAAAAAAAAAARQnAQ',
+                width: '200px',
+                height: '200px',
+              }}
+            />
+            <rect
+              attrs={{
+                x: '100px',
+                y: '100px',
+                width: '60px',
+                height: '60px',
+                fill: '#000',
+              }}
+            />
+          </group>
+        </Canvas>
+      );
+
+      const canvas = new Canvas(props);
+      canvas.render();
+
+      await delay(500);
+      expect(context).toMatchImageSnapshot();
+    });
   });
 });
diff --git a/packages/graphic/src/engine/shape/image.ts b/packages/graphic/src/engine/shape/image.ts
@@ -63,7 +63,9 @@ class ImageShape extends Rect<ImageProp> {
         image.onload = () => {
           this.set('loading', false);
           this.set('image', image);
-          this.draw(context);
+          // this.draw(context);
+          // 这里需要调用 canvas.draw 进行重新绘制，否则 image 会一直在最上层
+          canvas.draw();
         };
         // src 一定要在 crossOrigin 之后，否则 toDataURL 就会报 SecurityError
         image.src = src;