zwibbler.js

zwibble.js 是国外 个人写的一个插件
 官网：https://zwibbler.com/
 功能介绍：https://zwibbler.com/#features
 API:https://zwibbler.com/docs/#introduction
 大佬项目地址以及介绍：https://github.com/Lilystudy/zwibbler
 

下面是纯翻译 请结合api查看 会相对明白很多

Introduction 介绍

Features 特征

Quick Start using HTML 使用HTML快速入门

Integrating Zwibbler using Javascript 使用Javascript集成Zwibbler

Example 实例

How it looks 看起来怎么样

Guide to Common Scenarios 常见场景指南

Updating the User interface

,更新用户界面
Manipulating the Undo Stack,操作撤消堆栈
Using Multiple Pages,使用多个页面
Protecting parts of documents with Layers,使用图层保护部分文档
Creating a custom tool,Including HTML elements in the drawing,创建自定义工具（包括图形中的HTML元素）
Associating Data with the Drawing,Spot Highlight,Eraser,Drag and Drop,将数据与图形关联、高亮显示、擦除、拖放

Accessibility 通用性

**z-click method,**z键点击法
focus function,聚焦功能
**See also,**另请参见，

Zwibbler framework reference Zwibbler框架参考

Zwibbler的大部分工作都涉及到创建工具栏和属性面板。因此，Zwibbler包含一个小框架，使该过程变得简单。最重要的是，它不需要编写任何javascript。如果您熟悉Vue或Angular，语法将看起来很自然。

在JSFIDLE上尝试完整的示例。

您可以在HTML中编写一些代码片段来完成一些事情。当Zwibbler执行此代码时，它会自动为所有变量加上传递给控制器函数的作用域前缀。通过这种方式，您将能够调用您定义的函数，或者轻松访问Zwibbler上下文。但是，您将无法访问任何外部变量或函数，如alert（）。如果要调用它们，需要通过将它们分配到作用域使其可用。

每次文档更改、用户更改工具或选择新形状时，都会检查javascript表达式的更改。如果需要Zwibbler在超时或从服务器获取数据后对其他更改做出反应，则必须手动调用scope.$digest（）以更新屏幕。

