From 319d86f1cbf4241be8fd027f00d83a4c44b8db66 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sun, 10 Mar 2024 20:49:38 +0800 Subject: [PATCH] docs: update pages --- docs/404.html | 2 +- ...> en-US_api_center-content.md.uYyT_FCL.js} | 8 ++-- ...-US_api_center-content.md.uYyT_FCL.lean.js | 1 + ...n-US_api_centerContent.md.3i-VnbTr.lean.js | 1 - .../en-US_api_enable-disable.md.idYW9YoD.js | 15 +++++++ ...-US_api_enable-disable.md.idYW9YoD.lean.js | 1 + ...fMW.js => en-US_api_resize.md.GVax-7Xj.js} | 8 ++-- ...s => en-US_api_resize.md.GVax-7Xj.lean.js} | 2 +- docs/assets/en-US_api_set-mode.md.DZ9KruA1.js | 10 +++++ .../en-US_api_set-mode.md.DZ9KruA1.lean.js | 1 + ...=> en-US_guide_class-idraw.md.hjw125-W.js} | 10 +---- ...-US_guide_class-idraw.md.hjw125-W.lean.js} | 2 +- ...> zh-CN_api_center-content.md._7DFhIjX.js} | 8 ++-- ...-CN_api_center-content.md._7DFhIjX.lean.js | 1 + ...h-CN_api_centerContent.md.bKf3NvFM.lean.js | 1 - .../zh-CN_api_enable-disable.md.qB2sgMeO.js | 15 +++++++ ...-CN_api_enable-disable.md.qB2sgMeO.lean.js | 1 + ...8ZG.js => zh-CN_api_resize.md.ioSXJvKI.js} | 6 +-- ...s => zh-CN_api_resize.md.ioSXJvKI.lean.js} | 0 docs/assets/zh-CN_api_set-mode.md.xjTJNW1U.js | 10 +++++ .../zh-CN_api_set-mode.md.xjTJNW1U.lean.js | 1 + ...=> zh-CN_guide_class-idraw.md.vXCwa6fJ.js} | 10 +---- ...-CN_guide_class-idraw.md.vXCwa6fJ.lean.js} | 2 +- docs/en-US/api/add-element.html | 4 +- docs/en-US/api/center-content.html | 39 ++++++++++++++++++ docs/en-US/api/centerContent.html | 41 ------------------- docs/en-US/api/delete-element.html | 4 +- docs/en-US/api/enable-disable.html | 38 +++++++++++++++++ docs/en-US/api/get-data.html | 6 +-- docs/en-US/api/move-element.html | 4 +- docs/en-US/api/resize.html | 14 +++---- docs/en-US/api/select-element.html | 6 +-- docs/en-US/api/set-data.html | 4 +- docs/en-US/api/set-mode.html | 33 +++++++++++++++ docs/en-US/api/update-element.html | 4 +- docs/en-US/element/circle.html | 4 +- docs/en-US/element/group.html | 4 +- docs/en-US/element/html.html | 4 +- docs/en-US/element/image.html | 4 +- docs/en-US/element/info.html | 4 +- docs/en-US/element/path.html | 4 +- docs/en-US/element/rect.html | 4 +- docs/en-US/element/svg.html | 4 +- docs/en-US/element/text.html | 4 +- docs/en-US/guide/class-idraw.html | 14 ++----- docs/en-US/guide/installation.html | 4 +- docs/en-US/guide/introduction.html | 4 +- docs/en-US/guide/quickstart.html | 4 +- docs/en-US/index.html | 2 +- docs/en-US/sponsor.html | 4 +- docs/hashmap.json | 2 +- docs/index.html | 2 +- docs/zh-CN/api/add-element.html | 4 +- docs/zh-CN/api/center-content.html | 39 ++++++++++++++++++ docs/zh-CN/api/centerContent.html | 41 ------------------- docs/zh-CN/api/delete-element.html | 4 +- docs/zh-CN/api/enable-disable.html | 38 +++++++++++++++++ docs/zh-CN/api/get-data.html | 6 +-- docs/zh-CN/api/move-element.html | 4 +- docs/zh-CN/api/resize.html | 14 +++---- docs/zh-CN/api/select-element.html | 6 +-- docs/zh-CN/api/set-data.html | 4 +- docs/zh-CN/api/set-mode.html | 33 +++++++++++++++ docs/zh-CN/api/update-element.html | 4 +- docs/zh-CN/element/circle.html | 4 +- docs/zh-CN/element/group.html | 4 +- docs/zh-CN/element/html.html | 4 +- docs/zh-CN/element/image.html | 4 +- docs/zh-CN/element/info.html | 4 +- docs/zh-CN/element/path.html | 4 +- docs/zh-CN/element/rect.html | 4 +- docs/zh-CN/element/svg.html | 4 +- docs/zh-CN/element/text.html | 4 +- docs/zh-CN/guide/class-idraw.html | 14 ++----- docs/zh-CN/guide/installation.html | 4 +- docs/zh-CN/guide/introduction.html | 4 +- docs/zh-CN/guide/quickstart.html | 4 +- docs/zh-CN/index.html | 2 +- docs/zh-CN/sponsor.html | 4 +- 79 files changed, 403 insertions(+), 247 deletions(-) rename docs/assets/{en-US_api_centerContent.md.3i-VnbTr.js => en-US_api_center-content.md.uYyT_FCL.js} (58%) create mode 100644 docs/assets/en-US_api_center-content.md.uYyT_FCL.lean.js delete mode 100644 docs/assets/en-US_api_centerContent.md.3i-VnbTr.lean.js create mode 100644 docs/assets/en-US_api_enable-disable.md.idYW9YoD.js create mode 100644 docs/assets/en-US_api_enable-disable.md.idYW9YoD.lean.js rename docs/assets/{en-US_api_resize.md.o4DGrfMW.js => en-US_api_resize.md.GVax-7Xj.js} (90%) rename docs/assets/{en-US_api_resize.md.o4DGrfMW.lean.js => en-US_api_resize.md.GVax-7Xj.lean.js} (85%) create mode 100644 docs/assets/en-US_api_set-mode.md.DZ9KruA1.js create mode 100644 docs/assets/en-US_api_set-mode.md.DZ9KruA1.lean.js rename docs/assets/{en-US_guide_class-idraw.md.VR4c90An.js => en-US_guide_class-idraw.md.hjw125-W.js} (61%) rename docs/assets/{en-US_guide_class-idraw.md.VR4c90An.lean.js => en-US_guide_class-idraw.md.hjw125-W.lean.js} (54%) rename docs/assets/{zh-CN_api_centerContent.md.bKf3NvFM.js => zh-CN_api_center-content.md._7DFhIjX.js} (61%) create mode 100644 docs/assets/zh-CN_api_center-content.md._7DFhIjX.lean.js delete mode 100644 docs/assets/zh-CN_api_centerContent.md.bKf3NvFM.lean.js create mode 100644 docs/assets/zh-CN_api_enable-disable.md.qB2sgMeO.js create mode 100644 docs/assets/zh-CN_api_enable-disable.md.qB2sgMeO.lean.js rename docs/assets/{zh-CN_api_resize.md.d_v7X8ZG.js => zh-CN_api_resize.md.ioSXJvKI.js} (92%) rename docs/assets/{zh-CN_api_resize.md.d_v7X8ZG.lean.js => zh-CN_api_resize.md.ioSXJvKI.lean.js} (100%) create mode 100644 docs/assets/zh-CN_api_set-mode.md.xjTJNW1U.js create mode 100644 docs/assets/zh-CN_api_set-mode.md.xjTJNW1U.lean.js rename docs/assets/{zh-CN_guide_class-idraw.md.xUf63qlT.js => zh-CN_guide_class-idraw.md.vXCwa6fJ.js} (62%) rename docs/assets/{zh-CN_guide_class-idraw.md.xUf63qlT.lean.js => zh-CN_guide_class-idraw.md.vXCwa6fJ.lean.js} (64%) create mode 100644 docs/en-US/api/center-content.html delete mode 100644 docs/en-US/api/centerContent.html create mode 100644 docs/en-US/api/enable-disable.html create mode 100644 docs/en-US/api/set-mode.html create mode 100644 docs/zh-CN/api/center-content.html delete mode 100644 docs/zh-CN/api/centerContent.html create mode 100644 docs/zh-CN/api/enable-disable.html create mode 100644 docs/zh-CN/api/set-mode.html diff --git a/docs/404.html b/docs/404.html index 6d5d66b..090b29c 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_api_centerContent.md.3i-VnbTr.js b/docs/assets/en-US_api_center-content.md.uYyT_FCL.js similarity index 58% rename from docs/assets/en-US_api_centerContent.md.3i-VnbTr.js rename to docs/assets/en-US_api_center-content.md.uYyT_FCL.js index d0a1280..d53844d 100644 --- a/docs/assets/en-US_api_centerContent.md.3i-VnbTr.js +++ b/docs/assets/en-US_api_center-content.md.uYyT_FCL.js @@ -1,4 +1,4 @@ -import{_ as s,o as i,c as a,R as n,k as e}from"./chunks/framework.IreutGsD.js";const u=JSON.parse('{"title":"centerContent","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/api/centerContent.md","filePath":"en-US/api/centerContent.md"}'),t={name:"en-US/api/centerContent.md"},l=n(`

centerContent ​

Introduction ​

centerContent Display the content in the center of the view. If the content size exceeds the view, the content will be proportionally reduced and centered in the view.

Arguments ​

Returns ​

N/A

Usage ​

js
import { iDraw } from 'idraw';
+import{_ as s,o as a,c as i,R as e,k as n}from"./chunks/framework.IreutGsD.js";const y=JSON.parse('{"title":"centerContent","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/api/center-content.md","filePath":"en-US/api/center-content.md"}'),t={name:"en-US/api/center-content.md"},l=e(`
centerContent ​
Introduction ​
centerContent Display the content in the center of the view. If the content size exceeds the view, the content will be proportionally reduced and centered in the view.
Arguments ​
  • {object} options
    • {Data} options.data Optionally, calculate new content data for centered dimensions.
Returns ​
N/A
Usage ​
js
import { iDraw } from 'idraw';
 
 const app = document.querySelector('#app');
 const options = {
@@ -6,13 +6,11 @@ import{_ as s,o as i,c as a,R as n,k as e}from"./chunks/framework.IreutGsD.js";c
   height: 400,
   devicePixelRatio: 2
 };
-const idraw = new iDraw(app, options, {
-  scrollWrapper: { use: true }
-});
+const idraw = new iDraw(app, options);
 idraw.setData({
   element: [
     /* ... */
   ]
 });
 
-idraw.centerContent();
Example ​
More Demo
`,11),h=e("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-centerContent&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function r(k,o,d,c,E,g){return i(),a("div",null,p)}const m=s(t,[["render",r]]);export{u as __pageData,m as default};
+idraw.centerContent();

Example ​

More Demo

`,11),h=n("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-centerContent&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function r(k,o,d,c,E,g){return a(),i("div",null,p)}const m=s(t,[["render",r]]);export{y as __pageData,m as default}; diff --git a/docs/assets/en-US_api_center-content.md.uYyT_FCL.lean.js b/docs/assets/en-US_api_center-content.md.uYyT_FCL.lean.js new file mode 100644 index 0000000..bdb6e09 --- /dev/null +++ b/docs/assets/en-US_api_center-content.md.uYyT_FCL.lean.js @@ -0,0 +1 @@ +import{_ as s,o as a,c as i,R as e,k as n}from"./chunks/framework.IreutGsD.js";const y=JSON.parse('{"title":"centerContent","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/api/center-content.md","filePath":"en-US/api/center-content.md"}'),t={name:"en-US/api/center-content.md"},l=e("",11),h=n("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-centerContent&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function r(k,o,d,c,E,g){return a(),i("div",null,p)}const m=s(t,[["render",r]]);export{y as __pageData,m as default}; diff --git a/docs/assets/en-US_api_centerContent.md.3i-VnbTr.lean.js b/docs/assets/en-US_api_centerContent.md.3i-VnbTr.lean.js deleted file mode 100644 index 0eedc2f..0000000 --- a/docs/assets/en-US_api_centerContent.md.3i-VnbTr.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,o as i,c as a,R as n,k as e}from"./chunks/framework.IreutGsD.js";const u=JSON.parse('{"title":"centerContent","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/api/centerContent.md","filePath":"en-US/api/centerContent.md"}'),t={name:"en-US/api/centerContent.md"},l=n("",11),h=e("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-centerContent&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function r(k,o,d,c,E,g){return i(),a("div",null,p)}const m=s(t,[["render",r]]);export{u as __pageData,m as default}; diff --git a/docs/assets/en-US_api_enable-disable.md.idYW9YoD.js b/docs/assets/en-US_api_enable-disable.md.idYW9YoD.js new file mode 100644 index 0000000..186e454 --- /dev/null +++ b/docs/assets/en-US_api_enable-disable.md.idYW9YoD.js @@ -0,0 +1,15 @@ +import{_ as s,o as i,c as a,R as e,k as n}from"./chunks/framework.IreutGsD.js";const y=JSON.parse('{"title":"enable/disable","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/api/enable-disable.md","filePath":"en-US/api/enable-disable.md"}'),t={name:"en-US/api/enable-disable.md"},l=e(`

enable/disable ​

Introduction ​

Arguments ​

ts
type IDrawFeature = 'ruler' | string; // TODO other features

Returns ​

N/A

Usage ​

js
import { iDraw } from 'idraw';
+
+const app = document.querySelector('#app');
+const options = {
+  width: 600,
+  height: 400,
+  devicePixelRatio: 2
+};
+const idraw = new iDraw(app, options);
+idraw.setData(data);
+idraw.disable('ruler');
+
+setTimeout(() => {
+  idraw.enable('ruler');
+}, 1000);

Example ​

More Demo >>

`,12),h=n("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-enable&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function k(r,d,o,E,c,g){return i(),a("div",null,p)}const F=s(t,[["render",k]]);export{y as __pageData,F as default}; diff --git a/docs/assets/en-US_api_enable-disable.md.idYW9YoD.lean.js b/docs/assets/en-US_api_enable-disable.md.idYW9YoD.lean.js new file mode 100644 index 0000000..3086f52 --- /dev/null +++ b/docs/assets/en-US_api_enable-disable.md.idYW9YoD.lean.js @@ -0,0 +1 @@ +import{_ as s,o as i,c as a,R as e,k as n}from"./chunks/framework.IreutGsD.js";const y=JSON.parse('{"title":"enable/disable","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/api/enable-disable.md","filePath":"en-US/api/enable-disable.md"}'),t={name:"en-US/api/enable-disable.md"},l=e("",12),h=n("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-enable&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function k(r,d,o,E,c,g){return i(),a("div",null,p)}const F=s(t,[["render",k]]);export{y as __pageData,F as default}; diff --git a/docs/assets/en-US_api_resize.md.o4DGrfMW.js b/docs/assets/en-US_api_resize.md.GVax-7Xj.js similarity index 90% rename from docs/assets/en-US_api_resize.md.o4DGrfMW.js rename to docs/assets/en-US_api_resize.md.GVax-7Xj.js index 44e1f77..35b4c18 100644 --- a/docs/assets/en-US_api_resize.md.o4DGrfMW.js +++ b/docs/assets/en-US_api_resize.md.GVax-7Xj.js @@ -6,17 +6,15 @@ import{_ as s,o as i,c as a,R as e,k as n}from"./chunks/framework.IreutGsD.js";c height: 400, devicePixelRatio: 2 }; -const idraw = new iDraw(app, options, { - scrollWrapper: { use: true } -}); +const idraw = new iDraw(app, options); idraw.setData({ element: [ /* ... */ ] }); -idraw.resetSize({ +idraw.resize({ width: 300, height: 200, devicePixelRatio: 2 -});

Example ​

More Demo

`,11),h=n("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-resize&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function r(k,d,o,E,c,g){return i(),a("div",null,p)}const F=s(t,[["render",r]]);export{u as __pageData,F as default}; +});

Example ​

More Demo

`,11),h=n("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-resize&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function r(k,d,o,E,c,g){return i(),a("div",null,p)}const m=s(t,[["render",r]]);export{u as __pageData,m as default}; diff --git a/docs/assets/en-US_api_resize.md.o4DGrfMW.lean.js b/docs/assets/en-US_api_resize.md.GVax-7Xj.lean.js similarity index 85% rename from docs/assets/en-US_api_resize.md.o4DGrfMW.lean.js rename to docs/assets/en-US_api_resize.md.GVax-7Xj.lean.js index a1ac2a4..9f30ead 100644 --- a/docs/assets/en-US_api_resize.md.o4DGrfMW.lean.js +++ b/docs/assets/en-US_api_resize.md.GVax-7Xj.lean.js @@ -1 +1 @@ -import{_ as s,o as i,c as a,R as e,k as n}from"./chunks/framework.IreutGsD.js";const u=JSON.parse('{"title":"resize","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/api/resize.md","filePath":"en-US/api/resize.md"}'),t={name:"en-US/api/resize.md"},l=e("",11),h=n("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-resize&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function r(k,d,o,E,c,g){return i(),a("div",null,p)}const F=s(t,[["render",r]]);export{u as __pageData,F as default}; +import{_ as s,o as i,c as a,R as e,k as n}from"./chunks/framework.IreutGsD.js";const u=JSON.parse('{"title":"resize","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/api/resize.md","filePath":"en-US/api/resize.md"}'),t={name:"en-US/api/resize.md"},l=e("",11),h=n("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-resize&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function r(k,d,o,E,c,g){return i(),a("div",null,p)}const m=s(t,[["render",r]]);export{u as __pageData,m as default}; diff --git a/docs/assets/en-US_api_set-mode.md.DZ9KruA1.js b/docs/assets/en-US_api_set-mode.md.DZ9KruA1.js new file mode 100644 index 0000000..8b0738c --- /dev/null +++ b/docs/assets/en-US_api_set-mode.md.DZ9KruA1.js @@ -0,0 +1,10 @@ +import{_ as s,o as i,c as a,R as e,k as t}from"./chunks/framework.IreutGsD.js";const u=JSON.parse('{"title":"setMode","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/api/set-mode.md","filePath":"en-US/api/set-mode.md"}'),n={name:"en-US/api/set-mode.md"},l=e(`

setMode ​

Introduction ​

setMode Can switch view operation mode

Arguments ​

ts
type IDrawMode = 'select' | 'drag' | 'readOnly';

Returns ​

N/A

Usage ​

js
import { iDraw } from 'idraw';
+
+const app = document.querySelector('#app');
+const options = {
+  width: 600,
+  height: 400,
+  devicePixelRatio: 2
+};
+const idraw = new iDraw(app, options);
+idraw.setMode('readOnly');

Example ​

More Demo >>

`,12),h=t("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-setMode&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function d(r,k,o,c,g,E){return i(),a("div",null,p)}const m=s(n,[["render",d]]);export{u as __pageData,m as default}; diff --git a/docs/assets/en-US_api_set-mode.md.DZ9KruA1.lean.js b/docs/assets/en-US_api_set-mode.md.DZ9KruA1.lean.js new file mode 100644 index 0000000..3d9247d --- /dev/null +++ b/docs/assets/en-US_api_set-mode.md.DZ9KruA1.lean.js @@ -0,0 +1 @@ +import{_ as s,o as i,c as a,R as e,k as t}from"./chunks/framework.IreutGsD.js";const u=JSON.parse('{"title":"setMode","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/api/set-mode.md","filePath":"en-US/api/set-mode.md"}'),n={name:"en-US/api/set-mode.md"},l=e("",12),h=t("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-setMode&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function d(r,k,o,c,g,E){return i(),a("div",null,p)}const m=s(n,[["render",d]]);export{u as __pageData,m as default}; diff --git a/docs/assets/en-US_guide_class-idraw.md.VR4c90An.js b/docs/assets/en-US_guide_class-idraw.md.hjw125-W.js similarity index 61% rename from docs/assets/en-US_guide_class-idraw.md.VR4c90An.js rename to docs/assets/en-US_guide_class-idraw.md.hjw125-W.js index 2635cb0..cc0722b 100644 --- a/docs/assets/en-US_guide_class-idraw.md.VR4c90An.js +++ b/docs/assets/en-US_guide_class-idraw.md.hjw125-W.js @@ -1,4 +1,4 @@ -import{_ as s,o as i,c as t,R as a,k as e}from"./chunks/framework.IreutGsD.js";const F=JSON.parse('{"title":"Class iDraw","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/class-idraw.md","filePath":"en-US/guide/class-idraw.md"}'),d={name:"en-US/guide/class-idraw.md"},n=a(`

Class iDraw ​

Arguments ​

js
import { iDraw } from 'idraw';
+import{_ as s,o as i,c as t,R as a,k as e}from"./chunks/framework.IreutGsD.js";const u=JSON.parse('{"title":"Class iDraw","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/class-idraw.md","filePath":"en-US/guide/class-idraw.md"}'),n={name:"en-US/guide/class-idraw.md"},h=a(`
Class iDraw ​
Arguments ​
js
import { iDraw } from 'idraw';
 const dom = document.querySelector('#app');
 const options = {
   width: 600,
@@ -10,10 +10,4 @@ import{_ as s,o as i,c as t,R as a,k as e}from"./chunks/framework.IreutGsD.js";c
   width: number;
   height: number;
   devicePixelRatio: number;
-  enableScroll?: boolean;
-  enableSelect?: boolean;
-  enableScale?: boolean;
-  enableRuler?: boolean;
-  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 >>
`,10),l=e("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=basic-options&header=false&sider=false&default-editor-split=50",width:"1000",height:"440",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),h=[n,l];function p(r,k,o,c,E,g){return i(),t("div",null,h)}const b=s(d,[["render",p]]);export{F as __pageData,b as default};
+};

