diff --git a/.vitepress/config.mts b/.vitepress/config.mts index 2f2e62a..9d53039 100644 --- a/.vitepress/config.mts +++ b/.vitepress/config.mts @@ -80,6 +80,7 @@ export default defineConfig({ }, nav: [ { text: '主页', link: '/zh-CN/' }, + { text: '捐赠', link: '/zh-CN/sponsor' }, { text: '演示', link: 'https://idrawjs.com/playground/' } ], diff --git a/docs/404.html b/docs/404.html index ebd945c..6d5d66b 100644 --- a/docs/404.html +++ b/docs/404.html @@ -15,7 +15,7 @@
iDraw.js

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home
- + \ No newline at end of file diff --git a/docs/assets/en-US_sponsor.md.l1E-QegF.js b/docs/assets/en-US_sponsor.md.l1E-QegF.js new file mode 100644 index 0000000..08fec6e --- /dev/null +++ b/docs/assets/en-US_sponsor.md.l1E-QegF.js @@ -0,0 +1 @@ +import{_ as e,o,c as s,R as r}from"./chunks/framework.IreutGsD.js";const f=JSON.parse('{"title":"Become an iDraw.js Sponsor","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/sponsor.md","filePath":"en-US/sponsor.md"}'),a={name:"en-US/sponsor.md"},n=r('

Become an iDraw.js Sponsor ​

iDraw.js is an MIT licensed open source project and completely free to use. The tremendous amount of effort needed to maintain this framework and develop new features for the project is only made sustainable thanks to the generous financial backing of our sponsors.

How to Sponsor ​

Sponsorships can be done via OpenCollective (https://opencollective.com/idrawjs). Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in Sponsorship Tiers.

',4),t=[n];function i(c,p,l,d,h,_){return o(),s("div",null,t)}const u=e(a,[["render",i]]);export{f as __pageData,u as default}; diff --git a/docs/assets/en-US_sponsor.md.l1E-QegF.lean.js b/docs/assets/en-US_sponsor.md.l1E-QegF.lean.js new file mode 100644 index 0000000..874d97c --- /dev/null +++ b/docs/assets/en-US_sponsor.md.l1E-QegF.lean.js @@ -0,0 +1 @@ +import{_ as e,o,c as s,R as r}from"./chunks/framework.IreutGsD.js";const f=JSON.parse('{"title":"Become an iDraw.js Sponsor","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/sponsor.md","filePath":"en-US/sponsor.md"}'),a={name:"en-US/sponsor.md"},n=r("",4),t=[n];function i(c,p,l,d,h,_){return o(),s("div",null,t)}const u=e(a,[["render",i]]);export{f as __pageData,u as default}; diff --git a/docs/assets/en-US_sponsor.md.q43c77cZ.js b/docs/assets/en-US_sponsor.md.q43c77cZ.js deleted file mode 100644 index f7b5b02..0000000 --- a/docs/assets/en-US_sponsor.md.q43c77cZ.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as e,o,c as s,R as r}from"./chunks/framework.IreutGsD.js";const f=JSON.parse('{"title":"Become a iDraw.js Sponsor","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/sponsor.md","filePath":"en-US/sponsor.md"}'),a={name:"en-US/sponsor.md"},n=r('

Become a iDraw.js Sponsor ​

iDraw.js is an MIT licensed open source project and completely free to use. The tremendous amount of effort needed to maintain this framework and develop new features for the project is only made sustainable thanks to the generous financial backing of our sponsors.

How to Sponsor ​

Sponsorships can be done via OpenCollective (https://opencollective.com/idrawjs). Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in Sponsorship Tiers.

',4),t=[n];function i(c,p,l,d,h,_){return o(),s("div",null,t)}const u=e(a,[["render",i]]);export{f as __pageData,u as default}; diff --git a/docs/assets/en-US_sponsor.md.q43c77cZ.lean.js b/docs/assets/en-US_sponsor.md.q43c77cZ.lean.js deleted file mode 100644 index d5e4c28..0000000 --- a/docs/assets/en-US_sponsor.md.q43c77cZ.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as e,o,c as s,R as r}from"./chunks/framework.IreutGsD.js";const f=JSON.parse('{"title":"Become a iDraw.js Sponsor","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/sponsor.md","filePath":"en-US/sponsor.md"}'),a={name:"en-US/sponsor.md"},n=r("",4),t=[n];function i(c,p,l,d,h,_){return o(),s("div",null,t)}const u=e(a,[["render",i]]);export{f as __pageData,u as default}; diff --git a/docs/assets/zh-CN_sponsor.md.QhfS_xCH.js b/docs/assets/zh-CN_sponsor.md.QhfS_xCH.js new file mode 100644 index 0000000..957fbda --- /dev/null +++ b/docs/assets/zh-CN_sponsor.md.QhfS_xCH.js @@ -0,0 +1 @@ +import{_ as e,o,c as s,R as r}from"./chunks/framework.IreutGsD.js";const f=JSON.parse('{"title":"Become an iDraw.js Sponsor","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/sponsor.md","filePath":"zh-CN/sponsor.md"}'),a={name:"zh-CN/sponsor.md"},n=r('

Become an iDraw.js Sponsor ​

iDraw.js is an MIT licensed open source project and completely free to use. The tremendous amount of effort needed to maintain this framework and develop new features for the project is only made sustainable thanks to the generous financial backing of our sponsors.

How to Sponsor ​

Sponsorships can be done via OpenCollective (https://opencollective.com/idrawjs). Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in Sponsorship Tiers.

',4),t=[n];function i(c,p,l,d,h,_){return o(),s("div",null,t)}const u=e(a,[["render",i]]);export{f as __pageData,u as default}; diff --git a/docs/assets/zh-CN_sponsor.md.QhfS_xCH.lean.js b/docs/assets/zh-CN_sponsor.md.QhfS_xCH.lean.js new file mode 100644 index 0000000..4cc1eb1 --- /dev/null +++ b/docs/assets/zh-CN_sponsor.md.QhfS_xCH.lean.js @@ -0,0 +1 @@ +import{_ as e,o,c as s,R as r}from"./chunks/framework.IreutGsD.js";const f=JSON.parse('{"title":"Become an iDraw.js Sponsor","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/sponsor.md","filePath":"zh-CN/sponsor.md"}'),a={name:"zh-CN/sponsor.md"},n=r("",4),t=[n];function i(c,p,l,d,h,_){return o(),s("div",null,t)}const u=e(a,[["render",i]]);export{f as __pageData,u as default}; diff --git a/docs/assets/zh-CN_sponsor.md.YS2_uQDR.js b/docs/assets/zh-CN_sponsor.md.YS2_uQDR.js deleted file mode 100644 index 5a20e77..0000000 --- a/docs/assets/zh-CN_sponsor.md.YS2_uQDR.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as e,o,c as s,R as r}from"./chunks/framework.IreutGsD.js";const f=JSON.parse('{"title":"Become a iDraw.js Sponsor","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/sponsor.md","filePath":"zh-CN/sponsor.md"}'),a={name:"zh-CN/sponsor.md"},t=r('

Become a iDraw.js Sponsor ​

iDraw.js is an MIT licensed open source project and completely free to use. The tremendous amount of effort needed to maintain this framework and develop new features for the project is only made sustainable thanks to the generous financial backing of our sponsors.

How to Sponsor ​

Sponsorships can be done via OpenCollective (https://opencollective.com/idrawjs). Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in Sponsorship Tiers.

',4),n=[t];function i(c,p,l,d,h,_){return o(),s("div",null,n)}const u=e(a,[["render",i]]);export{f as __pageData,u as default}; diff --git a/docs/assets/zh-CN_sponsor.md.YS2_uQDR.lean.js b/docs/assets/zh-CN_sponsor.md.YS2_uQDR.lean.js deleted file mode 100644 index 6992857..0000000 --- a/docs/assets/zh-CN_sponsor.md.YS2_uQDR.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as e,o,c as s,R as r}from"./chunks/framework.IreutGsD.js";const f=JSON.parse('{"title":"Become a iDraw.js Sponsor","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/sponsor.md","filePath":"zh-CN/sponsor.md"}'),a={name:"zh-CN/sponsor.md"},t=r("",4),n=[t];function i(c,p,l,d,h,_){return o(),s("div",null,n)}const u=e(a,[["render",i]]);export{f as __pageData,u as default}; diff --git a/docs/en-US/api/add-element.html b/docs/en-US/api/add-element.html index 226b2f4..cfad8d7 100644 --- a/docs/en-US/api/add-element.html +++ b/docs/en-US/api/add-element.html @@ -42,7 +42,7 @@ borderColor: '#ff6032' } });

Example ​

More Demo >>

- + \ No newline at end of file diff --git a/docs/en-US/api/centerContent.html b/docs/en-US/api/centerContent.html index 67ee3e4..8422adc 100644 --- a/docs/en-US/api/centerContent.html +++ b/docs/en-US/api/centerContent.html @@ -35,7 +35,7 @@ }); idraw.centerContent();

Example ​

More Demo

- + \ No newline at end of file diff --git a/docs/en-US/api/delete-element.html b/docs/en-US/api/delete-element.html index e999fba..1a0d216 100644 --- a/docs/en-US/api/delete-element.html +++ b/docs/en-US/api/delete-element.html @@ -36,7 +36,7 @@ const uuid = idraw.getData().elements[0].uuid; idraw.deleteElement(uuid);

示例 ​

Example ​

More Demo >>

- + \ No newline at end of file diff --git a/docs/en-US/api/get-data.html b/docs/en-US/api/get-data.html index 8d7ffba..a8a0c9f 100644 --- a/docs/en-US/api/get-data.html +++ b/docs/en-US/api/get-data.html @@ -50,7 +50,7 @@ const resultData = idraw.getData(); console.log(resultData);

Example ​

More Demo

- + \ No newline at end of file diff --git a/docs/en-US/api/move-element.html b/docs/en-US/api/move-element.html index 6d26556..ab92437 100644 --- a/docs/en-US/api/move-element.html +++ b/docs/en-US/api/move-element.html @@ -36,7 +36,7 @@ const uuid = idraw.getData().elements[0].uuid; idraw.moveElement(uuid, { position: [1, 2] });

Example ​

More Demo

- + \ No newline at end of file diff --git a/docs/en-US/api/resize.html b/docs/en-US/api/resize.html index 36ef973..97e1660 100644 --- a/docs/en-US/api/resize.html +++ b/docs/en-US/api/resize.html @@ -39,7 +39,7 @@ height: 200, devicePixelRatio: 2 });

Example ​

More Demo

- + \ No newline at end of file diff --git a/docs/en-US/api/select-element.html b/docs/en-US/api/select-element.html index 92d7e64..99fa3c8 100644 --- a/docs/en-US/api/select-element.html +++ b/docs/en-US/api/select-element.html @@ -35,7 +35,7 @@ const resultData = idraw.getData(); idraw.selectElement(resultData.elements[0].uuid);

Example ​

More Demo >>

- + \ No newline at end of file diff --git a/docs/en-US/api/set-data.html b/docs/en-US/api/set-data.html index 4d524e3..847c7a4 100644 --- a/docs/en-US/api/set-data.html +++ b/docs/en-US/api/set-data.html @@ -46,7 +46,7 @@ ] }; idraw.setData(data);

