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,
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 [email protected]:idrawjs/idraw.gitcd idrawnpm inpm run init
Step 2: Development
Simple Mode
npm run startto select and develop single package
Complete Mode
npm run devfor compiling all packagesnpm run dev ${module}for compiling single module such asidraw
npm run servefor starting a server- http://127.0.0.1:8080