Options Properties ​

PropertyDescriptionTypeDefaultRequiredOthers
widthDrawing board's widthnumber-true-
heightDrawing board's heightnumber-true-
devicePixelRatioDevice pixel scalenumber1false-

Options Preivew ​

More Demo >>

`,10),d=e("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=basic-options&header=false&sider=false&default-editor-split=50",width:"1000",height:"440",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),l=[h,d];function p(r,k,o,c,g,E){return i(),t("div",null,l)}const F=s(n,[["render",p]]);export{u as __pageData,F as default}; diff --git a/docs/assets/en-US_guide_class-idraw.md.VR4c90An.lean.js b/docs/assets/en-US_guide_class-idraw.md.hjw125-W.lean.js similarity index 54% rename from docs/assets/en-US_guide_class-idraw.md.VR4c90An.lean.js rename to docs/assets/en-US_guide_class-idraw.md.hjw125-W.lean.js index 97d9e75..73e426a 100644 --- a/docs/assets/en-US_guide_class-idraw.md.VR4c90An.lean.js +++ b/docs/assets/en-US_guide_class-idraw.md.hjw125-W.lean.js @@ -1 +1 @@ -import{_ as s,o as i,c as t,R as a,k as e}from"./chunks/framework.IreutGsD.js";const F=JSON.parse('{"title":"Class iDraw","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/class-idraw.md","filePath":"en-US/guide/class-idraw.md"}'),d={name:"en-US/guide/class-idraw.md"},n=a("",10),l=e("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=basic-options&header=false&sider=false&default-editor-split=50",width:"1000",height:"440",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),h=[n,l];function p(r,k,o,c,E,g){return i(),t("div",null,h)}const b=s(d,[["render",p]]);export{F as __pageData,b as default}; +import{_ as s,o as i,c as t,R as a,k as e}from"./chunks/framework.IreutGsD.js";const u=JSON.parse('{"title":"Class iDraw","description":"","frontmatter":{},"headers":[],"relativePath":"en-US/guide/class-idraw.md","filePath":"en-US/guide/class-idraw.md"}'),n={name:"en-US/guide/class-idraw.md"},h=a("",10),d=e("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=basic-options&header=false&sider=false&default-editor-split=50",width:"1000",height:"440",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),l=[h,d];function p(r,k,o,c,g,E){return i(),t("div",null,l)}const F=s(n,[["render",p]]);export{u as __pageData,F as default}; diff --git a/docs/assets/zh-CN_api_centerContent.md.bKf3NvFM.js b/docs/assets/zh-CN_api_center-content.md._7DFhIjX.js similarity index 61% rename from docs/assets/zh-CN_api_centerContent.md.bKf3NvFM.js rename to docs/assets/zh-CN_api_center-content.md._7DFhIjX.js index df0158b..88c3462 100644 --- a/docs/assets/zh-CN_api_centerContent.md.bKf3NvFM.js +++ b/docs/assets/zh-CN_api_center-content.md._7DFhIjX.js @@ -1,4 +1,4 @@ -import{_ as s,o as i,c as a,R as n,k as e}from"./chunks/framework.IreutGsD.js";const u=JSON.parse('{"title":"centerContent","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/api/centerContent.md","filePath":"zh-CN/api/centerContent.md"}'),t={name:"zh-CN/api/centerContent.md"},l=n(`