Example ​

More Demo

- + \ No newline at end of file diff --git a/docs/en-US/api/update-element.html b/docs/en-US/api/update-element.html index 2403953..6f3df8f 100644 --- a/docs/en-US/api/update-element.html +++ b/docs/en-US/api/update-element.html @@ -39,7 +39,7 @@ elem.detail.color = '#f0f0f0'; idraw.updateData(elem);

Example ​

More Demo >>

- + \ No newline at end of file diff --git a/docs/en-US/element/circle.html b/docs/en-US/element/circle.html index a6a552e..56eb3c0 100644 --- a/docs/en-US/element/circle.html +++ b/docs/en-US/element/circle.html @@ -50,7 +50,7 @@ borderColor: '#3f51b5' } };

Demo Preview ​

More Demo >>

- + \ No newline at end of file diff --git a/docs/en-US/element/group.html b/docs/en-US/element/group.html index af0139f..2bf87e3 100644 --- a/docs/en-US/element/group.html +++ b/docs/en-US/element/group.html @@ -49,7 +49,7 @@ children: [] } };

Demo Preview ​

More Demo >>

- + \ No newline at end of file diff --git a/docs/en-US/element/html.html b/docs/en-US/element/html.html index 0576a13..2814fcc 100644 --- a/docs/en-US/element/html.html +++ b/docs/en-US/element/html.html @@ -86,7 +86,7 @@ ` } };

Demo Preview ​

More Demo >>

- + \ No newline at end of file diff --git a/docs/en-US/element/image.html b/docs/en-US/element/image.html index b616ad3..a156d3b 100644 --- a/docs/en-US/element/image.html +++ b/docs/en-US/element/image.html @@ -41,7 +41,7 @@ src: './image/github.png' } };

Demo Preview ​

More Demo >>

- + \ No newline at end of file diff --git a/docs/en-US/element/info.html b/docs/en-US/element/info.html index dba3ee9..44ad91d 100644 --- a/docs/en-US/element/info.html +++ b/docs/en-US/element/info.html @@ -68,7 +68,7 @@ // Set drawing-data for rendering view idraw.setData(data);

Demo Preview ​

More Demo >>

- + \ No newline at end of file diff --git a/docs/en-US/element/path.html b/docs/en-US/element/path.html index 03f3a34..d5d4a8e 100644 --- a/docs/en-US/element/path.html +++ b/docs/en-US/element/path.html @@ -77,7 +77,7 @@ originW: 80 } };

Demo Preview ​

More Demo >>

- + \ No newline at end of file diff --git a/docs/en-US/element/rect.html b/docs/en-US/element/rect.html index 721cdb0..32b1288 100644 --- a/docs/en-US/element/rect.html +++ b/docs/en-US/element/rect.html @@ -50,7 +50,7 @@ borderColor: '#3f51b5' } };

Demo Preview ​

More Demo >>

- + \ No newline at end of file diff --git a/docs/en-US/element/svg.html b/docs/en-US/element/svg.html index fc6b9a3..5fa8a9c 100644 --- a/docs/en-US/element/svg.html +++ b/docs/en-US/element/svg.html @@ -41,7 +41,7 @@ svg: `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="400" height="400"><path d="M512 1013.76c-277.11488 0-501.76-224.64512-501.76-501.76S234.88512 10.24 512 10.24s501.76 224.64512 501.76 501.76-224.64512 501.76-501.76 501.76z m0-51.02592c248.9344 0 450.73408-201.79968 450.73408-450.73408 0-248.9344-201.79968-450.73408-450.73408-450.73408-248.9344 0-450.73408 201.79968-450.73408 450.73408 0 248.9344 201.79968 450.73408 450.73408 450.73408zM456.9856 637.9008l295.45984-339.94752a26.4192 26.4192 0 0 1 37.59616-2.31936 28.32896 28.32896 0 0 1 3.10784 38.8608l-307.01568 380.38016a30.72 30.72 0 0 1-42.90048 4.84864L235.44832 556.2368a32.128 32.128 0 0 1-5.74976-44.6464 32.1536 32.1536 0 0 1 44.544-6.58944l182.74304 132.90496z" fill="#1890ff"></path></svg>` } };

Demo Preview ​

More Demo >>

- + \ No newline at end of file diff --git a/docs/en-US/element/text.html b/docs/en-US/element/text.html index 8860a3d..d439eb7 100644 --- a/docs/en-US/element/text.html +++ b/docs/en-US/element/text.html @@ -58,7 +58,7 @@ borderColor: '#3f51b5' } };

Demo Preview ​

More Demo

- + \ No newline at end of file diff --git a/docs/en-US/guide/class-idraw.html b/docs/en-US/guide/class-idraw.html index cf9556f..cc64529 100644 --- a/docs/en-US/guide/class-idraw.html +++ b/docs/en-US/guide/class-idraw.html @@ -36,7 +36,7 @@ enableTextEdit?: boolean; enableDrag?: boolean; };

Options Properties ​

PropertyDescriptionTypeDefaultRequiredOthers
widthDrawing board's widthnumber-true-
heightDrawing board's heightnumber-true-
devicePixelRatioDevice pixel scalenumber1false-
enableScrollEnable canvas scrollbooleantruefalse-
enableSelectEnable canvas select elements, Mutually exclusive with enableDragbooleantruefalse-
enableScaleEnable scalebooleantruefalse-
enableRulerEnable rulerbooleantruefalse-
enableTextEditEnable editing textbooleantruefalse-
enableDragEnable drag feature, Mutually exclusive with enableSelectbooleanfalsefalse-

Options Preivew ​

More Demo >>

- + \ No newline at end of file diff --git a/docs/en-US/guide/installation.html b/docs/en-US/guide/installation.html index b67a376..dd7743e 100644 --- a/docs/en-US/guide/installation.html +++ b/docs/en-US/guide/installation.html @@ -29,7 +29,7 @@ }); })(); </script>

Download and Self Host ​

If you want to avoid using build tools but can't use CDN in production then you can download the relevant .js file and host it using your own web server. You can include it using a <script> tag, just like with the CDN approach.

The files can be browsed and download from a CDN such as unpkg .

- + \ No newline at end of file diff --git a/docs/en-US/guide/introduction.html b/docs/en-US/guide/introduction.html index 505c9e7..82c9463 100644 --- a/docs/en-US/guide/introduction.html +++ b/docs/en-US/guide/introduction.html @@ -47,7 +47,7 @@ devicePixelRatio: 2 }); idraw.setData(data); - + \ No newline at end of file diff --git a/docs/en-US/guide/quickstart.html b/docs/en-US/guide/quickstart.html index cae70dc..e2235a4 100644 --- a/docs/en-US/guide/quickstart.html +++ b/docs/en-US/guide/quickstart.html @@ -47,7 +47,7 @@ // Setting data idraw.setData(data);

Now, we can start the tutorials for using iDraw.js. O(∩_∩)O~

- + \ No newline at end of file diff --git a/docs/en-US/index.html b/docs/en-US/index.html index 3d92127..a69c57d 100644 --- a/docs/en-US/index.html +++ b/docs/en-US/index.html @@ -18,7 +18,7 @@
iDraw.js

English

中文

English

中文

Appearance

iDraw.js

Drawing easier on the web.

A simple JavaScript framework for Drawing on the web.

Quick Started
Playground
iDraw Studio

High web compatibility

All based on Canvas 2D API drawing

Extremely simple way to use

There are no complicated operations, only a few simple APIs for drawing operations

Data-Driven drawing

Rely on data to control drawing operations

- + \ No newline at end of file diff --git a/docs/en-US/sponsor.html b/docs/en-US/sponsor.html index d28c256..8c6bc0a 100644 --- a/docs/en-US/sponsor.html +++ b/docs/en-US/sponsor.html @@ -3,7 +3,7 @@ - Become a iDraw.js Sponsor | iDraw.js + Become an iDraw.js Sponsor | iDraw.js @@ -12,13 +12,13 @@ - + -
iDraw.js

English

中文

English

中文

Appearance

Become a iDraw.js Sponsor ​

iDraw.js is an MIT licensed open source project and completely free to use. The tremendous amount of effort needed to maintain this framework and develop new features for the project is only made sustainable thanks to the generous financial backing of our sponsors.

How to Sponsor ​

Sponsorships can be done via OpenCollective (https://opencollective.com/idrawjs). Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in Sponsorship Tiers.

- +
iDraw.js

English

中文

English

中文

Appearance

Become an iDraw.js Sponsor ​

iDraw.js is an MIT licensed open source project and completely free to use. The tremendous amount of effort needed to maintain this framework and develop new features for the project is only made sustainable thanks to the generous financial backing of our sponsors.

How to Sponsor ​

Sponsorships can be done via OpenCollective (https://opencollective.com/idrawjs). Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in Sponsorship Tiers.

+ \ No newline at end of file diff --git a/docs/hashmap.json b/docs/hashmap.json index 83b11d3..85e3d87 100644 --- a/docs/hashmap.json +++ b/docs/hashmap.json @@ -1 +1 @@ -{"en-us_api_add-element.md":"b3Et3w3u","en-us_api_select-element.md":"tJMTcCuY","en-us_guide_class-idraw.md":"VR4c90An","en-us_element_path.md":"_4x2T3ul","en-us_element_rect.md":"7cWviSrn","en-us_element_svg.md":"LJLh239Y","zh-cn_api_resize.md":"d_v7X8ZG","zh-cn_api_set-data.md":"nlDkL67y","zh-cn_api_select-element.md":"9tr0VLHg","en-us_element_text.md":"3ZddzvzD","en-us_api_resize.md":"o4DGrfMW","en-us_api_move-element.md":"ulp-nKBT","en-us_guide_installation.md":"BW1J3qNC","en-us_api_delete-element.md":"9i5KMvfA","en-us_api_get-data.md":"dgOAj0R9","en-us_api_centercontent.md":"3i-VnbTr","index.md":"nNypbIOY","zh-cn_api_centercontent.md":"bKf3NvFM","zh-cn_api_get-data.md":"R4Jdjwtp","en-us_api_update-element.md":"Gx25Vqzh","zh-cn_api_add-element.md":"Zt_40QgL","zh-cn_api_delete-element.md":"B7hq6XAp","en-us_api_set-data.md":"TplnoHyK","en-us_element_group.md":"1d2wbPci","en-us_element_image.md":"G5EQyACZ","zh-cn_api_move-element.md":"GNHqcqPJ","en-us_element_html.md":"LlWj6evC","en-us_element_info.md":"DlSWSLeR","en-us_sponsor.md":"q43c77cZ","en-us_element_circle.md":"vtzwdLza","en-us_guide_introduction.md":"Qv_rgoBW","zh-cn_element_circle.md":"YIt9unDt","en-us_guide_quickstart.md":"HeathdSr","en-us_index.md":"FMW812Gv","zh-cn_api_update-element.md":"JO7ArVfG","zh-cn_element_group.md":"FyGuwSG7","zh-cn_element_text.md":"EiEhZE43","zh-cn_guide_class-idraw.md":"xUf63qlT","zh-cn_element_html.md":"kCl3t9-f","zh-cn_element_rect.md":"MyQHSqLF","zh-cn_element_info.md":"5YcjSz6T","zh-cn_sponsor.md":"YS2_uQDR","zh-cn_element_path.md":"iSyxwEFn","zh-cn_index.md":"o1kpu-74","zh-cn_element_image.md":"lP9HN9oN","zh-cn_guide_introduction.md":"exdgC_Z5","zh-cn_guide_installation.md":"JPGnnjdu","zh-cn_guide_quickstart.md":"nIOncVwC","zh-cn_element_svg.md":"SWBoQRT1"} +{"en-us_api_add-element.md":"b3Et3w3u","en-us_api_centercontent.md":"3i-VnbTr","en-us_api_get-data.md":"dgOAj0R9","en-us_api_move-element.md":"ulp-nKBT","en-us_api_delete-element.md":"9i5KMvfA","en-us_api_select-element.md":"tJMTcCuY","en-us_api_set-data.md":"TplnoHyK","en-us_api_resize.md":"o4DGrfMW","en-us_element_circle.md":"vtzwdLza","en-us_element_image.md":"G5EQyACZ","en-us_element_group.md":"1d2wbPci","en-us_element_html.md":"LlWj6evC","en-us_element_svg.md":"LJLh239Y","en-us_element_text.md":"3ZddzvzD","en-us_element_rect.md":"7cWviSrn","en-us_guide_class-idraw.md":"VR4c90An","en-us_element_path.md":"_4x2T3ul","en-us_guide_installation.md":"BW1J3qNC","en-us_element_info.md":"DlSWSLeR","zh-cn_api_select-element.md":"9tr0VLHg","zh-cn_element_circle.md":"YIt9unDt","zh-cn_api_move-element.md":"GNHqcqPJ","zh-cn_api_resize.md":"d_v7X8ZG","en-us_index.md":"FMW812Gv","en-us_sponsor.md":"l1E-QegF","index.md":"nNypbIOY","zh-cn_api_add-element.md":"Zt_40QgL","zh-cn_element_group.md":"FyGuwSG7","zh-cn_api_update-element.md":"JO7ArVfG","zh-cn_api_set-data.md":"nlDkL67y","en-us_api_update-element.md":"Gx25Vqzh","en-us_guide_introduction.md":"Qv_rgoBW","zh-cn_api_centercontent.md":"bKf3NvFM","zh-cn_api_delete-element.md":"B7hq6XAp","zh-cn_api_get-data.md":"R4Jdjwtp","en-us_guide_quickstart.md":"HeathdSr","zh-cn_element_path.md":"iSyxwEFn","zh-cn_element_html.md":"kCl3t9-f","zh-cn_element_rect.md":"MyQHSqLF","zh-cn_element_svg.md":"SWBoQRT1","zh-cn_element_image.md":"lP9HN9oN","zh-cn_element_info.md":"5YcjSz6T","zh-cn_guide_installation.md":"JPGnnjdu","zh-cn_element_text.md":"EiEhZE43","zh-cn_guide_class-idraw.md":"xUf63qlT","zh-cn_sponsor.md":"QhfS_xCH","zh-cn_guide_introduction.md":"exdgC_Z5","zh-cn_index.md":"o1kpu-74","zh-cn_guide_quickstart.md":"nIOncVwC"} diff --git a/docs/index.html b/docs/index.html index 772743a..3a19b58 100644 --- a/docs/index.html +++ b/docs/index.html @@ -18,7 +18,7 @@
iDraw.js

Appearance

iDraw.js

Drawing easier on the web.

A simple JavaScript framework for Drawing on the web.

Quick Started
中文文档
iDraw Studio

High web compatibility

All based on Canvas 2D API drawing

Extremely simple way to use

There are no complicated operations, only a few simple APIs for drawing operations

Data-Driven drawing

Rely on data to control drawing operations

- + \ No newline at end of file diff --git a/docs/zh-CN/api/add-element.html b/docs/zh-CN/api/add-element.html index 4d4edbd..40ec20c 100644 --- a/docs/zh-CN/api/add-element.html +++ b/docs/zh-CN/api/add-element.html @@ -17,7 +17,7 @@ -
iDraw.js

中文

English

中文

English

Appearance

addElement ​

说明 ​

addElement 对图画添加元素，并且触发重新渲染。

参数 ​

  • {object} element 元素内容，具体元素数据格式可查询 画图元素 。
  • {object} { position?: number[] }，可选配置，position 元素索引位置，比如 [1, 2] 代表把元素加入第2个元素（必须是Group类型）的第3个位置上。

返回值 ​

  • {object} 返回完整的data数据。

用法 ​

js
import { iDraw } from 'idraw';
+    
iDraw.js
中文
English
中文
English
Appearance
addElement ​
说明 ​
addElement 对图画添加元素，并且触发重新渲染。
参数 ​
  • {object} element 元素内容，具体元素数据格式可查询 画图元素 。
  • {object} { position?: number[] }，可选配置，position 元素索引位置，比如 [1, 2] 代表把元素加入第2个元素（必须是Group类型）的第3个位置上。
返回值 ​
  • {object} 返回完整的data数据。
用法 ​
js
import { iDraw } from 'idraw';
 
 const app = document.querySelector('#app');
 const options = {
@@ -42,7 +42,7 @@
     borderColor: '#ff6032'
   }
 });
示例 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/api/centerContent.html b/docs/zh-CN/api/centerContent.html
index 23a5be2..44e487d 100644
--- a/docs/zh-CN/api/centerContent.html
+++ b/docs/zh-CN/api/centerContent.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
centerContent ​
说明 ​
centerContent 让内容在视图居中显示，如果内容尺寸超出视图，就会把内容按比例缩小居中在视图中。
参数 ​
  • {object} options
    • {Data} options.data 可选，计算居中尺寸的新内容数据。
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
中文
English
中文
English
Appearance
centerContent ​
说明 ​
centerContent 让内容在视图居中显示，如果内容尺寸超出视图，就会把内容按比例缩小居中在视图中。
参数 ​
  • {object} options
    • {Data} options.data 可选，计算居中尺寸的新内容数据。
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
 
 const app = document.querySelector('#app');
 const options = {
@@ -35,7 +35,7 @@
 });
 
 idraw.centerContent();
示例 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/api/delete-element.html b/docs/zh-CN/api/delete-element.html
index 0955d09..6c6612f 100644
--- a/docs/zh-CN/api/delete-element.html
+++ b/docs/zh-CN/api/delete-element.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
deleteElement ​
说明 ​
deleteElement 根据元素的uuid，将图画中对应的元素删除，并且触发重新渲染。
参数 ​
  • {string} uuid 元素唯一ID
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
中文
English
中文
English
Appearance
deleteElement ​
说明 ​
deleteElement 根据元素的uuid，将图画中对应的元素删除，并且触发重新渲染。
参数 ​
  • {string} uuid 元素唯一ID
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
 
 const app = document.querySelector('#app');
 const options = {
@@ -36,7 +36,7 @@
 const uuid = idraw.getData().elements[0].uuid;
 
 idraw.deleteElement(uuid);
示例 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/api/get-data.html b/docs/zh-CN/api/get-data.html
index 73dde60..9edbb06 100644
--- a/docs/zh-CN/api/get-data.html
+++ b/docs/zh-CN/api/get-data.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
getData ​
说明 ​
getData 用于获取当前画图内容的数据。
参数 ​
  • {object} options 选项，非必填 
    • {boolean} options.compact 压缩，非必选
返回值 ​
  • {object} data 图画的JSON对象数据
用法 ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
中文
English
中文
English
Appearance
getData ​
说明 ​
getData 用于获取当前画图内容的数据。
参数 ​
  • {object} options 选项，非必填 
    • {boolean} options.compact 压缩，非必选
返回值 ​
  • {object} data 图画的JSON对象数据
用法 ​
js
import { iDraw } from 'idraw';
 
 const data = {
   elements: [
@@ -50,7 +50,7 @@
 
 const resultData = idraw.getData();
 console.log(resultData);
示例 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/api/move-element.html b/docs/zh-CN/api/move-element.html
index 24b6712..2713e64 100644
--- a/docs/zh-CN/api/move-element.html
+++ b/docs/zh-CN/api/move-element.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
moveElement ​
说明 ​
moveElement 根据元素的uuid，将图画中对应的元素删除，并且触发重新渲染。
参数 ​
  • {string} uuid 元素唯一ID
  • {number[]} position 将元素移动到指定索引位置。比如 [1, 2] 代表把元素移动到第2个元素（必须是Group类型）的第3个位置上。
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
中文
English
中文
English
Appearance
moveElement ​
说明 ​
moveElement 根据元素的uuid，将图画中对应的元素删除，并且触发重新渲染。
参数 ​
  • {string} uuid 元素唯一ID
  • {number[]} position 将元素移动到指定索引位置。比如 [1, 2] 代表把元素移动到第2个元素（必须是Group类型）的第3个位置上。
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
 
 const app = document.querySelector('#app');
 const options = {
@@ -36,7 +36,7 @@
 const uuid = idraw.getData().elements[0].uuid;
 
 idraw.moveElement(uuid, { position: [1, 2] });
示例 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/api/resize.html b/docs/zh-CN/api/resize.html
index e16f869..4612bbc 100644
--- a/docs/zh-CN/api/resize.html
+++ b/docs/zh-CN/api/resize.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
resize ​
说明 ​
resize 可以对图画视图尺寸进行再次修改
参数 ​
  • {object} options 视图尺寸选项 
    • {number} options.width 画板宽度，非必选
    • {number} options.height 画板高度，非必选
    • {number} options.devicePixelRatio 设备像素比例，非必选
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
中文
English
中文
English
Appearance
resize ​
说明 ​
resize 可以对图画视图尺寸进行再次修改
参数 ​
  • {object} options 视图尺寸选项 
    • {number} options.width 画板宽度，非必选
    • {number} options.height 画板高度，非必选
    • {number} options.devicePixelRatio 设备像素比例，非必选
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
 
 const app = document.querySelector('#app');
 const options = {
@@ -39,7 +39,7 @@
   height: 200,
   devicePixelRatio: 2
 });
示例 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/api/select-element.html b/docs/zh-CN/api/select-element.html
index ff2af6d..3e27b90 100644
--- a/docs/zh-CN/api/select-element.html
+++ b/docs/zh-CN/api/select-element.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
selectElement ​
说明 ​
selectElement 根据元素的UUID选中图画中的元素。
参数 ​
  • {string} uuid 元素唯一ID
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
中文
English
中文
English
Appearance
selectElement ​
说明 ​
selectElement 根据元素的UUID选中图画中的元素。
参数 ​
  • {string} uuid 元素唯一ID
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
 
 const data = {
   elements: [
@@ -35,7 +35,7 @@
 const resultData = idraw.getData();
 
 idraw.selectElement(resultData.elements[0].uuid);
示例 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/api/set-data.html b/docs/zh-CN/api/set-data.html
index 21bd704..fc988c2 100644
--- a/docs/zh-CN/api/set-data.html
+++ b/docs/zh-CN/api/set-data.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
setData ​
说明 ​
setData 用于设置画图内容的数据，设置后会根据设置数据触发图画的重绘。
参数 ​
  • {object} data 画图数据对象
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
中文
English
中文
English
Appearance
setData ​
说明 ​
setData 用于设置画图内容的数据，设置后会根据设置数据触发图画的重绘。
参数 ​
  • {object} data 画图数据对象
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
 
 const app = document.querySelector('#app');
 const options = {
@@ -46,7 +46,7 @@
   ]
 };
 idraw.setData(data);
示例 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/api/update-element.html b/docs/zh-CN/api/update-element.html
index 16f0a9d..6541b62 100644
--- a/docs/zh-CN/api/update-element.html
+++ b/docs/zh-CN/api/update-element.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
updateElement ​
说明 ​
updateElement 更新图画中的元素，并且触发重新渲染。
参数 ​
  • {object} element 元素内容，具体元素数据格式可查询 画图元素 。
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
中文
English
中文
English
Appearance
updateElement ​
说明 ​
updateElement 更新图画中的元素，并且触发重新渲染。
参数 ​
  • {object} element 元素内容，具体元素数据格式可查询 画图元素 。
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
 
 const data = {
   elements: [
@@ -39,7 +39,7 @@
 elem.detail.color = '#f0f0f0';
 
 idraw.updateData(elem);
示例 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/element/circle.html b/docs/zh-CN/element/circle.html
index a3c26bd..edcdeee 100644
--- a/docs/zh-CN/element/circle.html
+++ b/docs/zh-CN/element/circle.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
圆形元素 ​
Circle ​
用来渲染圆形或椭圆形内容，具体格式如下所示：
ts
type Circle = {
+    
iDraw.js
中文
English
中文
English
Appearance
圆形元素 ​
Circle ​
用来渲染圆形或椭圆形内容，具体格式如下所示：
ts
type Circle = {
   type: 'circle';
   x: number;
   y: number;
@@ -50,7 +50,7 @@
     borderColor: '#3f51b5'
   }
 };
效果预览 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/element/group.html b/docs/zh-CN/element/group.html
index 9f51934..16ef029 100644
--- a/docs/zh-CN/element/group.html
+++ b/docs/zh-CN/element/group.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
组合元素 ​
Group ​
用来渲染组合内容，具体格式如下所示：
ts
type Group = {
+    
iDraw.js
中文
English
中文
English
Appearance
组合元素 ​
Group ​
用来渲染组合内容，具体格式如下所示：
ts
type Group = {
   type: 'group';
   x: number;
   y: number;
@@ -49,7 +49,7 @@
     children: []
   }
 };
效果预览 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/element/html.html b/docs/zh-CN/element/html.html
index ff3bc98..21f135f 100644
--- a/docs/zh-CN/element/html.html
+++ b/docs/zh-CN/element/html.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
HTML元素 ​
HTML ​
用来渲染HTML代码片，具体格式如下所示：
ts
type HTML = {
+    
iDraw.js
中文
English
中文
English
Appearance
HTML元素 ​
HTML ​
用来渲染HTML代码片，具体格式如下所示：
ts
type HTML = {
   type: 'html';
   x: number;
   y: number;
@@ -86,7 +86,7 @@
     `
   }
 };
