mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 10:08:34 +00:00
docs: update readme and select color
This commit is contained in:
chenshenhai
parent
eca31413d2
commit
672002cc0e
2 changed files with 57 additions and 16 deletions
|
|
@ -23,5 +23,5 @@ export const keyDebugEnd0 = Symbol(`${key}_debug_end0`);
|
|||
export const selectWrapperBorderWidth = 2;
|
||||
export const resizeControllerBorderWidth = 4;
|
||||
export const areaBorderWidth = 1;
|
||||
// export const wrapperColor = '#1973ba';
|
||||
export const wrapperColor = '#1890ff';
|
||||
export const wrapperColor = '#1973ba';
|
||||
// export const wrapperColor = '#1890ff';
|
||||
|
|
|
|||
|
|
@ -2,12 +2,22 @@
|
|||
|
||||
<p align="center">iDraw.js is a simple JavaScript framework for Drawing on the web.</p>
|
||||
|
||||
<p align="center">一个面向Web绘图的JavaScript框架</p>
|
||||
|
||||
|
||||
<p align="center"><a href="https://idraw.js.org">idraw.js.org</a></p>
|
||||
|
||||
|
||||
<p align="center">
|
||||
|
||||
<a title="CI" href="https://github.com/idrawjs/idraw/actions/workflows/node.js.yml">
|
||||
<img src="https://github.com/idrawjs/idraw/actions/workflows/node.js.yml/badge.svg?branch=main" alt="CI">
|
||||
<a>
|
||||
|
||||
<!-- <a href="https://codecov.io/gh/idrawjs/idraw">
|
||||
<img src="https://codecov.io/gh/idrawjs/idraw/branch/main/graph/badge.svg?token=MICIC9SCKY"/>
|
||||
</a> -->
|
||||
|
||||
<a href="https://www.npmjs.com/package/idraw">
|
||||
<img src="https://img.shields.io/npm/v/idraw.svg?sanitize=idraw" alt="Version">
|
||||
</a>
|
||||
|
|
@ -17,21 +27,37 @@
|
|||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- [](https://github.com/idrawjs/idraw/actions/workflows/node.js.yml) -->
|
||||
|
||||
<hr/>
|
||||
|
||||
|
||||
- [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/)
|
||||
|
||||
|
||||
> 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](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](https://github.com/idrawjs/idraw/tree/v0.3)
|
||||
|
||||
|
||||
## @idraw/studio Preview
|
||||
|
||||
The preview of `@idraw/studo`. Click [here](https://github.com/idrawjs/studio) to get it.
|
||||
|
||||
<div style="text-align: center">
|
||||
<img src="./assets/preview/idraw-studio-preview.png" width="700" />
|
||||
</div>
|
||||
<p align="center">
|
||||
<img width="1145" alt="image" src="https://github.com/idrawjs/studio/assets/8216630/62b9bc71-5fca-421d-9c6e-b7512edc77f2" width="700">
|
||||
|
||||
<img width="1145" alt="image" src="https://github.com/idrawjs/studio/assets/8216630/5b4cc1dc-89e1-4f67-84fa-578667d42bf7" width="700">
|
||||
</p>
|
||||
|
||||
## Install
|
||||
|
||||
|
|
@ -41,6 +67,8 @@ npm i idraw
|
|||
|
||||
## Getting Started
|
||||
|
||||
### Common
|
||||
|
||||
```js
|
||||
import iDraw from 'idraw';
|
||||
|
||||
|
|
@ -49,8 +77,6 @@ const idraw = new iDraw(
|
|||
{
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
devicePixelRatio: 1,
|
||||
}
|
||||
);
|
||||
|
|
@ -62,7 +88,7 @@ idraw.addElement({
|
|||
h: 100,
|
||||
type: "rect",
|
||||
detail: {
|
||||
bgColor: "#f7d3c1",
|
||||
background: "#f7d3c1",
|
||||
borderRadius: 20,
|
||||
borderWidth: 4,
|
||||
borderColor: "#ff6032",
|
||||
|
|
@ -81,9 +107,7 @@ function Demo() {
|
|||
useEffect(() => {
|
||||
const idraw = new iDraw(ref.current, {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
height: 400,
|
||||
devicePixelRatio: 1,
|
||||
});
|
||||
idraw.addElement({
|
||||
|
|
@ -94,7 +118,7 @@ function Demo() {
|
|||
h: 100,
|
||||
type: "rect",
|
||||
detail: {
|
||||
bgColor: "#f7d3c1",
|
||||
background: "#f7d3c1",
|
||||
borderRadius: 20,
|
||||
borderWidth: 4,
|
||||
borderColor: "#ff6032",
|
||||
|
|
@ -123,9 +147,7 @@ const mount = ref();
|
|||
onMounted(() => {
|
||||
const idraw = new iDraw(mount.value, {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
height: 400,
|
||||
devicePixelRatio: 1,
|
||||
});
|
||||
idraw.addElement({
|
||||
|
|
@ -136,7 +158,7 @@ onMounted(() => {
|
|||
h: 100,
|
||||
type: "rect",
|
||||
detail: {
|
||||
bgColor: "#f7d3c1",
|
||||
background: "#f7d3c1",
|
||||
borderRadius: 20,
|
||||
borderWidth: 4,
|
||||
borderColor: "#ff6032",
|
||||
|
|
@ -145,3 +167,22 @@ onMounted(() => {
|
|||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
## 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`
|
||||
- `pnpm i`
|
||||
- `npm run dev`
|
||||
|
||||
### Step 2: Development
|
||||
|
||||
- `npm run dev` to select and develop single package
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue