idrawjs/idraw

idrawjs/idraw has 1,099 GitHub stars and 92 forks. GitHot measured -1 stars in 24 hours, -2 in 7 days, and -3 in 15 days. Last checked 2026-11-11 13:48 UTC. Last push 2026-03-29.

Comment ces chiffres sont mesurés

A simple JavaScript framework for Drawing on the web.(一个面向Web绘图的JavaScript框架)

1,099 étoiles 92 forks

Progression mesurée des étoiles

in 24h: -1
in 7 days: -2
in 15 days: -3
in 1 month: Mise à jour retardée

Variations nettes sur des périodes qui se chevauchent, pas des totaux quotidiens. Les mesures absentes restent vides. Les étoiles indiquent l’intérêt, pas la qualité.

README.md

Original

iDraw.js Logo

iDraw.js

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

一个面向Web绘图的JavaScript框架

idrawjs.com

@idraw/studio Preview

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

idraw-studio-light-theme idraw-studio-dark-theme

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>