数组必须经过特殊处理。为了检查表达式的值是否已更改，Zwibbler存储旧值，并使用`=``将其与新值进行比较。但是，如果向数组中添加元素，Zwibbler将无法检测到更改并更新屏幕。无论何时更改数组，都应该首先使用array的concat（）方法复制它，然后修改它。
zwibbler,插件
z-bind:,z-canvas,z-class,z-click,z-colour,z-disabled,z-for,z-has,z-hide,z-if,z-init,z-model, z-value,z-property (on buttons),z-property (on inputs),z-on,z-page,z-popup and z-show-popup,z-selected,z-style,z-text,z-sort, z-sortable,z-html,Custom Directives,Custom components,
自定义指令、自定义组件、

Usage in node.js node.js中的用法

Running the example, 运行实例

Node Properties 节点属性

Types of nodes,节点类型
Properties of nodes,节点属性
See also,另请参见，

Configuration settings 配置设置

allowCrop setting,AllowScrop设置 这将为插入文档的图像设置allowCrop属性的默认值。
autoGroup setting,自动组设置 当设置为true，并且用户使用拾取工具单击某个形状时，Zwibbler还将选择该形状中完全包含的任何形状。
adaptiveBrushWidth setting,adaptiveBrushWidth设置 控制笔刷工具的线宽属性是以屏幕单位还是以文档单位。默认情况下，使用文档单位。当用户放大画笔时，画笔宽度将在屏幕上显示得更大。
adaptiveLineWidth setting,adaptiveLineWidth设置 控制线条和形状工具的线宽属性是以屏幕单位还是以文档单位。默认情况下，使用文档单位。当用户放大时，屏幕上将显示更大的线宽。
allowPointerEvents setting allowPointerEvents设置 确定是否注册浏览器指针事件（如果可用），而不是鼠标事件。
allowSystemClipboard setting,allowSystemClipboard设置 确定是否优先使用系统剪贴板而不是本地存储。特别是，使用系统剪贴板将允许用户将图像粘贴到文档中。
allowResize setting,允许大小设置 确定是否允许用户调整图形中项目的大小。
allowSelectBox setting,allowSelectBox设置 在触摸屏上，如果您在拾取工具中并触摸屏幕，您将绘制一个蓝色框来选择形状。此框称为选择框。但是，如果zwibbler占据了大部分屏幕，用户将无法滚动网页。可以使用此设置关闭选择框，从而允许用户在浏览图形时滚动网页。
allowTextInShape setting,允许形状设置 这允许用户在闭合形状上双击或使用工具时，在闭合形状内写入文本。请注意，如果这不是用户想要的，那么这可能会很烦人。
allowScroll setting,allowScroll设置 设置为false时，用户将无法滚动。此设置与控制滚动条可见性的滚动条不同。

**allowZoom setting,**允许缩放设置 此选项允许用户使用键盘或平移工具进行放大和缩小。

autoPickTool setting,自动适配工具设置 绘制形状后，Zwibbler将立即返回拾取工具。

autoPickToolText setting,自动适配工具设置 绘制形状后，Zwibbler将立即返回拾取工具。

background setting,背景设置 设置画布的背景。

backgroundImage setting,背景图像设置 设置画布的背景图像。

broadcastMouse setting,广播鼠标设置 允许在同一共享会话中向其他用户广播鼠标位置。它将以点或图像的形式出现在屏幕上。
如果使用Zwibbler.component定义鼠标指针组件，则可以为鼠标指针提供模板HTML clickToDrawShapes setting,单击以绘制形状设置
在形状工具中，通常必须从一个角拖动到另一个角才能绘制形状。通过将此设置为true，可以允许用户通过单击来放置形状
confine setting,限制设置 拖动形状时，可以对其进行限制，使其无法从视图中拖出。
debugOutlineColour,调色 内部画布有一个红色轮廓，除非错过了调整大小事件，否则不应显示该轮廓。在调整浏览器窗口大小时，它也可以短暂可见。这可以设置轮廓的颜色，使其不引人注目。
defaultArrowSize setting,默认箭头大小设置控制箭头工具中箭头的大小
defaultArrowStyle setting,默认箭头样式设置控制箭头工具中箭头的样式。
defaultArrowXOffset setting,defaultArrowXOffset设置控制绘制箭头时箭头的大小。
defaultBold setting,默认粗体设置新文本的默认字体大小。
defaultBrushColour setting,默认颜色设置设置使用笔刷工具时的默认笔刷颜色
defaultBrushWidth setting,默认笔刷宽度设置设置默认笔刷宽度（以像素为单位）。
defaultFillStyle setting,defaultFillStyle设置设置默认的填充颜色
defaultFont setting,默认字体设置设置用于文本的默认字体。
defaultFontSize setting,defaultFontSize设置设置用于文本的默认字体大小。
defaultItalic setting,默认斜体设置新文本的斜体设置。
defaultLineWidth setting,默认线宽设置设置用于形状轮廓的默认线宽，而不是笔刷工具。
defaultPaperSize setting,默认纸张大小设置设置文档的纸张大小。
要设置自定义大小，请使用ZwibblerContext.setPaperSize（宽度、高度）函数并将宽度和高度作为数字传递。否则，将这些值之一用作默认值。要指定横向，请将其添加到名称中，例如“字母横向”。
defaultRoundRectRadius setting,defaultRoundRectRadius设置
设置路径的舍入半径。每当绘制两条连接线时，角点都会按此量平滑。这是一种不同于曲线的算法，曲线是使用defaultSmoothness设置设置的。
defaultRoughness setting,默认粗糙度设置设置路径的粗糙度。对于非零粗糙度，路径以草图样式绘制。
defaultSmoothness setting,默认平滑度设置设置“曲线”工具的默认平滑度。
defaultStrokeStyle setting,defaultStrokeStyle设置设置形状轮廓的默认颜色。
defaultTextAlign setting,defaultTextAlign设置设置默认的文本对齐方式
defaultTextBackground setting,defaultTextBackground设置设置文本的默认背景色。
defaultTextDecoration setting默认文本装饰设置设置文本的默认下划线样式。
defaultTextFillStyle setting,defaultTextFillStyle设置设置文本的默认颜色。
defaultTextStrokeStyle setting,defaultTextStrokeStyle设置设置文本的默认轮廓颜色。
defaultTextLineWidth setting,defaultTextLineWidth设置设置文本的默认轮廓宽度。
defaultZoom setting,默认缩放设置设置绘图区域的默认缩放级别。
drawShapeStyle setting,拉丝形状样式设置设置图形圆和多边形的默认样式。
fastDraw setting,快速绘图设置设置为允许Zwibbler使用多个画布元素堆栈进行高效绘图。当设置为false时，Zwibbler将避免这样做，而是使用类“.Zwibbler main canvas”在画布上绘制所有操作
fonts setting,字体设置设置可在“属性”面板的文本中使用的字体。除非使用内置的“属性”面板，否则无需设置此选项。
gridBlocks setting,网格块设置设置背景设置为栅格时每个分组中的块数。
gridColour setting,网格颜色设置设置背景设置为栅格时线条的颜色。
gridSpacing setting,网格间距设置设置背景设置为栅格时每个正方形的尺寸。
imageFolder setting,图像文件夹设置设置工具栏图像目录的路径。
language setting,语言环境设置Zwibbler显示提示和提示文本的语言。
leaveTextToolOnBlur setting,leaveTextToolOnBlur设置当为文本输入显示文本框时，此属性确定当用户单击其他任何位置时，该文本框是否应立即消失。
maximumZoom setting,最大变焦设置限制用户可以设置为给定最大值的缩放级别。setZoom功能不受影响
minimumZoom setting,最小缩放设置将用户可以设置的缩放级别限制为给定的最小值。setZoom功能不受影响。
multilineText setting,多行文字设置设置允许在文本工具中使用的换行符。
nudge setting,微移设置设置用户使用光标键移动形状时要使用的x和y偏移。
outsidePageColour setting,外部页面颜色设置当pageView设置为true时，设置页面外部区域的颜色。
pageBorderColour,页面边框颜色设置围绕纸张绘制的1像素边框的颜色。
pageInflation setting,页面膨胀设置当pageView设置为true时，设置页面周围灰色边框的最小大小（以像素为单位）。屏幕上的真实大小受缩放级别和pagePlacement设置的影响。
pagePlacement setting,页面位置设置设置页面视图设置为true时页面的位置。
pageShadow setting,页面阴影设置启用或禁用页面周围的阴影以指示边框。
pageView setting,页面浏览设置绘制页面的轮廓。
pasteOffset setting,粘贴偏移设置 设置粘贴项目时X和Y方向的偏移。
pasteOffsetX setting,pasteOffsetX设置 设置粘贴项目时X方向的偏移。此值仅在pasteOffset设置为0时使用。
pasteOffsetY setting,粘贴偏移设置 设置粘贴项目时Y方向的偏移。此值仅在pasteOffset设置为0时使用。
persistent setting,持续设置 在页面加载之间保留文档。
pixelsPerUnit setting,像素运行设置 设置屏幕标尺的比例。
preciseNudge setting,精密混浊设置 设置用户在按住Ctrl键的同时使用光标键移动形状时要使用的x和y偏移。
readOnly setting,只读设置 禁止用户与图形交互。设置为true时，图形的行为类似于图像。
scrollbars setting,滚动条设置 启用或禁用文档查看区域中的滚动条。
setFocus setting,设置焦点设置 确定加载HTML页面时Zwibbler是否获取键盘焦点
showArrowTool setting,显示箭头工具设置 确定是否在内置工具栏中显示箭头工具。
showBrushTool setting,ShowBrush工具设置 确定是否在内置工具栏中显示笔刷工具。
showCircleTool setting,showCircleTool设置 确定是否在内置工具栏中显示圆工具。
showColourPanel setting,ShowColor面板设置 确定是否在画布底部显示调色板。
showCopyPaste setting,showCopyPaste设置 确定是否在内置工具栏上显示复制/粘贴按钮。
showCurveTool setting,显示曲线醇设置 确定是否在内置工具栏中显示曲线工具。
showDebug setting,显示调试设置 确定是否在画布右侧显示调试信息。这有助于诊断问题和查看有关Zwibbler的日志信息。
showFontNameProperty setting,showFontNameProperty设置 确定是否允许用户在属性面板中选择字体。
showFontSizeProperty setting,showFontSizeProperty设置 确定是否允许用户在属性面板中选择字体大小。
showHints setting,显示提示设置 在左上角显示一组提示，以帮助用户绘制直线和曲线。
showLineTool setting,showLineTool设置 确定是否在内置工具栏中显示线条工具。
showMoveToFrontBack setting,showMoveToFrontBack设置 确定是否在内置工具栏中显示“向前移动”和“向后发送”按钮。
showOwnPointer setting,显示指针设置 在协作会话中，如果启用了broadcastMouse，则确定是否在用户自己的屏幕上突出显示用户自己的鼠标指针。
showOtherPointers setting,显示其他指针设置 在协作会话中，如果启用了broadcastMouse，则确定是否显示其他用户的鼠标指针。
showPageSelector setting,显示页面选择器设置 显示页面选择器，允许用户在页面之间插入、删除和切换。还要考虑设置PaveVIEW和Debug文件大小选项。
showPageSelectorControls setting,显示页面选择器或控件设置 允许用户使用内置页面选择器添加或删除页面。
showPickTool setting,showPickTool设置 确定是否在内置工具栏中显示选择工具。
showPropertyPanel setting,showPropertyPanel设置 在绘图区域的右侧显示属性面板。
showRoundRectTool setting,ShowRoundRect工具设置 确定是否在内置工具栏中显示圆角矩形工具。
showRuler setting,显示尺设置 确定是否显示屏幕标尺。
showShapeBrushTool setting,ShowShapeBushTool设置 确定是否在内置工具栏中显示“魔法形状笔刷”工具。
showSloppinessProperty setting,showSloppinessProperty设置 允许用户从属性面板编辑“坡度”属性。
showSmoothnessProperty setting,showSmoothnessProperty设置 允许用户从属性面板编辑平滑度属性。
showSquareTool setting,showSquareTool设置 确定是否在内置工具栏中显示方形工具。
showTextTool setting,showTextTool设置 确定是否在内置工具栏中显示文本工具。
showToolbar setting,显示工具栏设置 确定是否显示内置工具栏。此工具栏可帮助您快速启动和运行。但是，大多数用户创建自己的工具栏，以便能够更全面地对其进行自定义。
showUndoRedo setting,showUndoRedo设置 确定是否在内置工具栏中显示撤消/重做按钮。
singleStrokeBrush setting,单冲程电刷设置 确定笔刷工具的行为。
snap setting,捕捉设置 允许形状捕捉到具有间距的栅格。
spotHighlightColour setting,聚光灯颜色设置 设置用于聚光灯高光功能的背景颜色。
spotHighlightZIndex setting,聚光灯ZINDEX设置 设置聚光灯高光遮罩的z索引。它将覆盖zIndex属性较低的形状，而zIndex属性较高的形状将绘制在顶部。理想情况下，您会选择一个比您已经使用的最高Z索引高的Z索引，除非您希望在聚光灯自身的顶部绘制。
toolbarButtonSize setting,工具栏按钮化设置 如果showToolbar为true，则控制内置工具栏中按钮的尺寸。
touchRadius setting,接触半径设置 确定用户可以从选择控制柄的中心单击以移动该控制柄的距离。设置为零时，将使用默认设置。
此设置仅影响默认选择句柄。它对使用addSelectionHandle配置的图像句柄没有影响。
units setting,单位设置 屏幕标尺中显示的单位。示例：m，ft，“，px。
useTouch setting,useTouch设置 确定Zwibbler是否针对触摸屏进行了优化。启用触摸时，选择手柄和调色板会变大，并且在选择形状时会出现一个垃圾桶，以便用户可以在不使用键盘的情况下删除形状。
viewMargin setting,视距设置 当缩放到页面、绘图宽度或设置视图矩形时，Zwibbler将尝试在绘图周围保留给定数量屏幕像素的边距。如果希望在绘图区域上放置工具栏，但不希望它在缩放到整页时遮挡绘图，则此选项非常有用。
此配置选项可以设置为数字数组，也可以通过用逗号分隔数字以字符串形式设置。使用getConfig（“viewMargins”）检索值时，将始终返回四个数字的数组。
zoomOnResize setting,缩放大小设置 当设置为true时，Zwibbler将自动缩放文档，以便在调整窗口大小时将其保留在视口中。通常，仅当缩放设置设置为“页面”或“宽度”时，才会发生此缩放。
See also 另请参见，

Keyboard Configuration 键盘配置

Events 事件

connected,已连接、
connect-error,连接错误
colour-clicked,单击颜色、当用户单击颜色时，您可以截取事件并对其进行修改。这由setColor方法调用。
如果返回null或空字符串，则更改颜色的请求将被忽略。
document-changed,更改文档、支持的事件是“文档更改”。无论何时文档因任何原因发生更改，都会触发该命令。例如，通过调用canUndo和canRedo的属性中显示有关键盘命令的信息，可以使用此选项正确显示撤消/重做按钮。
drop-shape,放置形状、当用户将形状从一个位置移动到另一个位置时，会发送此消息。您可以返回false以取消移动。该活动将收到一个结构，提供有关移动的信息。
edit-text-hidden event,编辑文本隐藏事件、用户编辑完文本后，将触发此事件。
edit-text-shown event,编辑文本显示事件、当用户激活文本工具时，将使用HTML TextArea元素来允许文本编辑，并且将触发此事件。
paste event,粘贴事件、
blur,模糊当Zwibbler因按ESC键而失去键盘焦点时，会发送此事件。对于键盘可访问性，应用程序应通过将键盘焦点移回工具栏上当前使用的工具（如果有）来处理此问题。
hint,提示 “提示”事件在用户绘制线条时发送。传递给函数的文本将帮助用户完成绘制直线和曲线的过程
selected-nodes,选定节点“选定节点”事件在选择更改时发送。您可以使用getSelectedNodes获取节点的ID。
set-page,设置页面“设置页面”事件在当前页码更改时发送，而不是在事务中。该参数是从零开始的页码。
local-keys,本地键
local-changes,本地更改
node-clicked,单击节点单击节点时会发送“已单击节点”事件。回调的第一个参数是被单击节点的id。x和y在文档坐标中。
double-click,双击双击画布且拾取工具处于活动状态时，将发送“双击”事件。前两个参数x，y是文档中的坐标（不是屏幕）。最后一个参数nodeid是单击的节点（如果有）。如果未单击任何节点，则该节点为空。
tool-changed,更改工具
当前刀具因任何原因发生更改时，将发送“刀具更改”事件。应用程序可以使用此选项高亮显示自定义工具栏上的按钮。给回调的参数是工具的名称，可以是：
resource-loaded,加载资源加载映像时会发送“资源加载”事件。如果您使用Zwibbler.render（）绘制了文档或创建了文档的图像，则在加载新图像或字体时，您可能需要在收到此事件时再次执行此操作。
“nodes-added”, “添加节点”"
nodes-removed"“删除节点”,
and "nodes-changed"更改节点”,
draw绘制,destroy,销毁
resize, 调整大小
scroll,滚动
See also,另请参见，

Zwibbler Context Functions Zwibbler上下文函数

addPage,地址页 将页面添加到文档末尾
addKeyboardShortcut,添加键盘快捷方式 当用户按键盘上的键时调用该函数。有关语法的帮助，请参阅键盘配置
addSelectionHandle,定义自定义选择句柄。默认情况下，定义了九个选择句柄，如removeSelectionHandles函数的文档中所示。通过在启动时调用此方法，您可以在默认值之外添加自己的值，或者删除默认值并全部定义它们。
缩放的原点以及控制柄是否改变纵横比将自动推断，因此具有lockAspectRatio特性集的形状将仅显示位于选定区域拐角处的缩放控制柄。
addToGroup,将节点添加到现有组中。可以在现有节点上使用getGroupParent函数来获取组父级。
addToLanguage,设置特定语言中文本字符串的国际化文本。Zwibbler使用的语言字符串在源代码的LanguageData.coffee文件中给出。通过使用换行符分隔多个字符串，可以同时设置多个字符串。例如，以下是如何定义线条图提示。您可以通过调用添加或修改法语。
alignNodes,对齐节点
autoScroll, 自动旋转 如果给定文档点接近或超出视图边缘，则将其滚动到视图中。此方法用于在拖动过程中由自定义工具调用。
begin,开始
调用时，下一次调用commit之前的所有后续操作都将作为单个单元存储在undo（）堆栈中，因此如果用户单击“undo”，这些操作都将被撤消。
您可能有嵌套的begin（）调用，后面跟相同数量的commit（）调用
blur,模糊从Zwibbler中删除键盘焦点，使其不再响应键盘快捷键。如果用户点击Zwibbler，它将自动获得焦点。
bringToFront,将所选内容移到前面
canRedo,重做 使用此函数确定是否可以重做操作。
canUndo,撤消 使用此功能确定是否可以撤消操作。
clearSelection,清除选择取消选择所有内容。
clearUndo清除撤消, 清除撤消堆栈。
commit,结束自上次调用begin（）以来的更改跟踪。（可选）使更改不可由用户撤消。
copy，复制当前选择。如果justReturn设置为true，则该值仅作为字符串返回。否则，它也会被放入Zwibbler剪贴板，该剪贴板存储在HTML localStorage中。
copy（）返回的字符串可以存储在服务器上，以创建模板或代码段供用户以后使用，并且可以使用paste（）方法将它们插入到任何文档中。
createGroup, 创建组 将给定的节点ID分组在一起。返回组的id。每当用户选择组中的一个元素时，其他元素也会被选择，因此它们看起来是单个形状。
createHTMLNode,创建一个HTML组件，该组件先前已使用Zwibbler.component定义。
这相当于调用：ctx.createNode（“HTMLNode”，{“$component”：“组件名称”，…其他属性}）
createNode,创建给定类型和属性的节点。
createPath,使用给定的path命令数组创建PathNode。
createShape,创建具有给定坐标的闭合形状。
createSharedSession,开始与Zwibbler协作服务器共享文档更改。
createToolbar,允许您在自己的div元素内轻松创建自定义工具栏。该函数将使用指定的图像将a元素放置在div中，单击它们时调用您定义的函数。
您必须设置CSS class.zwibbler按钮的样式，使其在CSS中具有固定大小，否则按钮将不会显示。
cut, 剪切当前选择。这会将其复制到localStorage中的Zwibbler剪贴板并删除所选内容。它还将选择作为字符串返回，如在copy中。
decoration, 装饰 向某些节点添加装饰。将在节点顶部绘制一个装饰，单击该装饰时将通知您。
与addSelectionHandle方法不同，装饰会一直显示，并且可以有条件地应用于某些节点。
deleteNode,删除给定的节点。用户可以撤消此操作。
deleteNodes,相当于删除
deletePage,删除页 使用从零开始的页码删除给定页面。用户可以撤消此操作。
deleteSelection,删除所选内容 删除当前选定的形状。
destroy,销毁 销毁此Zwibbler实例并释放它使用的所有内存。
dirty,脏标志 设置或检索文档脏标志。如果文档在创建或加载后或上次调用dirty（false）后已更改，则该文档将被标记为dirty。
download,下载 使浏览器以“svg”或“pdf”或“png”文件的形式下载当前文档。格式必须是以下格式之一。浏览器将提示用户保存文件
draw,绘画 将文档绘制到给定的HTML5画布上下文。
duplicate,复制 复制当前选择。
editNodeText,编辑节点文本 如果给定节点可以包含文本，则立即在该节点上进入文本编辑模式，允许用户更改文本。
findNode,查找节点 返回属性“tag”等于标记的第一个节点的id。如果没有这样的节点，则返回null。tag属性供您使用，可以使用setNodeProperty或createNode设置。
findNodes,与findNode相同，但此函数返回一个节点数组。
flip,旋转 围绕穿过其中心的水平线翻转当前选择，该水平线旋转了给定的度数。
flipNodes,翻转给定的一个或多个节点。
focus,给Zwibbler键盘焦点，允许使用键盘快捷键。这可能会导致浏览器将Zwibbler滚动到视图中。只有将setFocus设置设置为false时，才需要调用此函数。
forEachNode,循环所有节点
generatePalette,生成调色板
在给定的div元素内生成调色板。将自动生成256种颜色的混合，当用户单击时，色样将工作。
getActiveLayer,获取活动层 返回setActiveLayer设置的活动层。如果未设置图层，则为“默认”。当多个层处于活动状态时，它们将返回，并用逗号分隔
getAllNodes,返回当前页上所有节点的数组。
getBackgroundImage,返回文档背景图像的URL，如果未配置，则返回null。
getBoundingRectangle,返回给定节点的边框。矩形具有x、y、宽度和高度属性。
getCanvasScale,获取画布比例 返回图形的当前比例（缩放）因子。结果总是一个数字。
getConfig,获取配置 检索配置参数的值。
getCurrentPage,获取当前页面 返回从零开始的页码
getCurrentTool,获取当前工具 获取当前工具的名称，如果工具没有名称，则获取未定义的名称。有关详细信息，请参阅“工具更改”事件。
getDocumentCoordinates,获取文档坐标 给定网页上的坐标，返回文档中相应的{x，y}坐标。如果还提供了宽度和高度，则它们在按缩放因子缩放后返回为{x，y，width，height}。
getDocumentProperty,获取文档属性 返回文档属性。可以使用setDocumentProperty函数设置这些属性
getDocumentSize,获取文档大小
返回包含当前页的x、y、宽度和高度的对象。下面是如何计算文档大小的。
如果当前页面的大小由setPageSize设置，则将返回该页面。
否则，如果已设置文档大小，将返回该文档。
否则，如果pageView设置为true，则返回美国字母大小的页面矩形。（8.5英尺乘11英尺）
否则，如果页面上有任何形状，则返回一个足以包围它们的矩形。
否则，文档为空。返回一个10x10像素的正方形。
getDrawingRectangle,获取绘图矩形 返回包含文档的x、y、宽度和高度、左、右、上、下的对象。与getDocumentSize函数不同，忽略图纸尺寸，这是覆盖文档中所有形状对象所需的实际范围。
getEditNode,获取编辑的节点 如果在已选择的情况下单击，则可以编辑某些节点。在这种情况下，将显示编辑控制柄。通过调用此函数，可以获得编辑句柄处于活动状态的节点。如果没有可见的编辑句柄，则返回0。
getElement,获取元素 返回包含Zwibbler的HTML div元素。当使用Zwibbler HTML框架时，这是<；zwibbler>或<；包含画布的div zwibbler>元素。否则，它就是用来创建Zwibbler的

。
getFillColour,获得填充颜色 返回将来绘制的形状的默认填充颜色。使用SETCOLOR设置此值
getGroupParent,获取组父级 返回节点的组id（如果有）。组表示选定并一起移动的节点的集合。
getGroupMembers,获取组成员 返回组中节点的ID。
getHistory,获取历史 返回当前文档的修订版数组。每次修订都会记录其标识符和修订时间。请注意，由于时钟差异，当多个用户协作时，时间不一定会增加。
每个记录都有ts，即自历元（unix时间）起的秒数和cid，cid是可以传递给goToRevision（）函数的更改标识符
getLanguageString,获取语言字符串 按照配置设置，以当前语言返回密钥的翻译。
getLayers,分层 以字符串数组的形式返回文档中图层名称的列表。
getLayerNodes,获取层节点 返回给定名称所在层中的节点ID数组。
getLocalChanges,获取本地更改 返回一个字符串，表示自上次更改被标记为已发送以来用户对文档所做的更改。除非您正在实现自己的协作协议，否则不需要调用它。
getLocalSessionKeys,获取本地会话密钥 返回以前使用setSessionKey（）设置的键数组。每个键都有一个名称和值成员。
getNewLocalSessionKeys,获取新的本地会话密钥 返回以前使用setSessionKey（）设置的键数组。每个键都有一个名称和值成员。仅返回自上次调用getNewLocalSessionKeys（）以来已更改的键
getNodeCoordinates,获取节点坐标
给定网页上的x和y坐标，返回相对于特定形状的坐标。例如，如果文档中的图像可能已缩放和旋转，并且您希望确定用户单击该图像的位置，则可以使用此功能。
getNodeFromElement,从元素获取节点 检索包含给定HTML元素的Zwibbler节点，如果该元素未包含在Zwibbler节点内，则检索null。
getNodeIndex,获取节点索引 返回父节点中节点的索引，如果节点没有父节点，则返回-1。这可能受带出Ront/sendToBack或添加和删除组成员的影响。
getNodePageNumber,获取节点页码
返回给定节点的从零开始的页码，如果不存在，则返回未定义的页码

getNodeObject,获取节点对象
getNodeProperty 获取节点属性，
getNodeRectangle获取节点矩形，
getNodeTransform获取节点变换，
getNodeScale获取节点比例，
getNodeType获取节点类型，
getPageCount获取页面计数，
getPageNode获取页面节点，
getPageRect获取页面矩形，
getPathAsPoints获取路径点，
getPropertySummary获取属性摘要，
getScreenCoordinates获取屏幕坐标，
getSelectedNodes获取所选节点，
getStrokeColour获取笔划颜色，
getNodeUnderPoint获取点下节点，
getNodesUnderPoint获取点下节点，
getViewRectangle获取视图矩形，
goToRevision转到修订

hasFocus有焦点,，
insertImage插入图像，
insertPage插入第页，
isFullscreenSupported支持全屏显示，
isPointOverCanvas是指画布上的点，
isLayerVisible图层是否可见，
joinSharedSession加入共享会话，
leaveSharedSession离开共享会话，
load负载
markChangesSent标记已发送的更改，
moveDown下移、
movePage移页、
moveUp上移、
newDocument新建文档、
nextPage下一页、
on打开、
onComplete完成、
openFile打开文件、
openFromComputer从计算机打开、
paste粘贴、
previousPage上一页、
print打印、
redo重做、
redraw重画、
resize调整大小、
save保存

sendToBack返回、将所选内容移到后面
selectNodes选择节点、给定一个节点ID数组，将它们添加到当前选择中。
setActiveLayer设置活动层、设置在其中创建新对象的活动图层。默认图层名为“默认”。如果给定层不存在，则通过此函数创建该层
setConfig设置配置、设置配置选项并立即更新显示。名称是Zwibbler的配置选项之一。该值必须与配置选项的预期类型匹配。例如，如果需要一个布尔值，它必须为真或假。如果它是一个字符串，那么它将被转换为适当的类型。
setColour设置颜色、模拟用户点击颜色面板中的颜色。这可能会给当前形状着色或设置笔刷颜色，这取决于选择的工具。调用此函数将触发颜色点击事件。
setCurrentPage设置当前页面、切换到给定的页面，给定其基于零的页码。如果在事务中调用此函数，则不会触发设置页事件。
setCursor设置光标、设置画布的CSS光标。这在创建自定义工具时非常有用。
setCustomBackgroundFn设置自定义背景Fn、绘制绘图背景的函数。它通过canvasContext(已经缩放并转换为用户的缩放级别)和查看矩形的坐标(文档坐标)传递。
setCustomMouseHandler设置自定义鼠标处理程序、为Zwibbler画布上的所有鼠标事件设置处理程序。你可以设置一个处理程序来覆盖zwibbler的默认行为。从这些方法返回true将导致Zwibbler停止处理事件。
当您需要覆盖pick工具的默认处理时，setCustomMouseHandler非常有用。
setDocumentProperty设置文档属性、设置与文档关联的自定义数据。
setDocumentSize设置文档大小、设置文档大小。当查看区域大于此大小时，滚动条就会出现。如果文档大小从未设置，或者您将宽度和高度设置为空，那么大小将始终基于内容计算。
setDocumentSizeInTransaction设置文档大小事务、设置文档大小的用户可撤消版本。
setLayerName设置层名、重命名图层。
setPageBackground设置页面背景、设置页面的背景。
setPageSize设置页面大小、设置任何页面的大小。当显示页面时，这将覆盖当前文档大小。
setPaperSize设置图纸大小、使用纸张大小的名称设置文档大小。您可以指定宽度和高度为96 dpi单位。这与调用setDocumentSize相同。
setNodeProperty设置节点属性、设置指定节点的属性。
setNodeProperties设置节点属性、设置给定节点的多个属性。properties参数是包含特性值的对象。
setNodeVisibility设置节点可见性、设置节点是否可见。不可见的节点不能单击，也不能绘制。此属性不随文档一起保存。
setOpacity设置不透明度、Sets whether the node is visible. Invisible nodes cannot be clicked or drawn. This property is not saved with the document.
setProperties设置特性、设置选定节点的属性(如果有的话)，以及当前工具(如果有的话)的属性。此外，更新将来绘制的形状的默认属性。相当于调用setToolProperty()、setNodeProperty()和setConfig()，并使用相应名称的default。此方法在构建属性面板时非常有用，该面板允许用户更改形状或当前工具的属性
setProperty设置特性、与setProperties等效，只是它只设置一个属性。
setSessionKey设置会话关键点、您可以设置与协作会话关联的键/值对。所有其他用户都会被通知更改，对于非持久密钥，当您断开会话时，其他用户会被通知该值被设置为空。
setToolProperty设置工具特性、设置将要绘制的形状的特性。特性更改仅在当前工具更改之前应用。
showLayer显示图层、设置给定层是否可见。
setViewRectangle设置视图矩形、立即设置位置和比例，以便查看区域准确地包含给定的矩形。矩形的格式与getViewRectangle返回的格式相同。
setZoom设置缩放、将视图缩放到给定比例。要进行更高级的缩放，请直接使用setViewRectangle（）方法。
showColourPicker显示颜色选择器、显示一个颜色选择器，允许用户更改当前选中节点的颜色属性。如果颜色选择器不适合给定的坐标，它将被移动，以便它将完全可见。
这个方法有两种形式。在三个参数版本中，所选节点的给定属性被设置为所选的颜色。在两个参数版本中，该方法返回一个解析为所选颜色的承诺。
snap捕捉将点捕捉到栅格或任何准则。
stopEditingText停止编辑文本 如果处于文本模式，请停止编辑文本，并提交或放弃更改

translateNode平移节点、移动给定节点的x, y值。
removeListener删除侦听器、从要调用的处理程序列表中删除给定的方法，当指定的事件被触发或给定的配置设置发生更改时。
removeSelectionHandles删除选择手柄、删除所有选择句柄。如果您正在重新定义选择句柄的位置或为它们使用图像，请在创建上下文之后调用此函数，然后使用addSelectionHandle函数来添加定制版本。
rotateDocument旋转文档、以弧度为单位旋转整个文档。该功能可以自动改变文件大小。该操作可以由用户撤消。
rotateNode旋转节点、：围绕可选的x、y坐标，以弧度角度旋转给定节点。如果省略x和y，则使用节点的中心
rotatePage旋转页面、以弧度为单位旋转给定的页面。该操作可以由用户撤消。
scaleNode缩放节点、将给定的节点按x, y的数量缩放。缩放是相对于可选的原点ox,oy进行的。如果没有指定原点，则使用一个或多个节点的中心。
setNodeTransform设置节点变换、清除节点的转换，并将它们设置为给定的矩阵。
toggleFullscreen切换全屏、切换Zwibbler的全屏状态，让用户将绘图区域和工具扩展到整个屏幕。
如果没有传入参数，Zwibbler将首先使用标记名“Zwibbler”或属性“Zwibbler”搜索主画布的祖先并使用它。这种行为允许与Zwibbler框架兼容。如果没有找到，则使用绘图区域。
undo撤消、如果可能，撤销最后一个操作。
ungroup解组、如果数组中的任何节点都是组，则将组分解为其成员并删除。该组织的成员仍在文件中。不属于组的任何节点都不受影响
upload上载、Form是一个HTML表单元素。这个方便的函数将表单上传到服务器，并向用户显示适当的进度通知。它对于上传文件中使用的图像非常有用。
useArrowTool使用箭头工具、激活箭头工具，就像用户在工具栏上单击它一样。
useBrushTool使用画笔工具、激活画笔工具，就像用户在工具栏上单击它一样。你可以设置strokeStyle属性为“erase”来实现一个橡皮擦工具。
useCircleTool使用圆工具、激活圆工具，就像用户在工具栏上单击它一样。
useCurveTool使用曲线工具、激活曲线工具，就像用户在工具栏上单击它一样。
useCustomTool使用自定义工具、激活已定义的自定义工具。创建一个实现onMouseUp/Down/Move的对象来定制行为。
useEditHandleTool使用编辑手柄工具、给定形状的节点id，开始编辑它。这相当于单击一个形状，然后再次单击，以启用其编辑模式。在一个形状上的编辑模式允许你移动它的点，一个图像允许你裁剪它。你可以在不在活动层的节点上调用这个函数，这对于允许用户裁剪背景图像很有用。
useFreehandTool使用徒手工具、徒手工具可以让用户创建平滑的笔触。模态参数决定了如何从用户的运动中得到曲线
useLineTool使用直线工具、激活直线工具，就像用户在工具栏上单击它一样。
usePanTool使用平移工具、激活平移工具，就像用户在工具栏上单击它一样。平移工具允许用户拖动查看区域而不是使用滚动条。
usePickTool使用拾取工具、激活选择工具，就像用户在工具栏上单击了它一样。选择工具允许选择形状
usePolygonTool使用多边形工具、激活多边形工具。用户可以绘制给定边数和旋转数的多边形。第一个顶点放置在形状的顶部中心，除非给定旋转。
useQuadraticBezierTool使用二次贝塞尔工具，激活二次贝塞尔工具，就像用户在工具栏上单击它一样。二次贝塞尔曲线是只有一个弯曲的光滑曲线。这个工具可以让用户绘制和编辑平滑的曲线。
useRectangleTool使用矩形工具，激活方形工具，就像用户在工具栏上单击了它一样。
useRoundRectTool使用圆形矩形工具，激活圆角矩形工具。
useShapeBrushTool使用形状笔刷工具，激活形状笔刷工具，就像用户在工具栏上单击它一样。形状刷允许用户绘制一个粗略的形状。当他们释放鼠标时，它将变成最近的具有直边的完美多边形，作为一个PathNode。
useStampTool使用图章工具，激活图章工具。图章工具允许用户通过单击多次放置图像。
useTextTool使用文本工具，激活文本工具，就像用户在工具栏上单击它一样。
zoomIn放大，按预先设定的数量增加比例(目前为1.1)
zoomOut缩小，按预先设定的数量减少比例(目前是1/1.1)

Internal Architecture 内部架构

The Zwibbler name space,The Application Object,The ZwibblerCanvas,The ZwibblerDocument,

Data Storage 数据存储

Zwibbler应用程序可以以两种不同的格式保存数据：
PNG图像，采用Base64编码。这是使用HTML5 toDataURL函数实现的。

Zwibbler文件。这包括文本字符串“zwibbler3.”，后跟一个JSON数组，由节点、节点类型和父/子关系组成。
Zwibbler只能以“zwibbler3”格式打开文档。它无法从PNG文件打开文档，尽管PNG文件可以作为ImageNode插入到新文档中。

下面是Zwibbler使用的文件格式的简短描述。文件格式由字符串“zwibbler3.”和一个JSON数组组成。每个数组元素都是一个JSON对象，其键和值等于节点的属性。值为转换矩阵的属性将接受特殊处理。形式的矩阵

is stored as an array [a, b, c, d, x, y].
此外，该对象还有三个附加成员：

id是节点的数字id。它是根据用户创建形状的顺序指定的。

类型是节点的类型。例如，“路径节点”或“文本节点”。

parent（如果存在）是项的父节点的数字id。例如，所有顶级形状和组都是根节点“0”的子级，分组的对象将是其他某个GroupNode的子级。

Sharing and Collaboration 共享与协作

Using your own collaboration protocol,See also,

Path Commands 路径命令

Change History 改动

April 2021 - June 2021,January 2021 - March 2021,October 2020 - December 2020,July, 2020 - September 2020,April 2020 - June 2020,January 2020 - March 2020,October 2019 - December 2019,July 2019 - September 2019,April 2019 - June 2019,January 2019 - March 2019,October 2018 - December 2018,July 2018 - September 2018,April 2018 - June 2018,January 2018 - March 2018,November 2017 - December 2017,August 2017 - October 2017,May - July 2017,January - April 2017,October - December 2016,July - September 2016,April - June 2016,January - March 2016,December 2015,November 2015,October 2015,September 2015,August 2015,July 2015,June 2015,May 2015,April 2015,March 2015,February 2015,January 2015,December 2014,November 2014,October 2014,September 2014,August 2014

Support 支持