创建 DOM 图像组件
上次更新日期：
2023年5月24日
阅读本文可对一个 HTML5 自定义组件示例有所了解。
本文说明如何创建自定义组件。 第一个示例说明图像组件（同时随 Animate 提供）的构成、框架的内容以及开发过程中涉及的步骤。 第二个示例说明如何包装任一现有的 UI 组件（如 jQueryUI）并将其导入 Animate 中。
创建一个名为“My Components”的类别。
a. 在首次运行时在<HTML5组件>文件夹下创建一个名为mycomponents的文件夹
b. 下载附加的myimage.zip文件，并将内容解压缩到
mycomponents文件夹。
单击此处以下载myImage.Zip文件。
c. 重新启动Animate。
现在，您应当可以在“组件”文件夹中看到一个名为“My Components”的新类别，在该类别下看到一个名为“My Image”的新组件。 您可以将其拖放到舞台上，设置图像源属性，然后发布影片，便可以看到这个自定义组件生效了。
组件元数据 - components.js
请注意，该类别设置为 CATEGORY_ MY_ COMPONENTS。 各属性的名称使用的键也类似。 这些键用于类别名称的本地化字符串。 如果打开 locale 文件夹中的 strings.json，将看到以下条目。
编辑此文件时最常见的错误是数组最后一个元素的尾部加上了不必要的逗号。
icon 字段的值设为 Sp_Image_Sm。 如果转至 assets 文件夹，您会看到下面这两个 png 文件的前缀都是 Sp_Image_Sm。
它们分别是深色 UI 图标和浅色 UI 图标。
(function($) {
//使用className： my.Image注册组件，
//以及具有以下覆盖的原型
// getCreateOptions
// getCreateString
// getProperties
// getAttributes
$.anwidget("my.Image"， {
options： {
'visible'： true，
'position'： 'absolute'
},
_props： ["left"， "top"， "width"， "height"， "position"， "transform-origin"， "transform"]，
_attrs： ["id"， "src"， "alt"， "class"， "border"]，
//返回带有前缀图像的唯一ID
// _widgetID是在anwidget中声明的全局对象
//仅当用户尚未在Animate中为组件设置任何实例ID时，才使用此ID
//否则，将使用用户配置的名称
getCreateOptions： function() {
return $.extend(this.options， { 'id'： "image" + _widgetID++ })；
}，
//返回用于创建DOM元素的字符串
//对于图像，我们只需创建<img>标签
getCreateString： function() {
返回“<img>”；
}，
//可配置属性集
getProperties： function() {
return this._props；
},
//可配置属性集
getAttributes： function() {
return this._attrs；
}
});
})(jQuery)；
components.json 中 source 字段的值设为 src/myimage.js。
参照代码中的注释会更容易理解。
您可以随意查看随 Animate 提供的其他组件的源代码。 大多数情况下，您可以从其中一个着手，然后根据自己的需要进行配置。
包装 jQuery-UI 组件
这部分说明如何包装 jQuery-UI 小部件并在 Animate 中使用它。 包装任何其他 UI 框架中的任何其他现有组件时，均可使用同样的概念。
我们来了解一下 Animate 附带的打包 DatePicker 组件，它是一个 jQuery UI 小部件。 下载并解压缩以下存档的内容，并将其用于参考。
单击此处以下载datepicker.zip文件。
名为 jquery-ui-1.12.0 的文件夹是 jQuery UI 框架的源，其中包含原始 DatePicker 小部件及其图像和 css 等资源。像任何其他 HTML5 组件一样，可以在 Animate 中包装并使用这些组件。 这仅对本地预览是必需的，在发布设置中使用“托管库”时，可以选择是否使用 cdn 下载相关的源。
有两个默认的相关项，jQuery 和 anwidget.js。 由于 anwidget.js 不在 CDN 中，因此对同一资源没有任何 CDN 条目。
之后的条目用于从 jquery UI 加载 datepicker 小部件所需的其他资源。 同样，如果要包装任何其他库中的任何小部件，可以为同一资源指定一组相关项。 这些相关项将在组件初始化之前下载。
在 properties 部分中，我们只提供了一个名为 label 的属性，它绑定到 datepicker 组件的 label 属性。 同样，我们还可以提供其他属性以便用户能够在 Animate 创作环境中进行配置。 在运行时，每个这样的属性将作为实例的 options 数组中的一个键/值对来提供。 我们可以提取出配置好的值然后在运行时应用它。
与本示例不同的部分
getCreateString:
来自 jQuery-UI 的 datepicker 小部件接受这样一个输入文本元素，然后在运行时将其转换为一个 datepicker 元素。 因此，我们会相应地初始化 DOM。
attach:
对于这个小部件需要覆盖此函数。 每当有元素附加到 DOM 时，便会调用此 API。 但是，由于下层运行时（本例为 createjs）的工作方式，此 API 在某个帧范围内可能会被多次调用。
我们记住基础元素的附加状态，然后调用基类的附加API(使用this._superApply(arguments))。 如果这是第一次将元素附加到父 DOM，我们将使用下层的 jQuery-UI 小部件的调用，将组件的 DOM 转换为一个 datepicker。 请参阅 - https://jqueryui.com/datepicker/
大多数 javascript 小部件的工作方式都类似。 您可以使用同一方法来包装选择的任一组件，然后再以同一方式将其引入 Animate 中。
Update：我们会覆盖 update，将 css 属性 (properties) 应用于容器 div，将特性 (attributes) 应用于真正的 DOM 元素。
在覆盖 attach、detach 或 update 这样的 API 时，需评估基类的默认实现并在适当时候调用基础实现，否则组件初始化可能会失败。
