iDraw.js

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

一个面向Web绘图的JavaScript框架

@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,
    devicePixelRatio: 1,
  }
);
idraw.addMaterial({
  name: "rect-1",
  type: "rect",
  x: 140,
  y: 120,
  width: 200,
  height: 100,
  fill: "#f7d3c1",
  strokeWidth: 4,
  stroke: "#ff6032",
  cornerRadius: 20,
});

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,
      devicePixelRatio: 1,
    });
    idraw.addMaterial({
      name: "rect-001",
      x: 140,
      y: 120,
      width: 200,
      height: 100,
      fill: "#f7d3c1",
      strokeWidth: 4,
      stroke: "#ff6032",
      cornerRadius: 20,
    })
  }, []);
  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,
    devicePixelRatio: 1,
  });
  idraw.addMaterial({
    name: "rect-001",
    x: 140,
    y: 120,
    width: 200,
    height: 100,
    fill: "#f7d3c1",
    strokeWidth: 4,
    stroke: "#ff6032",
    cornerRadius: 20,
  })
})
</script>

Contributing

We appreciate your help!

To contribute, please follow the steps:

git clone git@github.com:idrawjs/idraw.git
cd idraw
pnpm i
npm run dev