iDraw.js

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

一个面向Web绘图的JavaScript框架

idraw.js.org

---

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

Note: At present, the development content of the main branch is v0.4, and it is currently in the development and reconstruction stage, mainly based on the v0.3 version for optimization and reconstruction. The npm module is version v0.3. If you encounter any problems while using the npm module, you can view the content of this branch: https://github.com/idrawjs/idraw/tree/v0.3

注意: 当前main分支开发内容为v0.4，目前处于开发重构阶段，主要基于v0.3版本进行优化重构。 目前npm 模块是v0.3 版本。 如果你在使用npm模块的过程中遇到什么问题，可以查看这个分支的内容： https://github.com/idrawjs/idraw/tree/v0.3

@idraw/studio Preview

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

Install

npm i idraw

Getting Started

Common

import iDraw from 'idraw';

const idraw = new iDraw(
  document.querySelector('#app'),
  {
    width: 600,
    height: 400,
    contextWidth: 600,
    contextHeight: 400,
    devicePixelRatio: 1,
  }
);
idraw.addElement({
  name: "rect-1",
  x: 140,
  y: 120,
  w: 200,
  h: 100,
  type: "rect",
  desc: {
    bgColor: "#f7d3c1",
    borderRadius: 20,
    borderWidth: 4,
    borderColor: "#ff6032",
  },
});

React

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

<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!

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