我一直在寻找一种库，可以辅助渲染和功能UI小部件嵌入画布区域，例如组合框、复选框、单选按钮、文本区域、带有滚动条的列表框等，而不会通过将它们浮动在画布区域上方而叠加常规的HTML元素。Flex为Flash提供了所有这些功能，并且存在许多Actionscript库，可以在Flash“画布”内创建UI小部件组件（可以这么说）。 在某些情况下，这些UI小部件库已经为Flash社区服务得很好，在HTML5画布中的类似情况中也需要它们。
是否有人知道可以找到这些库的地方？
2个回答
32
目前我还没有看到任何相貌堂皇的UI控件库，但我保证它们迟早会被开发出来，因为人们会要求它们（不管是出于好的原因还是坏的原因）。
HTML5的Canvas规范本身强烈建议不要尝试这样做。正如规范所说：
作者应避免使用canvas元素实现文本编辑控件。这样做有许多缺点：
- 必须重新实现鼠标放置插入符。
- 必须重新实现插入符的键盘移动（对于多行文本输入可能跨越多行）。
- 必须实现文本字段的滚动（对于长行水平滚动，对于多行输入垂直滚动）。
- 必须重新实现复制和粘贴等本机功能。
- 必须重新实现拼写检查等本机功能。
- 必须重新实现拖放等本机功能。
- 必须重新实现页面宽度文本搜索等本机功能。
- 必须重新实现特定用户的本机功能，例如自定义文本服务。这几乎是不可能的，因为每个用户可能安装了不同的服务，并且存在无限可能的这种服务集。
- 必须重新实现双向文本编辑。
- 对于多行文本编辑，必须为所有相关语言实现换行功能。
- 必须重新实现文本选择。
- 必须重新实现双向文本选择的拖动。
- 必须重新实现基于平台的键盘快捷键。
- 必须重新实现基于平台的输入法编辑器（IME）。
- 必须重新实现撤消和重做功能。
- 必须重新实现跟随插入符或选择的放大镜等辅助功能。
在Canvas中实现这些东西是一场噩梦，特别是在今天，同一字体看起来不仅在浏览器之间有所不同，而且在Canvas渲染字体和浏览器渲染字体之间也有所不同。
- Simon Sarris
6
我在freenode的##javascript频道看到有人展示了一个画布脚本，模拟了Windows UI控件的外观。它有点起作用，但显然只是一个实验。就个人而言，我想不出为什么你需要在画布中这样做，因为你可以在HTML + CSS中轻松地完成这个任务... - Jani Hartikainen
2很多东西不需要重新实现。对于确实需要重新实现的事情...那就是询问第三方库背后的原因：已经有什么被重新实现了？ :) 这应该在Canvas中完成的一个原因是为了图形设计目的。另一个原因可能是开发人员想要一个粒子系统以某种方式与文本框交互。我可能可以想到几十个理由，但是在画布区域上叠加HTML元素似乎只是一种丑陋的hack，就像将两种不同的范例拼接在一起一样。 - OCDev
3许多开发者认为在Canvas中重新实现这些东西是一种丑陋的技巧。当然，你是正确的，不是所有东西都可以通过叠加HTML元素来完成（这通常看起来很丑陋）。但我们都希望避免在Flash时代发生的恶心页面控制（幸好网页几乎完全放弃了这种控制！）我确实希望我有一个这样的库可以向你推荐，但唯一接近的团队是Mozilla Bespin/Skywriter团队。他们最终完全放弃了Canvas并与使用divs的Ace合并。 - Simon Sarris
感谢您的有益回答！非常感谢。 - OCDev
一个需要列表的游戏，我应该用一些大的HTML div覆盖画布的某个位置，还是最好使用第三方库在画布中创建列表？这对于所有将在画布中创建的游戏都很有用。 - Totty.js
7考虑到现有的Canvas UI工具包，使用HTML/CSS并不会使设计跨平台、跨浏览器UI变得更加容易，因为在HTML/CSS中设计任何类型的跨平台、跨浏览器UI都是一场噩梦。这也是Canvas UI工具包存在的原因之一。 - Alan B
17
- user1075975
2
4现在它被授权为LGPL。 - draganstankovic
现在它已经根据Apache许可证获得了许可！ - CrushedPixel
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接