iDraw.js
iDraw.js is a simple JavaScript framework for Drawing on the web.
一个面向Web绘图的JavaScript框架
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.gitcd idrawnpm inpm run init
Step 2: Development
npm run devto select and develop single package