From 58bb51ad32e72d843094115d6af5f60f3249545b Mon Sep 17 00:00:00 2001
From: chenshenhai <cshenhai@gmail.com>
Date: Fri, 10 Sep 2021 22:44:33 +0800
Subject: [PATCH] chore: add demo base on react and vue

---
 README.md                              | 81 +++++++++++++++++++++++++-
 packages/idraw/README.md               | 78 ++++++++++++++++++++++++-
 packages/idraw/examples/react/demo.jsx | 33 +++++++++++
 packages/idraw/examples/vue/demo.vue   | 33 +++++++++++
 4 files changed, 223 insertions(+), 2 deletions(-)
 create mode 100644 packages/idraw/examples/react/demo.jsx
 create mode 100644 packages/idraw/examples/vue/demo.vue

diff --git a/README.md b/README.md
index 78af349..777c45c 100644
--- a/README.md
+++ b/README.md
@@ -49,6 +49,8 @@ npm i idraw
 
 ## Getting Started
 
+### Common
+
 ```js
 import iDraw from 'idraw';
 
@@ -59,7 +61,7 @@ const idraw = new iDraw(
     height: 400,
     contextWidth: 600,
     contextHeight: 400,
-    devicePixelRatio: 4,
+    devicePixelRatio: 1,
   }
 );
 idraw.addElement({
@@ -78,6 +80,83 @@ idraw.addElement({
 });
 ```
 
+### React
+
+```jsx
+import iDraw from 'idraw';
+import { useEffect, useRef } from 'react';
+
+function Demo() {
+  const ref = useRef(null);
+  useEffect(() => {
+    const idraw = new iDraw(ref.current, {
+      width: 600,
+      height: 400,
+      contextWidth: 600,
+      contextHeight: 400,
+      devicePixelRatio: 1,
+    });
+    idraw.addElement({
+      name: "rect-001",
+      x: 140,
+      y: 120,
+      w: 200,
+      h: 100,
+      type: "rect",
+      desc: {
+        bgColor: "#f7d3c1",
+        borderRadius: 20,
+        borderWidth: 4,
+        borderColor: "#ff6032",
+      },
+    })
+  }, []);
+
+  return (
+    <div ref={ref}></div>
+  )
+}
+```
+
+### Vue
+
+```html
+<template>
+  <div ref="mount"></div>
+</template>
+
+<script setup >
+import iDraw from 'idraw';
+import { ref, onMounted } from 'vue'
+const mount = ref();
+
+onMounted(() => {
+  const idraw = new iDraw(mount.value, {
+    width: 600,
+    height: 400,
+    contextWidth: 600,
+    contextHeight: 400,
+    devicePixelRatio: 1,
+  });
+  idraw.addElement({
+    name: "rect-001",
+    x: 140,
+    y: 120,
+    w: 200,
+    h: 100,
+    type: "rect",
+    desc: {
+      bgColor: "#f7d3c1",
+      borderRadius: 20,
+      borderWidth: 4,
+      borderColor: "#ff6032",
+    },
+  })
+})
+</script>
+```
+
+
 ## Contributing
 
 We appreciate your help!
diff --git a/packages/idraw/README.md b/packages/idraw/README.md
index dd8ba72..687362b 100644
--- a/packages/idraw/README.md
+++ b/packages/idraw/README.md
@@ -51,7 +51,7 @@ const idraw = new iDraw(
     height: 400,
     contextWidth: 600,
     contextHeight: 400,
-    devicePixelRatio: 4,
+    devicePixelRatio: 1,
   }
 );
 idraw.addElement({
@@ -69,3 +69,79 @@ idraw.addElement({
   },
 });
 ```
+
+### React
+
+```jsx
+import iDraw from 'idraw';
+import { useEffect, useRef } from 'react';
+
+function Demo() {
+  const ref = useRef(null);
+  useEffect(() => {
+    const idraw = new iDraw(ref.current, {
+      width: 600,
+      height: 400,
+      contextWidth: 600,
+      contextHeight: 400,
+      devicePixelRatio: 1,
+    });
+    idraw.addElement({
+      name: "rect-001",
+      x: 140,
+      y: 120,
+      w: 200,
+      h: 100,
+      type: "rect",
+      desc: {
+        bgColor: "#f7d3c1",
+        borderRadius: 20,
+        borderWidth: 4,
+        borderColor: "#ff6032",
+      },
+    })
+  }, []);
+
+  return (
+    <div ref={ref}></div>
+  )
+}
+```
+
+### Vue
+
+```html
+<template>
+  <div ref="mount"></div>
+</template>
+
+<script setup >
+import iDraw from 'idraw';
+import { ref, onMounted } from 'vue'
+const mount = ref();
+
+onMounted(() => {
+  const idraw = new iDraw(mount.value, {
+    width: 600,
+    height: 400,
+    contextWidth: 600,
+    contextHeight: 400,
+    devicePixelRatio: 1,
+  });
+  idraw.addElement({
+    name: "rect-001",
+    x: 140,
+    y: 120,
+    w: 200,
+    h: 100,
+    type: "rect",
+    desc: {
+      bgColor: "#f7d3c1",
+      borderRadius: 20,
+      borderWidth: 4,
+      borderColor: "#ff6032",
+    },
+  })
+})
+</script>
+```
diff --git a/packages/idraw/examples/react/demo.jsx b/packages/idraw/examples/react/demo.jsx
new file mode 100644
index 0000000..2656343
--- /dev/null
+++ b/packages/idraw/examples/react/demo.jsx
@@ -0,0 +1,33 @@
+import iDraw from 'idraw';
+import { useEffect, useRef } from 'react';
+
+function Demo() {
+  const ref = useRef(null);
+  useEffect(() => {
+    const idraw = new iDraw(ref.current, {
+      width: 600,
+      height: 400,
+      contextWidth: 600,
+      contextHeight: 400,
+      devicePixelRatio: 1,
+    });
+    idraw.addElement({
+      name: "rect-001",
+      x: 140,
+      y: 120,
+      w: 200,
+      h: 100,
+      type: "rect",
+      desc: {
+        bgColor: "#f7d3c1",
+        borderRadius: 20,
+        borderWidth: 4,
+        borderColor: "#ff6032",
+      },
+    })
+  }, []);
+
+  return (
+    <div ref={ref}></div>
+  )
+}
\ No newline at end of file
diff --git a/packages/idraw/examples/vue/demo.vue b/packages/idraw/examples/vue/demo.vue
new file mode 100644
index 0000000..0fafaf0
--- /dev/null
+++ b/packages/idraw/examples/vue/demo.vue
@@ -0,0 +1,33 @@
+<template>
+  <div ref="mount"></div>
+</template>
+
+<script setup >
+import iDraw from 'idraw';
+import { ref, onMounted } from 'vue'
+const mount = ref();
+
+onMounted(() => {
+  const idraw = new iDraw(mount.value, {
+    width: 600,
+    height: 400,
+    contextWidth: 600,
+    contextHeight: 400,
+    devicePixelRatio: 1,
+  });
+  idraw.addElement({
+    name: "rect-001",
+    x: 140,
+    y: 120,
+    w: 200,
+    h: 100,
+    type: "rect",
+    desc: {
+      bgColor: "#f7d3c1",
+      borderRadius: 20,
+      borderWidth: 4,
+      borderColor: "#ff6032",
+    },
+  })
+})
+</script>
\ No newline at end of file