HTML

这类拼图用于操纵HTML DOM元素。

HTML拼图可以用于动态创建UI,修改属性和样式,在网络上传输数据等。

puzzles-html.jpg

"add HTML element"

创建具有指定类型和标识符(对应于“id”属性)的HTML元素,并将其附加到文档正文。并将其样式属性“position”设置为“absolute”。

puzzles-html-add-html-elem.jpg

"get attribute"

从具有指定标识的HTML元素中获取属性。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用"in parent doc"复选框。

puzzles-html-get-attr.jpg

"set attribute"

为具有指定标识的HTML元素设置属性。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用"in parent doc"复选框。也适用于元素ID列表。

puzzles-html-set-attr.jpg

"set style"

为具有指定标识的HTML元素设置CSS属性。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用"in parent doc"复选框。也适用于元素ID列表。

puzzles-html-set-style.jpg

"set css rule"

为指定的CSS规则(在应用程序的.css文件中找到)设置CSS属性。如果样式表属于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件),则应启用"in parent doc"复选框。

puzzles-html-set-css-rule.jpg

"event"

为具有指定标识的HTML元素注册事件侦听器。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用"in parent doc"复选框。一旦发生事件,触发放置在“do”插槽中的拼图。也适用于元素ID列表。

puzzles-html-on-event.jpg

"get event property"

输出"event"拼图生成的事件的属性值。

puzzles-html-get-event-property.jpg

"window"

表示DOM窗口对象 - 浏览器选项卡或加载HTML文档的iframe。

puzzles-html-window.jpg

"document"

表示DOM文档对象 - HTML文档的根节点。

puzzles-html-document.jpg

"body"

表示DOM正文对象 - HTML文档的<body>元素。

puzzles-html-body.jpg

"draw line"

通过动态更新的线条将指定的3D对象与指定的HTML元素连接起来。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用“in parent doc”复选框。您还可以设置线条的宽度,颜色和偏移量。

puzzles-html-draw-line.jpg

"remove line"

从指定对象中删除以前创建的线条。

puzzles-html-remove-line.jpg

"bind element"

使指定的HTML元素跟随屏幕空间中指定3D对象的中心。如果HTML元素位于外部HTML文档(使用iframe嵌入Verge3D应用程序的.html文件)中,则应启用“in parent doc”复选框。一个更加可自定义的“add annotation”拼图的变体。

puzzles-html-bind-element.jpg

译注:bind element拼图与add annotation拼图一致,需要注意的是它的html元素的中心默认位于左上角。

"init fullscreen"

使指定的HTML元素变为全屏模式按钮 - 首次单击它会触发进入全屏模式,第二次单击会退出全屏模式。进入或退出全屏模式时会触发放置在“on enter do”和“on do do”插槽中的拼图。如果浏览器不支持全屏(例如iOS Safari),则会触发放置在“if unavailable do”中的拼图。

译注:在IOS Safari下全屏按钮无法显示。

puzzles-html-init-fullscreen.jpg

"get URL data"

检索加载应用程序的窗口的URL数据:

  • Entire URL - 文本, 如 "https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg"
  • Parameters - 字典, 如 {"image_url": "https://www.uploadserver.com/path/to/image.jpg"}
  • Host name - 文本, 如 "www.example.com"

puzzles-html-get-url-data.jpg

在应用程序的配置数据存储在其URL中的情况下,此拼图可能很有用。例如,您可以通过以下方式指定要用作纹理的图像:

https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg

puzzles-html-get-url-data-example.jpg

有关操作演示,请参阅Verge3D发行版中的Custom Image演示。

"set URL param"

如有必要,通过自动形成有效的查询字符串来指定或更新指定URL中的参数值,并返回更新的URL。

puzzles-html-set-url-param.jpg

在应用程序的配置数据存储在其URL中的情况下,此拼图可能很有用。例如,您可以通过以下方式指定要用作纹理的图像:

https://www.example.com/my_awesome_app.html?image_url=https://www.uploadserver.com/path/to/image.jpg

您可以上传纹理,检索其服务器端路径并将其保存到应用程序URL的image_url参数,如下所示:

puzzles-html-set-url-param-example.jpg

有关操作演示,请参阅Verge3D发行版中的Custom Image演示。

"take screenshot"

在当前视图截图,并输出为Data URI格式的数据。

puzzles-html-take-screenshot.jpg

"open file" and "opened file"

调用浏览器的本地对话窗口,以从用户设备中选择文件。用户选择文件后,以Data URI格式返回文件内容。

puzzles-html-open-file.jpg

Copyright © zjbcool.com 2019 all right reserved,powered by Gitbook最后更新: 2019-11-14 20:26:09

results matching ""

    No results matching ""