From 7c728eec53868302e1d52e4408ff115a85e68665 Mon Sep 17 00:00:00 2001
From: chenshenhai <cshenhai@gmail.com>
Date: Tue, 1 Jun 2021 11:02:52 +0800
Subject: [PATCH] feat: clear-style before drawing ctx

---
 packages/core/example/lib/data-image.js | 60 ++++++++++++++++++++++++-
 packages/core/src/lib/draw.ts           |  8 ++++
 2 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/packages/core/example/lib/data-image.js b/packages/core/example/lib/data-image.js
index 8310b2f..ee93205 100644
--- a/packages/core/example/lib/data-image.js
+++ b/packages/core/example/lib/data-image.js
@@ -3,7 +3,6 @@ const data = {
   // bgColor: '#ffffff',
   elements: [
     {
-      uuid: '"e93bb349-aa7c-dab6-fa7f-7f2cf809e283',
       name: 'image-001',
       x: 10,
       y: 10,
@@ -13,7 +12,64 @@ const data = {
       // angle: 30,
       // angle: 0,
       desc: {
-        src: './images/computer.png'
+        src: './images/computer.png',
+      }
+    },
+    {
+      name: 'image-002',
+      x: 80,
+      y: 80,
+      w: 200,
+      h: 120,
+      // angle: 30,
+      type: 'image',
+      desc: {
+        src: './images/chart.png',
+      }
+    },
+    {
+      name: 'image-003',
+      x: 160,
+      y: 160,
+      w: 200,
+      h: 20,
+      type: 'image',
+      angle: 80,
+      desc: {
+        src: './images/phone.png',
+      }
+    },
+    {
+      name: 'image-004',
+      x: 400 - 10,
+      y: 300 - 10,
+      w: 100,
+      h: 100,
+      type: 'image',
+      desc: {
+        src: './images/building-001.png',
+      }
+    },
+    {
+      name: 'image-004',
+      x: 400 - 40,
+      y: 300 - 40,
+      w: 100,
+      h: 100,
+      type: 'image',
+      desc: {
+        src: './images/building-002.png',
+      }
+    },
+    {
+      name: 'image-004',
+      x: 400 - 100,
+      y: 300 - 100,
+      w: 100,
+      h: 100,
+      type: 'image',
+      desc: {
+        src: './images/building-003.png',
       }
     }
   ]
diff --git a/packages/core/src/lib/draw.ts b/packages/core/src/lib/draw.ts
index bc4b1e0..c23f4b7 100644
--- a/packages/core/src/lib/draw.ts
+++ b/packages/core/src/lib/draw.ts
@@ -18,6 +18,7 @@ export function drawContext(
   config: TypeHelperConfig,
   loader: Loader,
 ): void {
+  clearContext(ctx);
   const size = ctx.getSize();
   ctx.clearRect(0, 0, size.width, size.height);
 
@@ -44,6 +45,7 @@ export function drawContext(
 
 
 function drawRect<T extends keyof TypeElemDesc>(ctx: TypeContext, elem: TypeElement<T>) {
+  clearContext(ctx);
   const desc = elem.desc as TypeElemDesc['rect'];
   rotateElement(ctx, elem, () => {
     ctx.setFillStyle(desc.color);
@@ -124,3 +126,9 @@ function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) {
 
   });
 }
+
+
+function clearContext(ctx: TypeContext) {
+  ctx.setFillStyle('rgb(0 0 0 / 0%)');
+  ctx.setStrokeStyle('rgb(0 0 0 / 0%)');
+}
\ No newline at end of file