centerContent ​

说明 ​

centerContent 让内容在视图居中显示，如果内容尺寸超出视图，就会把内容按比例缩小居中在视图中。

参数 ​

返回值 ​

无返回值

用法 ​

js
import { iDraw } from 'idraw';
+import{_ as s,o as a,c as i,R as n,k as e}from"./chunks/framework.IreutGsD.js";const u=JSON.parse('{"title":"centerContent","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/api/center-content.md","filePath":"zh-CN/api/center-content.md"}'),t={name:"zh-CN/api/center-content.md"},l=n(`
centerContent ​
说明 ​
centerContent 让内容在视图居中显示，如果内容尺寸超出视图，就会把内容按比例缩小居中在视图中。
参数 ​
  • {object} options
    • {Data} options.data 可选，计算居中尺寸的新内容数据。
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
 
 const app = document.querySelector('#app');
 const options = {
@@ -6,13 +6,11 @@ import{_ as s,o as i,c as a,R as n,k as e}from"./chunks/framework.IreutGsD.js";c
   height: 400,
   devicePixelRatio: 2
 };
-const idraw = new iDraw(app, options, {
-  scrollWrapper: { use: true }
-});
+const idraw = new iDraw(app, options);
 idraw.setData({
   element: [
     /* ... */
   ]
 });
 
-idraw.centerContent();
示例 ​
Demo完整预览 Playground >>
`,11),h=e("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-centerContent&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function r(k,d,o,c,E,g){return i(),a("div",null,p)}const C=s(t,[["render",r]]);export{u as __pageData,C as default};
+idraw.centerContent();

示例 ​

Demo完整预览 Playground >>

`,11),h=e("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-centerContent&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function r(k,d,o,c,E,g){return a(),i("div",null,p)}const F=s(t,[["render",r]]);export{u as __pageData,F as default}; diff --git a/docs/assets/zh-CN_api_center-content.md._7DFhIjX.lean.js b/docs/assets/zh-CN_api_center-content.md._7DFhIjX.lean.js new file mode 100644 index 0000000..7c65cde --- /dev/null +++ b/docs/assets/zh-CN_api_center-content.md._7DFhIjX.lean.js @@ -0,0 +1 @@ +import{_ as s,o as a,c as i,R as n,k as e}from"./chunks/framework.IreutGsD.js";const u=JSON.parse('{"title":"centerContent","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/api/center-content.md","filePath":"zh-CN/api/center-content.md"}'),t={name:"zh-CN/api/center-content.md"},l=n("",11),h=e("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-centerContent&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function r(k,d,o,c,E,g){return a(),i("div",null,p)}const F=s(t,[["render",r]]);export{u as __pageData,F as default}; diff --git a/docs/assets/zh-CN_api_centerContent.md.bKf3NvFM.lean.js b/docs/assets/zh-CN_api_centerContent.md.bKf3NvFM.lean.js deleted file mode 100644 index 7f537b1..0000000 --- a/docs/assets/zh-CN_api_centerContent.md.bKf3NvFM.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,o as i,c as a,R as n,k as e}from"./chunks/framework.IreutGsD.js";const u=JSON.parse('{"title":"centerContent","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/api/centerContent.md","filePath":"zh-CN/api/centerContent.md"}'),t={name:"zh-CN/api/centerContent.md"},l=n("",11),h=e("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-centerContent&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[l,h];function r(k,d,o,c,E,g){return i(),a("div",null,p)}const C=s(t,[["render",r]]);export{u as __pageData,C as default}; diff --git a/docs/assets/zh-CN_api_enable-disable.md.qB2sgMeO.js b/docs/assets/zh-CN_api_enable-disable.md.qB2sgMeO.js new file mode 100644 index 0000000..a59d673 --- /dev/null +++ b/docs/assets/zh-CN_api_enable-disable.md.qB2sgMeO.js @@ -0,0 +1,15 @@ +import{_ as s,o as i,c as a,R as e,k as l}from"./chunks/framework.IreutGsD.js";const F=JSON.parse('{"title":"enable/disable","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/api/enable-disable.md","filePath":"zh-CN/api/enable-disable.md"}'),n={name:"zh-CN/api/enable-disable.md"},t=e(`

enable/disable ​

说明 ​

参数 ​

ts
type IDrawFeature = 'ruler' | string; // TODO other feature

返回值 ​

无返回值

用法 ​

js
import { iDraw } from 'idraw';
+
+const app = document.querySelector('#app');
+const options = {
+  width: 600,
+  height: 400,
+  devicePixelRatio: 2
+};
+const idraw = new iDraw(app, options);
+idraw.setData(data);
+idraw.disable('ruler');
+
+setTimeout(() => {
+  idraw.enable('ruler');
+}, 1000);

示例 ​

Demo完整预览 Playground >>

`,12),h=l("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-enable&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[t,h];function k(r,d,o,E,c,g){return i(),a("div",null,p)}const u=s(n,[["render",k]]);export{F as __pageData,u as default}; diff --git a/docs/assets/zh-CN_api_enable-disable.md.qB2sgMeO.lean.js b/docs/assets/zh-CN_api_enable-disable.md.qB2sgMeO.lean.js new file mode 100644 index 0000000..392cda9 --- /dev/null +++ b/docs/assets/zh-CN_api_enable-disable.md.qB2sgMeO.lean.js @@ -0,0 +1 @@ +import{_ as s,o as i,c as a,R as e,k as l}from"./chunks/framework.IreutGsD.js";const F=JSON.parse('{"title":"enable/disable","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/api/enable-disable.md","filePath":"zh-CN/api/enable-disable.md"}'),n={name:"zh-CN/api/enable-disable.md"},t=e("",12),h=l("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-enable&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[t,h];function k(r,d,o,E,c,g){return i(),a("div",null,p)}const u=s(n,[["render",k]]);export{F as __pageData,u as default}; diff --git a/docs/assets/zh-CN_api_resize.md.d_v7X8ZG.js b/docs/assets/zh-CN_api_resize.md.ioSXJvKI.js similarity index 92% rename from docs/assets/zh-CN_api_resize.md.d_v7X8ZG.js rename to docs/assets/zh-CN_api_resize.md.ioSXJvKI.js index 58afb1c..a459b6d 100644 --- a/docs/assets/zh-CN_api_resize.md.d_v7X8ZG.js +++ b/docs/assets/zh-CN_api_resize.md.ioSXJvKI.js @@ -6,16 +6,14 @@ import{_ as s,o as i,c as a,R as e,k as n}from"./chunks/framework.IreutGsD.js";c height: 400, devicePixelRatio: 2 }; -const idraw = new iDraw(app, options, { - scrollWrapper: { use: true } -}); +const idraw = new iDraw(app, options); idraw.setData({ element: [ /* ... */ ] }); -idraw.resetSize({ +idraw.resize({ width: 300, height: 200, devicePixelRatio: 2 diff --git a/docs/assets/zh-CN_api_resize.md.d_v7X8ZG.lean.js b/docs/assets/zh-CN_api_resize.md.ioSXJvKI.lean.js similarity index 100% rename from docs/assets/zh-CN_api_resize.md.d_v7X8ZG.lean.js rename to docs/assets/zh-CN_api_resize.md.ioSXJvKI.lean.js diff --git a/docs/assets/zh-CN_api_set-mode.md.xjTJNW1U.js b/docs/assets/zh-CN_api_set-mode.md.xjTJNW1U.js new file mode 100644 index 0000000..bf83861 --- /dev/null +++ b/docs/assets/zh-CN_api_set-mode.md.xjTJNW1U.js @@ -0,0 +1,10 @@ +import{_ as s,o as i,c as a,R as e,k as t}from"./chunks/framework.IreutGsD.js";const F=JSON.parse('{"title":"setMode","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/api/set-mode.md","filePath":"zh-CN/api/set-mode.md"}'),h={name:"zh-CN/api/set-mode.md"},n=e(`

setMode ​

说明 ​

setMode 可以切换视图操作模式

参数 ​

ts
type IDrawMode = 'select' | 'drag' | 'readOnly';

返回值 ​

无返回值

用法 ​

js
import { iDraw } from 'idraw';
+
+const app = document.querySelector('#app');
+const options = {
+  width: 600,
+  height: 400,
+  devicePixelRatio: 2
+};
+const idraw = new iDraw(app, options);
+idraw.setMode('readOnly');

示例 ​

Demo完整预览 Playground >>

`,12),l=t("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-setMode&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[n,l];function k(d,r,o,c,E,g){return i(),a("div",null,p)}const u=s(h,[["render",k]]);export{F as __pageData,u as default}; diff --git a/docs/assets/zh-CN_api_set-mode.md.xjTJNW1U.lean.js b/docs/assets/zh-CN_api_set-mode.md.xjTJNW1U.lean.js new file mode 100644 index 0000000..6749fea --- /dev/null +++ b/docs/assets/zh-CN_api_set-mode.md.xjTJNW1U.lean.js @@ -0,0 +1 @@ +import{_ as s,o as i,c as a,R as e,k as t}from"./chunks/framework.IreutGsD.js";const F=JSON.parse('{"title":"setMode","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/api/set-mode.md","filePath":"zh-CN/api/set-mode.md"}'),h={name:"zh-CN/api/set-mode.md"},n=e("",12),l=t("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=api-setMode&header=false&sider=false&default-editor-split=50",width:"1000",height:"480",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),p=[n,l];function k(d,r,o,c,E,g){return i(),a("div",null,p)}const u=s(h,[["render",k]]);export{F as __pageData,u as default}; diff --git a/docs/assets/zh-CN_guide_class-idraw.md.xUf63qlT.js b/docs/assets/zh-CN_guide_class-idraw.md.vXCwa6fJ.js similarity index 62% rename from docs/assets/zh-CN_guide_class-idraw.md.xUf63qlT.js rename to docs/assets/zh-CN_guide_class-idraw.md.vXCwa6fJ.js index d0d9e7b..f10aac6 100644 --- a/docs/assets/zh-CN_guide_class-idraw.md.xUf63qlT.js +++ b/docs/assets/zh-CN_guide_class-idraw.md.vXCwa6fJ.js @@ -1,4 +1,4 @@ -import{_ as s,o as i,c as t,R as a,k as e}from"./chunks/framework.IreutGsD.js";const F=JSON.parse('{"title":"iDraw 类","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/guide/class-idraw.md","filePath":"zh-CN/guide/class-idraw.md"}'),d={name:"zh-CN/guide/class-idraw.md"},n=a(`

iDraw 类 ​

参数 ​

js
import { iDraw } from 'idraw';
+import{_ as s,o as i,c as t,R as a,k as e}from"./chunks/framework.IreutGsD.js";const F=JSON.parse('{"title":"iDraw 类","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/guide/class-idraw.md","filePath":"zh-CN/guide/class-idraw.md"}'),h={name:"zh-CN/guide/class-idraw.md"},n=a(`
iDraw 类 ​
参数 ​
js
import { iDraw } from 'idraw';
 const dom = document.querySelector('#app');
 const options = {
   width: 600,
@@ -10,10 +10,4 @@ import{_ as s,o as i,c as t,R as a,k as e}from"./chunks/framework.IreutGsD.js";c
   width: number;
   height: number;
   devicePixelRatio: number;
-  enableScroll?: boolean;
-  enableSelect?: boolean;
-  enableScale?: boolean;
-  enableRuler?: boolean;
-  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 >>
`,11),h=e("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=basic-options&header=false&sider=false&default-editor-split=50",width:"1000",height:"440",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),l=[n,h];function p(k,r,o,c,E,g){return i(),t("div",null,l)}const b=s(d,[["render",p]]);export{F as __pageData,b as default};
+};

