chore: add demo base on react and vue

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!

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>
+```

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>
+  )
+}

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>