效果预览 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/element/image.html b/docs/zh-CN/element/image.html
index 2e1cd9a..952c84d 100644
--- a/docs/zh-CN/element/image.html
+++ b/docs/zh-CN/element/image.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
图片元素 ​
Image ​
用来渲染图片内容，具体格式如下所示：
ts
type Image = {
+    
iDraw.js
中文
English
中文
English
Appearance
图片元素 ​
Image ​
用来渲染图片内容，具体格式如下所示：
ts
type Image = {
   type: 'image';
   x: number;
   y: number;
@@ -41,7 +41,7 @@
     src: './image/github.png'
   }
 };
效果预览 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/element/info.html b/docs/zh-CN/element/info.html
index 62a4cea..8e3f852 100644
--- a/docs/zh-CN/element/info.html
+++ b/docs/zh-CN/element/info.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
画图元素介绍 ​
什么是 iDraw.js 画图元素？ ​
iDraw.js 画图的内容都是基于“元素”构成的，画图的过程基本是围绕处理元素的位置、样式、内容等属性来实现画图的功能。
目前支持的有八种元素：
  1. Text 文本
  2. Rect 矩形
  3. Circle 圆形
  4. Image 图片
  5. SVG
  6. HTML
  7. Path 路径
  8. Group 组合
画图元素的信息 ​
数据基本格式 ​
tsx
type Element = {
+    
iDraw.js
中文
English
中文
English
Appearance
画图元素介绍 ​
什么是 iDraw.js 画图元素？ ​
iDraw.js 画图的内容都是基于“元素”构成的，画图的过程基本是围绕处理元素的位置、样式、内容等属性来实现画图的功能。
目前支持的有八种元素：
  1. Text 文本
  2. Rect 矩形
  3. Circle 圆形
  4. Image 图片
  5. SVG
  6. HTML
  7. Path 路径
  8. Group 组合
画图元素的信息 ​
数据基本格式 ​
tsx
type Element = {
   type: 'text' | 'rect' | 'circle' | 'image' | 'svg' | 'html' | 'path' | 'group';
   uuid: string;
   name?: string;
@@ -69,7 +69,7 @@
 
 // 设置元素数据，渲染画图内容
 idraw.setData(data);
示例预览 ​
Demo 完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/element/path.html b/docs/zh-CN/element/path.html
index 9a8aef3..086fb49 100644
--- a/docs/zh-CN/element/path.html
+++ b/docs/zh-CN/element/path.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
路径元素 ​
Path ​
用来渲染路径内容，具体格式如下所示：
ts
type Path = {
+    
iDraw.js
中文
English
中文
English
Appearance
路径元素 ​
Path ​
用来渲染路径内容，具体格式如下所示：
ts
type Path = {
   type: 'path';
   x: number;
   y: number;
@@ -77,7 +77,7 @@
     originW: 80
   }
 };
效果预览 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/element/rect.html b/docs/zh-CN/element/rect.html
index bd75836..2165bc5 100644
--- a/docs/zh-CN/element/rect.html
+++ b/docs/zh-CN/element/rect.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
矩形元素 ​
Rectangle ​
用来渲染矩形内容，具体格式如下所示：
ts
type Rect = {
+    
iDraw.js
中文
English
中文
English
Appearance
矩形元素 ​
Rectangle ​
用来渲染矩形内容，具体格式如下所示：
ts
type Rect = {
   type: 'rect';
   x: number;
   y: number;
@@ -50,7 +50,7 @@
     borderColor: '#3f51b5'
   }
 };
效果预览 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/element/svg.html b/docs/zh-CN/element/svg.html
index 5b0a6fd..549c3aa 100644
--- a/docs/zh-CN/element/svg.html
+++ b/docs/zh-CN/element/svg.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
SVG元素 ​
SVG ​
用来渲染SVG代码片，具体格式如下所示：
ts
type SVG = {
+    
iDraw.js
中文
English
中文
English
Appearance
SVG元素 ​
SVG ​
用来渲染SVG代码片，具体格式如下所示：
ts
type SVG = {
   type: 'svg';
   x: number;
   y: number;
@@ -41,7 +41,7 @@
     svg: `<svg  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"  width="400" height="400"><path d="M512 1013.76c-277.11488 0-501.76-224.64512-501.76-501.76S234.88512 10.24 512 10.24s501.76 224.64512 501.76 501.76-224.64512 501.76-501.76 501.76z m0-51.02592c248.9344 0 450.73408-201.79968 450.73408-450.73408 0-248.9344-201.79968-450.73408-450.73408-450.73408-248.9344 0-450.73408 201.79968-450.73408 450.73408 0 248.9344 201.79968 450.73408 450.73408 450.73408zM456.9856 637.9008l295.45984-339.94752a26.4192 26.4192 0 0 1 37.59616-2.31936 28.32896 28.32896 0 0 1 3.10784 38.8608l-307.01568 380.38016a30.72 30.72 0 0 1-42.90048 4.84864L235.44832 556.2368a32.128 32.128 0 0 1-5.74976-44.6464 32.1536 32.1536 0 0 1 44.544-6.58944l182.74304 132.90496z" fill="#1890ff"></path></svg>`
   }
 };
效果预览 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/element/text.html b/docs/zh-CN/element/text.html
index 724681e..6bd3d03 100644
--- a/docs/zh-CN/element/text.html
+++ b/docs/zh-CN/element/text.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
文本元素 ​
Text ​
用来渲染文字内容，具体格式如下所示：
ts
type Text = {
+    
iDraw.js
中文
English
中文
English
Appearance
文本元素 ​
Text ​
用来渲染文字内容，具体格式如下所示：
ts
type Text = {
   type: 'text';
   x: number;
   y: number;
@@ -59,7 +59,7 @@
     borderColor: '#3f51b5'
   }
 };
效果预览 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/guide/class-idraw.html b/docs/zh-CN/guide/class-idraw.html
index 9c03d0b..ee06a80 100644
--- a/docs/zh-CN/guide/class-idraw.html
+++ b/docs/zh-CN/guide/class-idraw.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
iDraw 类 ​
参数 ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
中文
English
中文
English
Appearance
iDraw 类 ​
参数 ​
js
import { iDraw } from 'idraw';
 const dom = document.querySelector('#app');
 const options = {
   width: 600,
@@ -36,7 +36,7 @@
   enableTextEdit?: boolean;
   enableDrag?: boolean;
 };
Options 属性 ​
属性说明类型默认值是否必填备注
width画板宽度number-true-
height画板高度number-true-
devicePixelRatio设备像素比例number1false-
enableScroll启用视图滚动booleantruefalse-
enableSelect启用元素选择（和enableDrag互斥）booleantruefalse-
enableScale启用视图缩放booleantruefalse-
enableRuler启用视图标尺booleantruefalse-
enableTextEdit启用文本编辑booleantruefalse-
enableDrag启用视图拖拽（和enableSelect互斥）booleanfalsefalse-
Options 效果预览 ​
Demo完整预览 Playground >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/guide/installation.html b/docs/zh-CN/guide/installation.html
index 61cfd35..eef6cff 100644
--- a/docs/zh-CN/guide/installation.html
+++ b/docs/zh-CN/guide/installation.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
安装 ​
最新版本 ​
iDraw.js
安装方式 ​
将 iDraw.js 添加到项目中有三种方式：
  1. 基于 NPM 安装
  2. 在页面上以 CDN 形式引入。
  3. 下载 JavaScript 文件，并且自托管JavaScript文件
NPM ​
在开发大型项目应用时候，推荐使用 NPM 的安装方式，可以更好的基于 Webpack 、 Rollup 和 Vite 等构建工具结合使用。
sh
npm install idraw
CDN ​
在小型项目应用场景或者学习场景时候，可以使用 CDN的方式引用最新的版本的 JavaScript 文件：
html
<script src="https://unpkg.com/idraw"></script>
html
<!-- 全局变量使用 -->
+    
iDraw.js
中文
English
中文
English
Appearance
安装 ​
最新版本 ​
iDraw.js
安装方式 ​
将 iDraw.js 添加到项目中有三种方式：
  1. 基于 NPM 安装
  2. 在页面上以 CDN 形式引入。
  3. 下载 JavaScript 文件，并且自托管JavaScript文件
NPM ​
在开发大型项目应用时候，推荐使用 NPM 的安装方式，可以更好的基于 Webpack 、 Rollup 和 Vite 等构建工具结合使用。
sh
npm install idraw
CDN ​
在小型项目应用场景或者学习场景时候，可以使用 CDN的方式引用最新的版本的 JavaScript 文件：
html
<script src="https://unpkg.com/idraw"></script>
html
<!-- 全局变量使用 -->
 <script>
   (function () {
     const { iDraw } = window.iDraw;
@@ -29,7 +29,7 @@
     });
   })();
 </script>