Options 属性 ​

属性说明类型默认值是否必填备注
width画板宽度number-true-
height画板高度number-true-
devicePixelRatio设备像素比例number1false-

Options 效果预览 ​

Demo完整预览 Playground >>

`,11),d=e("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=basic-options&header=false&sider=false&default-editor-split=50",width:"1000",height:"440",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),l=[n,d];function p(r,k,o,c,E,g){return i(),t("div",null,l)}const u=s(h,[["render",p]]);export{F as __pageData,u as default}; diff --git a/docs/assets/zh-CN_guide_class-idraw.md.xUf63qlT.lean.js b/docs/assets/zh-CN_guide_class-idraw.md.vXCwa6fJ.lean.js similarity index 64% rename from docs/assets/zh-CN_guide_class-idraw.md.xUf63qlT.lean.js rename to docs/assets/zh-CN_guide_class-idraw.md.vXCwa6fJ.lean.js index a806df4..2686019 100644 --- a/docs/assets/zh-CN_guide_class-idraw.md.xUf63qlT.lean.js +++ b/docs/assets/zh-CN_guide_class-idraw.md.vXCwa6fJ.lean.js @@ -1 +1 @@ -import{_ as s,o as i,c as t,R as a,k as e}from"./chunks/framework.IreutGsD.js";const F=JSON.parse('{"title":"iDraw 类","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/guide/class-idraw.md","filePath":"zh-CN/guide/class-idraw.md"}'),d={name:"zh-CN/guide/class-idraw.md"},n=a("",11),h=e("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=basic-options&header=false&sider=false&default-editor-split=50",width:"1000",height:"440",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),l=[n,h];function p(k,r,o,c,E,g){return i(),t("div",null,l)}const b=s(d,[["render",p]]);export{F as __pageData,b as default}; +import{_ as s,o as i,c as t,R as a,k as e}from"./chunks/framework.IreutGsD.js";const F=JSON.parse('{"title":"iDraw 类","description":"","frontmatter":{},"headers":[],"relativePath":"zh-CN/guide/class-idraw.md","filePath":"zh-CN/guide/class-idraw.md"}'),h={name:"zh-CN/guide/class-idraw.md"},n=a("",11),d=e("iframe",{class:"idraw-playground-preview",src:"https://idrawjs.com/playground/?demo=basic-options&header=false&sider=false&default-editor-split=50",width:"1000",height:"440",frameborder:"no",border:"0",style:{border:"1px solid #cecece",margin:"0px auto"}},null,-1),l=[n,d];function p(r,k,o,c,E,g){return i(),t("div",null,l)}const u=s(h,[["render",p]]);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 cfad8d7..727554f 100644 --- a/docs/en-US/api/add-element.html +++ b/docs/en-US/api/add-element.html @@ -17,7 +17,7 @@ -
iDraw.js

English

中文

English

中文

Appearance

addElement ​

Introduction ​

addElement Add elements to the drawing and trigger a rerender.

Arguments ​

  • {object} element More Element Infomation>> .

  • {object} { position?: number[] }，Optional configuration, position element index position, for example [1, 2] means adding the element to the third position of the second element (must be of type Group).

Returns ​

  • {object}

Usage ​

js
import { iDraw } from 'idraw';
+    
iDraw.js
English
中文
English
中文
Appearance
addElement ​
Introduction ​
addElement Add elements to the drawing and trigger a rerender.
Arguments ​
  • {object} element More Element Infomation>> .
  • {object} { position?: number[] }，Optional configuration, position element index position, for example [1, 2] means adding the element to the third position of the second element (must be of type Group).
Returns ​
  • {object}
Usage ​
js
import { iDraw } from 'idraw';
 
 const app = document.querySelector('#app');
 const options = {
@@ -42,7 +42,7 @@
     borderColor: '#ff6032'
   }
 });
Example ​
More Demo >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/en-US/api/center-content.html b/docs/en-US/api/center-content.html
new file mode 100644
index 0000000..446e7ef
--- /dev/null
+++ b/docs/en-US/api/center-content.html
@@ -0,0 +1,39 @@
+
+
+  
+    
+    
+    centerContent | iDraw.js
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    
iDraw.js
English
中文
English
中文
Appearance
centerContent ​
Introduction ​
centerContent Display the content in the center of the view. If the content size exceeds the view, the content will be proportionally reduced and centered in the view.
Arguments ​
  • {object} options
    • {Data} options.data Optionally, calculate new content data for centered dimensions.
Returns ​
N/A
Usage ​
js
import { iDraw } from 'idraw';
+
+const app = document.querySelector('#app');
+const options = {
+  width: 600,
+  height: 400,
+  devicePixelRatio: 2
+};
+const idraw = new iDraw(app, options);
+idraw.setData({
+  element: [
+    /* ... */
+  ]
+});
+
+idraw.centerContent();
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
deleted file mode 100644
index 8422adc..0000000
--- a/docs/en-US/api/centerContent.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-  
-    
-    
-    centerContent | iDraw.js
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-  
-  
-    
iDraw.js
English
中文
English
中文
Appearance
centerContent ​
Introduction ​
centerContent Display the content in the center of the view. If the content size exceeds the view, the content will be proportionally reduced and centered in the view.
Arguments ​
  • {object} options
    • {Data} options.data Optionally, calculate new content data for centered dimensions.
Returns ​
N/A
Usage ​
js
import { iDraw } from 'idraw';
-
-const app = document.querySelector('#app');
-const options = {
-  width: 600,
-  height: 400,
-  devicePixelRatio: 2
-};
-const idraw = new iDraw(app, options, {
-  scrollWrapper: { use: true }
-});
-idraw.setData({
-  element: [
-    /* ... */
-  ]
-});
-
-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 1a0d216..2fe36ac 100644
--- a/docs/en-US/api/delete-element.html
+++ b/docs/en-US/api/delete-element.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
deleteElement ​
Introduction ​
addElement Delete elements to the drawing and trigger a rerender.
Arugments ​
  • {string} uuid
Returns ​
None
Usage ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
English
中文
English
中文
Appearance
deleteElement ​
Introduction ​
addElement Delete elements to the drawing and trigger a rerender.
Arugments ​
  • {string} uuid
Returns ​
None
Usage ​
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);
示例 ​
Example ​
More Demo >>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/en-US/api/enable-disable.html b/docs/en-US/api/enable-disable.html
new file mode 100644
index 0000000..34355df
--- /dev/null
+++ b/docs/en-US/api/enable-disable.html
@@ -0,0 +1,38 @@
+
+
+  
+    
+    
+    enable/disable | iDraw.js
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    
iDraw.js
English
中文
English
中文
Appearance
enable/disable ​
Introduction ​
  • enable(...) Turn on a feature
  • disable(...) Turn off a feature
Arguments ​
  • {IDrawFeature} feat Feature type 
    • 'ruler': Ruler feature
    • - Other features are to be developed...
ts
type IDrawFeature = 'ruler' | string; // TODO other features
Returns ​
N/A
Usage ​
js
import { iDraw } from 'idraw';
+
+const app = document.querySelector('#app');
+const options = {
+  width: 600,
+  height: 400,
+  devicePixelRatio: 2
+};
+const idraw = new iDraw(app, options);
+idraw.setData(data);
+idraw.disable('ruler');
+
+setTimeout(() => {
+  idraw.enable('ruler');
+}, 1000);
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 a8a0c9f..e5f8e66 100644
--- a/docs/en-US/api/get-data.html
+++ b/docs/en-US/api/get-data.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
getData ​
Introduction ​
getData The function can be used to get lastest Drawing-Data of Image;
Arguments ​
  • {object} options
    • {boolean} options.compact
Returns ​
  • {object} data Drawing-Data
Usage ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
English
中文
English
中文
Appearance
getData ​
Introduction ​
getData The function can be used to get lastest Drawing-Data of Image;
Arguments ​
  • {object} options
    • {boolean} options.compact
Returns ​
  • {object} data Drawing-Data
Usage ​
js
import { iDraw } from 'idraw';
 
 const data = {
   elements: [
@@ -49,8 +49,8 @@
 idraw.setData(data);
 
 const resultData = idraw.getData();
-console.log(resultData);
Example ​
More Demo

-    
+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 ab92437..f9951be 100644
--- a/docs/en-US/api/move-element.html
+++ b/docs/en-US/api/move-element.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
moveElement ​
Introduction ​
moveElement deletes the corresponding element in the picture according to the uuid of the element and triggers re-rendering.
Arguments ​
  • {string} uuid
  • {number[]} position Moves the element to the specified index position. For example, [1, 2] means moving the element to the third position of the second element (must be of type Group).
Returns ​
N/A
Usage ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
English
中文
English
中文
Appearance
moveElement ​
Introduction ​
moveElement deletes the corresponding element in the picture according to the uuid of the element and triggers re-rendering.
Arguments ​
  • {string} uuid
  • {number[]} position Moves the element to the specified index position. For example, [1, 2] means moving the element to the third position of the second element (must be of type Group).
Returns ​
N/A
Usage ​
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] });
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 97e1660..b49e894 100644
--- a/docs/en-US/api/resize.html
+++ b/docs/en-US/api/resize.html
@@ -12,12 +12,12 @@
     
     
     
-    
+    
     
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
resize ​
Introduction ​
resize The drawing view size can be modified again
Arguments ​
  • {object} options
    • {number} options.width
    • {number} options.height
    • {number} options.devicePixelRatio
Returns ​
N/A
Usage ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
English
中文
English
中文
Appearance
resize ​
Introduction ​
resize The drawing view size can be modified again
Arguments ​
  • {object} options
    • {number} options.width
    • {number} options.height
    • {number} options.devicePixelRatio
Returns ​
N/A
Usage ​
js
import { iDraw } from 'idraw';
 
 const app = document.querySelector('#app');
 const options = {
@@ -25,21 +25,19 @@
   height: 400,
   devicePixelRatio: 2
 };
-const idraw = new iDraw(app, options, {
-  scrollWrapper: { use: true }
-});
+const idraw = new iDraw(app, options);
 idraw.setData({
   element: [
     /* ... */
   ]
 });
 
-idraw.resetSize({
+idraw.resize({
   width: 300,
   height: 200,
   devicePixelRatio: 2
-});
Example ​
More Demo

-    
+});
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 99fa3c8..c30910f 100644
--- a/docs/en-US/api/select-element.html
+++ b/docs/en-US/api/select-element.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
selectElement ​
Introduction ​
selectElement It receives a uuid of Element to select Element on Drawing-Image and then change the Element' status on Canvas.
Arguments ​
  • {string} uuid Element's uuid
Returns ​
None
Usage ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
English
中文
English
中文
Appearance
selectElement ​
Introduction ​
selectElement It receives a uuid of Element to select Element on Drawing-Image and then change the Element' status on Canvas.
Arguments ​
  • {string} uuid Element's uuid
Returns ​
None
Usage ​
js
import { iDraw } from 'idraw';
 
 const data = {
   elements: [
@@ -34,8 +34,8 @@
 idraw.setData(data);
 const resultData = idraw.getData();
 
-idraw.selectElement(resultData.elements[0].uuid);
Example ​
More Demo >>

-    
+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 847c7a4..8b20732 100644
--- a/docs/en-US/api/set-data.html
+++ b/docs/en-US/api/set-data.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
setData ​
Introduction ​
setData The function receives a Drawing-Data to set drawing content. After that, it will re-render image base on Drawing-Data.
Arguments ​
  • {object} data Drawing-Data
Returns ​
None
Usage ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
English
中文
English
中文
Appearance
setData ​
Introduction ​
setData The function receives a Drawing-Data to set drawing content. After that, it will re-render image base on Drawing-Data.
Arguments ​
  • {object} data Drawing-Data
Returns ​
None
Usage ​
js
import { iDraw } from 'idraw';
 
 const app = document.querySelector('#app');
 const options = {
@@ -46,7 +46,7 @@
   ]
 };
 idraw.setData(data);
Example ​
More Demo

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/en-US/api/set-mode.html b/docs/en-US/api/set-mode.html
new file mode 100644
index 0000000..ce877af
--- /dev/null
+++ b/docs/en-US/api/set-mode.html
@@ -0,0 +1,33 @@
+
+
+  
+    
+    
+    setMode | iDraw.js
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    
iDraw.js
English
中文
English
中文
Appearance
setMode ​
Introduction ​
setMode Can switch view operation mode
Arguments ​
  • {IDrawType} mode View operating mode 
    • 'select': Selection mode, also the default mode, is used to select and edit elements
    • 'drag': Drag mode, used to drag and move the overall canvas position
    • 'readOnly': Read-only mode, only displays the view content and cannot be edited
ts
type IDrawMode = 'select' | 'drag' | 'readOnly';
Returns ​
N/A
Usage ​
js
import { iDraw } from 'idraw';
+
+const app = document.querySelector('#app');
+const options = {
+  width: 600,
+  height: 400,
+  devicePixelRatio: 2
+};
+const idraw = new iDraw(app, options);
+idraw.setMode('readOnly');
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 6f3df8f..c6b4e96 100644
--- a/docs/en-US/api/update-element.html
+++ b/docs/en-US/api/update-element.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
updateElement ​
Introduction ​
updateElement updates an element in the drawing and triggers a re-rendering.
Arguments ​
  • {object} element
Returns ​
N/A
Usage ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
English
中文
English
中文
Appearance
updateElement ​
Introduction ​
updateElement updates an element in the drawing and triggers a re-rendering.
Arguments ​
  • {object} element
Returns ​
N/A
Usage ​
js
import { iDraw } from 'idraw';
 
 const data = {
   elements: [
@@ -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 56eb3c0..a820428 100644
--- a/docs/en-US/element/circle.html
+++ b/docs/en-US/element/circle.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
Circle ​
Circle ​
It is used to render circular or oval content. The specific type is as follows:
ts
type Circle = {
+    
iDraw.js
English
中文
English
中文
Appearance
Circle ​
Circle ​
It is used to render circular or oval content. The specific type is as follows:
ts
type Circle = {
   type: 'circle';
   x: number;
   y: number;
@@ -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 2bf87e3..73ef095 100644
--- a/docs/en-US/element/group.html
+++ b/docs/en-US/element/group.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
Group ​
Group ​
It is used to render group or oval content. The specific type is as follows:
ts
type Group = {
+    
iDraw.js
English
中文
English
中文
Appearance
Group ​
Group ​
It is used to render group or oval content. The specific type is as follows:
ts
type Group = {
   type: 'group';
   x: number;
   y: number;
@@ -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 2814fcc..9be1a34 100644
--- a/docs/en-US/element/html.html
+++ b/docs/en-US/element/html.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
HTML ​
HTML ​
It is used to render HTML code snippet. The specific type is as follows:
ts
type HTML = {
+    
iDraw.js
English
中文
English
中文
Appearance
HTML ​
HTML ​
It is used to render HTML code snippet. The specific type is as follows:
ts
type HTML = {
   type: 'html';
   x: number;
   y: number;
@@ -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 a156d3b..a6e3a75 100644
--- a/docs/en-US/element/image.html
+++ b/docs/en-US/element/image.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
Image ​
Image ​
It is used to render image content. The specific type is as follows:
ts
type Image = {
+    
iDraw.js
English
中文
English
中文
Appearance
Image ​
Image ​
It is used to render image content. The specific type is as follows:
ts
type Image = {
   type: 'image';
   x: number;
   y: number;
@@ -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 44ad91d..ed3812b 100644
--- a/docs/en-US/element/info.html
+++ b/docs/en-US/element/info.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
Element Information ​
What is iDraw.js's Element ​
The content of drawing is based on "Element" in iDraw.js. Further more, the process of drawing is basically to realize the function of drawing around the layout, style, content and other attributes of controlling elements.
There eight types of elements are currently supported in iDraw.js :
  1. Text
  2. Rect
  3. Circle
  4. Image
  5. SVG
  6. HTML
  7. Path
  8. Group
Element's Detail ​
Element Basic Content ​
tsx
type Element = {
+    
iDraw.js
English
中文
English
中文
Appearance
Element Information ​
What is iDraw.js's Element ​
The content of drawing is based on "Element" in iDraw.js. Further more, the process of drawing is basically to realize the function of drawing around the layout, style, content and other attributes of controlling elements.
There eight types of elements are currently supported in iDraw.js :
  1. Text
  2. Rect
  3. Circle
  4. Image
  5. SVG
  6. HTML
  7. Path
  8. Group
Element's Detail ​
Element Basic Content ​
tsx
type Element = {
   type: 'text' | 'rect' | 'circle' | 'image' | 'svg' | 'html' | 'path' | 'group';
   uuid: string;
   name?: string;
@@ -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 d5d4a8e..b6850f2 100644
--- a/docs/en-US/element/path.html
+++ b/docs/en-US/element/path.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
Path ​
Path ​
It is used to render image content. The specific type is as follows:
ts
type Path = {
+    
iDraw.js
English
中文
English
中文
Appearance
Path ​
Path ​
It is used to render image content. The specific type is as follows:
ts
type Path = {
   type: 'path';
   x: number;
   y: number;
@@ -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 32b1288..3c02ae7 100644
--- a/docs/en-US/element/rect.html
+++ b/docs/en-US/element/rect.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
矩形元素 ​
Rectangle ​
It is used to render rectangle content. The specific type is as follows:
ts
type Rect = {
+    
iDraw.js
English
中文
English
中文
Appearance
矩形元素 ​
Rectangle ​
It is used to render rectangle content. The specific type is as follows:
ts
type Rect = {
   type: 'rect';
   x: number;
   y: number;
@@ -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 5fa8a9c..65ca6be 100644
--- a/docs/en-US/element/svg.html
+++ b/docs/en-US/element/svg.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
SVG ​
SVG ​
It is used to render SVG code snippet. The specific type is as follows:
ts
type SVG = {
+    
iDraw.js
English
中文
English
中文
Appearance
SVG ​
SVG ​
It is used to render SVG code snippet. The specific type is as follows:
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 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 d439eb7..c82a322 100644
--- a/docs/en-US/element/text.html
+++ b/docs/en-US/element/text.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
Text ​
Text ​
It is used to render text content. The specific type is as follows:
ts
type Text = {
+    
iDraw.js
English
中文
English
中文
Appearance
Text ​
Text ​
It is used to render text content. The specific type is as follows:
ts
type Text = {
   type: 'text';
   x: number;
   y: number;
@@ -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 cc64529..f18812d 100644
--- a/docs/en-US/guide/class-idraw.html
+++ b/docs/en-US/guide/class-idraw.html
@@ -12,12 +12,12 @@
     
     
     
-    
+    
     
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
Class iDraw ​
Arguments ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
English
中文
English
中文
Appearance
Class iDraw ​
Arguments ​
js
import { iDraw } from 'idraw';
 const dom = document.querySelector('#app');
 const options = {
   width: 600,
@@ -29,14 +29,8 @@
   width: number;
   height: number;
   devicePixelRatio: number;
-  enableScroll?: boolean;
-  enableSelect?: boolean;
-  enableScale?: boolean;
-  enableRuler?: boolean;
-  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 >>

-    
+};
Options Properties ​
PropertyDescriptionTypeDefaultRequiredOthers
widthDrawing board's widthnumber-true-
heightDrawing board's heightnumber-true-
devicePixelRatioDevice pixel scalenumber1false-
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 dd7743e..ddb63f5 100644
--- a/docs/en-US/guide/installation.html
+++ b/docs/en-US/guide/installation.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
Installation ​
Lastest Version ​
iDraw.js
Installation ​
There are three ways of adding iDraw.js to a project:
  1. Install it using NPM.
  2. Import it as a CDN Package on the page.
  3. Download the JavaScript file and host them yourself.
NPM ​
NPM is the recommended installation method when building large scale with iDraw.js. It pairs nicely with module bundlers such as Webpack, Rollup or Vite.
sh
npm install idraw
CDN ​
For prototyping or learning purposes, you can use the latest version with:
html
<script src="https://unpkg.com/idraw"></script>
html
<!-- use global value -->
+    
iDraw.js
English
中文
English
中文
Appearance
Installation ​
Lastest Version ​
iDraw.js
Installation ​
There are three ways of adding iDraw.js to a project:
  1. Install it using NPM.
  2. Import it as a CDN Package on the page.
  3. Download the JavaScript file and host them yourself.
NPM ​
NPM is the recommended installation method when building large scale with iDraw.js. It pairs nicely with module bundlers such as Webpack, Rollup or Vite.
sh
npm install idraw
CDN ​
For prototyping or learning purposes, you can use the latest version with:
html
<script src="https://unpkg.com/idraw"></script>
html
<!-- use global value -->
 <script>
   (function () {
     const { iDraw } = window.iDraw;
@@ -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 82c9463..a77e0dc 100644
--- a/docs/en-US/guide/introduction.html
+++ b/docs/en-US/guide/introduction.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
Introduction ​
What is iDraw.js ​
iDraw.js is a JavaScript framework for drawing on web. It is based on the Canvas API in the browser.
It can be data-driven to render Image on Canvas in the browser. Furthermore, it can also visually handle the position, shape and layout of Drawing-Element.
iDraw.js is open source based on MIT License and it's code is stored in GitHub and NPM So that you can use iDraw.js for free in your own projects.
Getting started ​
sh
npm install idraw
js
import { iDraw } from 'idraw';
+    
iDraw.js
English
中文
English
中文
Appearance
Introduction ​
What is iDraw.js ​
iDraw.js is a JavaScript framework for drawing on web. It is based on the Canvas API in the browser.
It can be data-driven to render Image on Canvas in the browser. Furthermore, it can also visually handle the position, shape and layout of Drawing-Element.
iDraw.js is open source based on MIT License and it's code is stored in GitHub and NPM So that you can use iDraw.js for free in your own projects.
Getting started ​
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/en-US/guide/quickstart.html b/docs/en-US/guide/quickstart.html
index e2235a4..965e63c 100644
--- a/docs/en-US/guide/quickstart.html
+++ b/docs/en-US/guide/quickstart.html
@@ -17,7 +17,7 @@
     
   
   
-    
iDraw.js
English
中文
English
中文
Appearance
Quick Start ​
The First Example ​
It is a simple example of iDraw.js that drawing a rotating rectangle.
Install NPM Module ​
sh
npm install idraw
Mounted DOM ​
html
<div id="app"></div>
Use iDraw.js ​
js
import { iDraw } from 'idraw';
+    
iDraw.js
English
中文
English
中文
Appearance
Quick Start ​
The First Example ​
It is a simple example of iDraw.js that drawing a rotating rectangle.
Install NPM Module ​
sh
npm install idraw
Mounted DOM ​
html
<div id="app"></div>
Use iDraw.js ​
js
import { iDraw } from 'idraw';
 const data = {
   elements: [
     {
@@ -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 a69c57d..d6a99de 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 8c6bc0a..c044704 100644
--- a/docs/en-US/sponsor.html
+++ b/docs/en-US/sponsor.html
@@ -17,8 +17,8 @@
     
   
   
-    
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.

-    
+    
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 85e3d87..30404cc 100644
--- a/docs/hashmap.json
+++ b/docs/hashmap.json
@@ -1 +1 @@
-{"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"}
+{"en-us_api_add-element.md":"b3Et3w3u","en-us_api_center-content.md":"uYyT_FCL","en-us_api_delete-element.md":"9i5KMvfA","en-us_api_resize.md":"GVax-7Xj","en-us_api_select-element.md":"tJMTcCuY","en-us_api_enable-disable.md":"idYW9YoD","en-us_api_move-element.md":"ulp-nKBT","en-us_element_circle.md":"vtzwdLza","en-us_api_update-element.md":"Gx25Vqzh","en-us_api_set-data.md":"TplnoHyK","en-us_api_get-data.md":"dgOAj0R9","en-us_api_set-mode.md":"DZ9KruA1","en-us_element_group.md":"1d2wbPci","en-us_element_html.md":"LlWj6evC","en-us_element_image.md":"G5EQyACZ","en-us_element_path.md":"_4x2T3ul","en-us_element_info.md":"DlSWSLeR","en-us_element_rect.md":"7cWviSrn","en-us_element_svg.md":"LJLh239Y","en-us_guide_class-idraw.md":"hjw125-W","en-us_element_text.md":"3ZddzvzD","en-us_guide_installation.md":"BW1J3qNC","en-us_index.md":"FMW812Gv","en-us_guide_quickstart.md":"HeathdSr","en-us_guide_introduction.md":"Qv_rgoBW","en-us_sponsor.md":"l1E-QegF","index.md":"nNypbIOY","zh-cn_api_move-element.md":"GNHqcqPJ","zh-cn_api_enable-disable.md":"qB2sgMeO","zh-cn_api_get-data.md":"R4Jdjwtp","zh-cn_api_resize.md":"ioSXJvKI","zh-cn_api_delete-element.md":"B7hq6XAp","zh-cn_api_add-element.md":"Zt_40QgL","zh-cn_api_center-content.md":"_7DFhIjX","zh-cn_api_select-element.md":"9tr0VLHg","zh-cn_element_circle.md":"YIt9unDt","zh-cn_element_html.md":"kCl3t9-f","zh-cn_element_group.md":"FyGuwSG7","zh-cn_element_image.md":"lP9HN9oN","zh-cn_api_update-element.md":"JO7ArVfG","zh-cn_api_set-data.md":"nlDkL67y","zh-cn_api_set-mode.md":"xjTJNW1U","zh-cn_element_info.md":"5YcjSz6T","zh-cn_element_path.md":"iSyxwEFn","zh-cn_element_rect.md":"MyQHSqLF","zh-cn_element_svg.md":"SWBoQRT1","zh-cn_element_text.md":"EiEhZE43","zh-cn_guide_class-idraw.md":"vXCwa6fJ","zh-cn_guide_installation.md":"JPGnnjdu","zh-cn_guide_introduction.md":"exdgC_Z5","zh-cn_guide_quickstart.md":"nIOncVwC","zh-cn_sponsor.md":"QhfS_xCH","zh-cn_index.md":"o1kpu-74"}
diff --git a/docs/index.html b/docs/index.html
index 3a19b58..8827df2 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 40ec20c..ce327ec 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/center-content.html b/docs/zh-CN/api/center-content.html
new file mode 100644
index 0000000..3c93faa
--- /dev/null
+++ b/docs/zh-CN/api/center-content.html
@@ -0,0 +1,39 @@
+
+
+  
+    
+    
+    centerContent | iDraw.js
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    
iDraw.js
中文
English
中文
English
Appearance
centerContent ​
说明 ​
centerContent 让内容在视图居中显示，如果内容尺寸超出视图，就会把内容按比例缩小居中在视图中。
参数 ​
  • {object} options
    • {Data} options.data 可选，计算居中尺寸的新内容数据。
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
+
+const app = document.querySelector('#app');
+const options = {
+  width: 600,
+  height: 400,
+  devicePixelRatio: 2
+};
+const idraw = new iDraw(app, options);
+idraw.setData({
+  element: [
+    /* ... */
+  ]
+});
+
+idraw.centerContent();
示例 ​
Demo完整预览 Playground >>

+    
+    
+  
+
\ No newline at end of file
diff --git a/docs/zh-CN/api/centerContent.html b/docs/zh-CN/api/centerContent.html
deleted file mode 100644
index 44e487d..0000000
--- a/docs/zh-CN/api/centerContent.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-  
-    
-    
-    centerContent | iDraw.js
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-  
-  
-    
iDraw.js
中文
English
中文
English
Appearance
centerContent ​
说明 ​
centerContent 让内容在视图居中显示，如果内容尺寸超出视图，就会把内容按比例缩小居中在视图中。
参数 ​
  • {object} options
    • {Data} options.data 可选，计算居中尺寸的新内容数据。
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
-
-const app = document.querySelector('#app');
-const options = {
-  width: 600,
-  height: 400,
-  devicePixelRatio: 2
-};
-const idraw = new iDraw(app, options, {
-  scrollWrapper: { use: true }
-});
-idraw.setData({
-  element: [
-    /* ... */
-  ]
-});
-
-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 6c6612f..cbf3726 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/enable-disable.html b/docs/zh-CN/api/enable-disable.html
new file mode 100644
index 0000000..65c60b2
--- /dev/null
+++ b/docs/zh-CN/api/enable-disable.html
@@ -0,0 +1,38 @@
+
+
+  
+    
+    
+    enable/disable | iDraw.js
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    
iDraw.js
中文
English
中文
English
Appearance
enable/disable ​
说明 ​
  • enable(...) 开启某个功能
  • disable(...) 关闭某个功能
参数 ​
  • {IDrawFeature} feat 功能类型 
    • 'ruler': 标尺功能
    • - 其它功能待开发 ...
ts
type IDrawFeature = 'ruler' | string; // TODO other feature
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
+
+const app = document.querySelector('#app');
+const options = {
+  width: 600,
+  height: 400,
+  devicePixelRatio: 2
+};
+const idraw = new iDraw(app, options);
+idraw.setData(data);
+idraw.disable('ruler');
+
+setTimeout(() => {
+  idraw.enable('ruler');
+}, 1000);
示例 ​
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 9edbb06..547c936 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: [
@@ -49,8 +49,8 @@
 idraw.setData(data);
 
 const resultData = idraw.getData();
-console.log(resultData);
示例 ​
Demo完整预览 Playground >>

-    
+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 2713e64..cf2d0e2 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 4612bbc..3ed16ed 100644
--- a/docs/zh-CN/api/resize.html
+++ b/docs/zh-CN/api/resize.html
@@ -12,12 +12,12 @@
     
     
     
-    
+    
     
     
   
   
-    
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 = {
@@ -25,21 +25,19 @@
   height: 400,
   devicePixelRatio: 2
 };
-const idraw = new iDraw(app, options, {
-  scrollWrapper: { use: true }
-});
+const idraw = new iDraw(app, options);
 idraw.setData({
   element: [
     /* ... */
   ]
 });
 
-idraw.resetSize({
+idraw.resize({
   width: 300,
   height: 200,
   devicePixelRatio: 2
-});
示例 ​
Demo完整预览 Playground >>

-    
+});
示例 ​
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 3e27b90..53b08c8 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: [
@@ -34,8 +34,8 @@
 idraw.setData(data);
 const resultData = idraw.getData();
 
-idraw.selectElement(resultData.elements[0].uuid);
示例 ​
Demo完整预览 Playground >>

-    
+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 fc988c2..d2234d9 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/set-mode.html b/docs/zh-CN/api/set-mode.html
new file mode 100644
index 0000000..881a9b1
--- /dev/null
+++ b/docs/zh-CN/api/set-mode.html
@@ -0,0 +1,33 @@
+
+
+  
+    
+    
+    setMode | iDraw.js
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    
iDraw.js
中文
English
中文
English
Appearance
setMode ​
说明 ​
setMode 可以切换视图操作模式
参数 ​
  • {IDrawType} mode 视图操作模式 
    • 'select': 选择模式，也是默认模式，用于选择和编辑元素
    • 'drag': 拖拽模式，用于拖拽移动整体画布位置
    • 'readOnly': 只读模式，仅显示视图内容，无法进行编辑操作
ts
type IDrawMode = 'select' | 'drag' | 'readOnly';
返回值 ​
无返回值
用法 ​
js
import { iDraw } from 'idraw';
+
+const app = document.querySelector('#app');
+const options = {
+  width: 600,
+  height: 400,
+  devicePixelRatio: 2
+};
+const idraw = new iDraw(app, options);
+idraw.setMode('readOnly');
示例 ​
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 6541b62..e006c7b 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 edcdeee..57af47e 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 16ef029..c211052 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 21f135f..430a354 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 952c84d..bdd2227 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 8e3f852..a4a8efd 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 086fb49..83ebd97 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 2165bc5..36825eb 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 549c3aa..acb5ff2 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 6bd3d03..b80d0a9 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 ee06a80..05dd211 100644
--- a/docs/zh-CN/guide/class-idraw.html
+++ b/docs/zh-CN/guide/class-idraw.html
@@ -12,12 +12,12 @@
     
     
     
-    
+    
     
     
   
   
-    
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,
@@ -29,14 +29,8 @@
   width: number;
   height: number;
   devicePixelRatio: number;
-  enableScroll?: boolean;
-  enableSelect?: boolean;
-  enableScale?: boolean;
-  enableRuler?: boolean;
-  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 >>

-    
+};
Options 属性 ​
属性说明类型默认值是否必填备注
width画板宽度number-true-
height画板高度number-true-
devicePixelRatio设备像素比例number1false-
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 eef6cff..d5e061f 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 51f8cda..1ff55bb 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 2fd9135..2c03d64 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 6e128fb..7928d26 100644
--- a/docs/zh-CN/index.html
+++ b/docs/zh-CN/index.html
@@ -18,7 +18,7 @@
   
   
     
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 ac4d3d2..4e6b3c0 100644
--- a/docs/zh-CN/sponsor.html
+++ b/docs/zh-CN/sponsor.html
@@ -17,8 +17,8 @@
     
   
   
-    
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.

-    
+    
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