【问题标题】:HTML5 Canvas Library for UI Widgets [closed]用于 UI 小部件的 HTML5 画布库 [关闭]
【发布时间】:2024-04-24 20:45:01
【问题描述】:

我一直在寻找一个库,它可以帮助嵌入在画布区域中的 UI 小部件的呈现和功能,例如组合框、复选框、单选按钮、文本区域、带有滚动条的列表框等,而无需通过将它们浮动在画布区域的顶部来叠加普通的 HTML 元素。 Flex 为 Flash 提供了所有这些功能,并且有许多 Actionscript 库可以在 Flash“画布”(可以这么说)中创建 UI 小部件组件。这些 UI 小部件库在某些情况下为 Flash 社区提供了良好的服务,在 HTML5 画布中的类似情况下也需要这样做。

有人知道在哪里可以找到这些库吗?

【问题讨论】:

    标签: html canvas widget html5-canvas


    【解决方案1】:

    我还没有看到任何功能下降的 ui 小部件库,但我保证它们总有一天会被制作出来,如果只是因为人们会需要它们(出于好的原因或坏的原因)。

    HTML5 Canvas 规范本身强烈建议不要尝试这样做。正如规范所说:

    作者应避免使用画布元素实现文本编辑控件。这样做有很多缺点:

    • 必须重新实现插入符号的鼠标放置。
    • 必须重新实现插入符号的键盘移动(可能跨行,用于多行文本输入)。
    • 必须实现文本字段的滚动(水平滚动用于长行,垂直滚动用于多行输入)。
    • 必须重新实现复制粘贴等原生功能。
    • 必须重新实现拼写检查等原生功能。
    • 必须重新实现拖放等原生功能。
    • 必须重新实现页面范围的文本搜索等原生功能。
    • 必须重新实现特定于用户的本机功能,例如自定义文本服务。这几乎是不可能的,因为每个用户可能安装了不同的服务,并且可能存在无限多的此类服务。
    • 必须重新实现双向文本编辑。
    • 对于多行文本编辑,必须为所有相关语言实现换行。
    • 必须重新实现文本选择。
    • 必须重新实现双向文本选择的拖动。
    • 必须重新实现平台原生键盘快捷键。
    • 必须重新实现平台原生输入法编辑器 (IME)。
    • 撤消和重做功能必须重新实现。
    • 必须重新实现辅助功能,例如插入符号或选择后的放大。

    在 Canvas 中实现这些东西是一场噩梦,尤其是在今天,相同的字体不仅在每个浏览器中看起来不同,而且在 Canvas 渲染字体和浏览器渲染字体之间看起来也不同。

    【讨论】:

    • 我在 freenode 的 ##javascript 上看到有人展示了一个模拟 Windows UI 控件外观的画布脚本。它有点工作,但它显然只是一个实验。就我个人而言,我想不出你需要在画布中这样做的任何理由,因为你可以在 HTML + CSS 中更轻松地做到这一点......
    • 其中很多东西不需要重新实现。而且,对于确实需要重新实现的东西......嗯,这正是询问 3rd 方库的重点:已经重新实现了什么? :) 应该在 Canvas 中完成此操作的一个原因是出于图形设计目的。另一个原因,也许开发人员希望粒子系统以某种方式与文本框交互。我可能会想到几十个原因,但在画布区域顶部叠加 HTML 元素对我来说似乎是一种丑陋的 hack,就像将两种不同的范例拼接在一起一样。
    • 许多开发人员认为在 Canvas 中重新实现这些东西是丑陋的 hack。当然,您是对的,并不是所有的事情都可以通过叠加 HTML 元素来完成(这通常看起来很丑)。但是我们都希望避免在 Flash 时代出现的那种令人作呕的页面控件(网页几乎完全放弃了 - 谢天谢地!) Mozilla Bespin/Skywriter 团队也很接近。他们实际上最终完全放弃了 Canvas 并与使用 div 的 Ace 合并。
    • 很好的回应,感谢您的帮助!
    • 给定一个预先存在的 Canvas UI 工具包,在 HTML/CSS 中它不会容易上亿倍,因为 HTML/CSS 是尝试和设计任何类型的跨平台的噩梦,跨浏览器用户界面。这也是 Canvas UI 工具包首先存在的原因之一。
    【解决方案2】:

    Zebkit(以前的 Zebra)相当完整,尽管Textarea 不是很丰富。

    它使用Apache 2.0 许可证获得许可。

    它的 github 是here

    【讨论】:

    • 它现在被授​​权为 LGPL
    • 现在它已获得 Apache 许可!