WARNING
不建议用 unpkg.com 站点的CDN资源的放在生产环境
自托管JavaScript文件 ​
如果不想使用构建工具，同时无法直接使用 CDN方式 调用，那么可以将相关的 .js 文件下载到项目本地或者服务器上托管。最后通过 <script> 方式引用，使用方法跟 CDN 的方式类似。
具体的 JavaScript文件 可以从 unpkg 这里下载最新的 iDraw.js 文件。

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/guide/introduction.html b/docs/zh-CN/guide/introduction.html
index 75d25c5..51f8cda 100644
--- a/docs/zh-CN/guide/introduction.html
+++ b/docs/zh-CN/guide/introduction.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
介绍 ​
iDraw.js 是什么 ​
iDraw.js 是基于浏览器中 Canvas API 的绘图能力实现的一套画图框架。
可以直接由数据驱动去渲染图画的渲染，同时能可视化操控 图画元素 的位置、形状和布局等信息。
iDraw.js 目前基于 MIT 开源协议托管在GitHub 和 NPM，所有使用者就都可以免费地使用在自己的项目中。
起步使用 ​
sh
npm install idraw
js
import { iDraw } from 'idraw';
+    
iDraw.js
中文
English
中文
English
Appearance
介绍 ​
iDraw.js 是什么 ​
iDraw.js 是基于浏览器中 Canvas API 的绘图能力实现的一套画图框架。
可以直接由数据驱动去渲染图画的渲染，同时能可视化操控 图画元素 的位置、形状和布局等信息。
iDraw.js 目前基于 MIT 开源协议托管在GitHub 和 NPM，所有使用者就都可以免费地使用在自己的项目中。
起步使用 ​
sh
npm install idraw
js
import { iDraw } from 'idraw';
 const data = {
   elements: [
     {
@@ -47,7 +47,7 @@
   devicePixelRatio: 2
 });
 idraw.setData(data);

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/guide/quickstart.html b/docs/zh-CN/guide/quickstart.html
index 6f6962c..2fd9135 100644
--- a/docs/zh-CN/guide/quickstart.html
+++ b/docs/zh-CN/guide/quickstart.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
快速上手 ​
第一个例子 ​
这是一个最简单的 iDraw.js 例子，绘制一个旋转的矩形。
安装模块 ​
sh
npm install idraw
渲染DOM的位置 ​
html
<div id="app"></div>
使用 iDraw.js ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
中文
English
中文
English
Appearance
快速上手 ​
第一个例子 ​
这是一个最简单的 iDraw.js 例子，绘制一个旋转的矩形。
安装模块 ​
sh
npm install idraw
渲染DOM的位置 ​
html
<div id="app"></div>
使用 iDraw.js ​
js
import { iDraw } from 'idraw';
 const data = {
   elements: [
     {
@@ -47,7 +47,7 @@
 
 // 设置数据
 idraw.setData(data);
至此，小伙伴们就可以愉快的开启 iDraw.js 的画图之旅啦！O(∩_∩)O~

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/index.html b/docs/zh-CN/index.html
index 8af8873..6e128fb 100644
--- a/docs/zh-CN/index.html
+++ b/docs/zh-CN/index.html
@@ -17,8 +17,8 @@
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
iDraw.js
让Web绘图更加简单.
一个面向Web绘图的JavaScript框架
快速开始
演示
产品 iDraw Studio
高兼容性
目前基于Canvas 2D API实现，能适应绝大部分主流浏览器。
用法简单
没有复杂的使用方式，只有简单的几个API来操作Web绘图。
数据驱动绘制
依赖数据来驱动图画的绘制

-    
+    
iDraw.js
中文
English
中文
English
Appearance
iDraw.js
让Web绘图更加简单.
一个面向Web绘图的JavaScript框架
快速开始
演示
产品 iDraw Studio
高兼容性
目前基于Canvas 2D API实现，能适应绝大部分主流浏览器。
用法简单
没有复杂的使用方式，只有简单的几个API来操作Web绘图。
数据驱动绘制
依赖数据来驱动图画的绘制

+    
     
   
 
\ No newline at end of file
diff --git a/docs/zh-CN/sponsor.html b/docs/zh-CN/sponsor.html
index d6399f2..ac4d3d2 100644
--- a/docs/zh-CN/sponsor.html
+++ b/docs/zh-CN/sponsor.html
@@ -3,7 +3,7 @@
   
     
     
-    Become a iDraw.js Sponsor | iDraw.js
+    Become an iDraw.js Sponsor | iDraw.js
     
     
     
@@ -12,13 +12,13 @@
     
     
     
-    
+    
     
     
   
   
-    
iDraw.js
中文
English
中文
English
Appearance
Become a iDraw.js Sponsor ​
iDraw.js is an MIT licensed open source project and completely free to use. The tremendous amount of effort needed to maintain this framework and develop new features for the project is only made sustainable thanks to the generous financial backing of our sponsors.
How to Sponsor ​
Sponsorships can be done via OpenCollective (https://opencollective.com/idrawjs). Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in Sponsorship Tiers.

-    
+    
iDraw.js
中文
English
中文
English
Appearance
Become an iDraw.js Sponsor ​
iDraw.js is an MIT licensed open source project and completely free to use. The tremendous amount of effort needed to maintain this framework and develop new features for the project is only made sustainable thanks to the generous financial backing of our sponsors.
How to Sponsor ​
Sponsorships can be done via OpenCollective (https://opencollective.com/idrawjs). Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in Sponsorship Tiers.

+    
     
   
 
\ No newline at end of file
diff --git a/src/en-US/sponsor.md b/src/en-US/sponsor.md
index aa6e944..55fa88f 100644
--- a/src/en-US/sponsor.md
+++ b/src/en-US/sponsor.md
@@ -1,4 +1,4 @@
-# Become a iDraw.js Sponsor
+# Become an iDraw.js Sponsor
 
 iDraw.js is an MIT licensed open source project and completely free to use. The tremendous amount of effort needed to maintain this framework and develop new features for the project is only made sustainable thanks to the generous financial backing of our sponsors.
 
diff --git a/src/zh-CN/sponsor.md b/src/zh-CN/sponsor.md
index aa6e944..55fa88f 100644
--- a/src/zh-CN/sponsor.md
+++ b/src/zh-CN/sponsor.md
@@ -1,4 +1,4 @@
-# Become a iDraw.js Sponsor
+# Become an iDraw.js Sponsor
 
 iDraw.js is an MIT licensed open source project and completely free to use. The tremendous amount of effort needed to maintain this framework and develop new features for the project is only made sustainable thanks to the generous financial backing of our sponsors.