iDraw.js

A simple JavaScript framework for Drawing on the web

Drawing
idrawjs/idrawidraw.js.org/idraw

README

iDraw.js


iDraw.js is a simple JavaScript framework for Drawing on the web.


一个面向Web绘图的JavaScript框架



idraw.js.org




CI

    
Version License








- Documents | 中文文档
- Online Playground | 在线API示例
- Online Studio | 在线绘图演示

@idraw/studio Preview


The preview of @idraw/studo. Click here to get it.


Install


  1. ```
  2. npm i idraw
  3. ```

Getting Started


Common


  1. ```js
  2. import iDraw from 'idraw';

  4. const idraw = new iDraw(
  5.   document.querySelector('#app'),
  6.   {
  7.     width: 600,
  8.     height: 400,
  9.     contextWidth: 600,
  10.     contextHeight: 400,
  11.     devicePixelRatio: 1,
  12.   }
  13. );
  14. idraw.addElement({
  15.   name: "rect-1",
  16.   x: 140,
  17.   y: 120,
  18.   w: 200,
  19.   h: 100,
  20.   type: "rect",
  21.   desc: {
  22.     bgColor: "#f7d3c1",
  23.     borderRadius: 20,
  24.     borderWidth: 4,
  25.     borderColor: "#ff6032",
  26.   },
  27. });
  28. ```

React


  1. ```jsx
  2. import iDraw from 'idraw';
  3. import { useEffect, useRef } from 'react';

  5. function Demo() {
  6.   const ref = useRef(null);
  7.   useEffect(() => {
  8.     const idraw = new iDraw(ref.current, {
  9.       width: 600,
  10.       height: 400,
  11.       contextWidth: 600,
  12.       contextHeight: 400,
  13.       devicePixelRatio: 1,
  14.     });
  15.     idraw.addElement({
  16.       name: "rect-001",
  17.       x: 140,
  18.       y: 120,
  19.       w: 200,
  20.       h: 100,
  21.       type: "rect",
  22.       desc: {
  23.         bgColor: "#f7d3c1",
  24.         borderRadius: 20,
  25.         borderWidth: 4,
  26.         borderColor: "#ff6032",
  27.       },
  28.     })
  29.   }, []);

  31.   return (
  32.     <div ref={ref}></div>
  33.   )
  34. }
  35. ```

Vue


  1. ```html
  2. <template>
  3.   <div ref="mount"></div>
  4. </template>
  6. <script setup >
  7. import iDraw from 'idraw';
  8. import { ref, onMounted } from 'vue'
  9. const mount = ref();
  11. onMounted(() => {
  12.   const idraw = new iDraw(mount.value, {
  13.     width: 600,
  14.     height: 400,
  15.     contextWidth: 600,
  16.     contextHeight: 400,
  17.     devicePixelRatio: 1,
  18.   });
  19.   idraw.addElement({
  20.     name: "rect-001",
  21.     x: 140,
  22.     y: 120,
  23.     w: 200,
  24.     h: 100,
  25.     type: "rect",
  26.     desc: {
  27.       bgColor: "#f7d3c1",
  28.       borderRadius: 20,
  29.       borderWidth: 4,
  30.       borderColor: "#ff6032",
  31.     },
  32.   })
  33. })
  34. </script>
  35. ```


Contributing


We appreciate your help!

To contribute, please follow the steps:

Step 1: Prepare Project


- git clone git@github.com:idrawjs/idraw.git
- cd idraw
- npm i
- npm run init

Step 2: Development


- npm run dev to select and develop single package