Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/idrawjs/idraw
A simple JavaScript framework for Drawing on the web.(一个面向Web绘图的JavaScript框架)
https://github.com/idrawjs/idraw
2d canvas design draw drawing fabric fabricjs figma graph graphics idraw idraw-studio idrawjs idrawjs-editor konva konvajs photoshop pixijs sketch
Last synced: 1 day ago
JSON representation
A simple JavaScript framework for Drawing on the web.(一个面向Web绘图的JavaScript框架)
- Host: GitHub
- URL: https://github.com/idrawjs/idraw
- Owner: idrawjs
- License: mit
- Created: 2021-05-23T11:46:41.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-24T08:57:20.000Z (5 months ago)
- Last Synced: 2025-01-24T12:04:14.611Z (9 days ago)
- Topics: 2d, canvas, design, draw, drawing, fabric, fabricjs, figma, graph, graphics, idraw, idraw-studio, idrawjs, idrawjs-editor, konva, konvajs, photoshop, pixijs, sketch
- Language: TypeScript
- Homepage: https://idrawjs.com/
- Size: 17.3 MB
- Stars: 1,024
- Watchers: 9
- Forks: 81
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-canvas - idraw - A simple JavaScript framework for Drawing on the web.   (Libraries / Graph Editing)
README
iDraw.js
iDraw.js is a simple JavaScript framework for Drawing on the web.
一个面向Web绘图的JavaScript框架
- [Documents](https://idrawjs.com/docs/en-US/) | [中文文档](https://idrawjs.com/docs/zh-CN/)
- [Online Playground](https://idrawjs.com/playground/) | [在线API示例](https://idrawjs.com/playground/)
- [Online Studio](https://idrawjs.com/studio/) | [在线绘图演示](https://idrawjs.com/studio/)
## Sponsors
iDraw.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider [sponsoring iDrawjs's development](https://opencollective.com/idrawjs).
[](https://opencollective.com/idrawjs)
## @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,
devicePixelRatio: 1,
}
);
idraw.addElement({
name: "rect-1",
x: 140,
y: 120,
w: 200,
h: 100,
type: "rect",
detail: {
background: "#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,
devicePixelRatio: 1,
});
idraw.addElement({
name: "rect-001",
x: 140,
y: 120,
w: 200,
h: 100,
type: "rect",
detail: {
background: "#f7d3c1",
borderRadius: 20,
borderWidth: 4,
borderColor: "#ff6032",
},
})
}, []);
return (
)
}
```
### Vue
```html
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.addElement({
name: "rect-001",
x: 140,
y: 120,
w: 200,
h: 100,
type: "rect",
detail: {
background: "#f7d3c1",
borderRadius: 20,
borderWidth: 4,
borderColor: "#ff6032",
},
})
})
```
## Contributing
We appreciate your help!
To contribute, please follow the steps:
- `git clone [email protected]:idrawjs/idraw.git`
- `cd idraw`
- `pnpm i`
- `npm run dev`
