iDraw.js
iDraw.js is a simple JavaScript framework for Drawing on the web.
一个面向Web绘图的JavaScript框架
idraw.js.org
- [Documents](https://idraw.js.org/docs/en/) | [中文文档](https://idraw.js.org/docs/zh/)
- [Online Playground](https://idraw.js.org/playground/) | [在线API示例](https://idraw.js.org/playground/)
- [Online Studio](https://idraw.js.org/studio/) | [在线绘图演示](https://idraw.js.org/studio/)
## @idraw/studio Preview
The preview of `@idraw/studo`. Click [here](https://github.com/idrawjs/studio) to get it.
## Install
```
npm i idraw
```
## Getting Started
### Common
```js
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
```jsx
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 (
)
}
```
### Vue
```html
```
## 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
