0

是否有任何链接指向有关 Google Docs 布局引擎的更深入的详细信息？如果它使用 webgl，或 canvas 元素 2d 上下文，或任何东西。我知道谷歌是从头开始计算字符宽度的。

我正在阅读有关 Bespin 的信息，它说它存在一些性能问题，所以我想知道谷歌做了什么让它变得更快。我只是找不到有关他们如何做的任何细节。

只有当它是开源的...

顺便说一句，我尝试了 benjamn / kix-standalone 但来自 github 的源代码根本不可读：

function $a(a) { 
    return Wa(a) == Ta 
} 
function ab(a) { 
    var b = Wa(a); 
    return b == Ta || b == Ra && typeof a.length == Sa <br/>
}
4

1 回答 1

2

Google Docs 在隐藏的输入元素和/或通过键盘和鼠标事件捕获您的所有输入，然后通过完全用 Javascript 实现的自定义表面和布局引擎将文档的内容布局到您的屏幕上。

显示器上从文本到光标本身的所有内容都由 DOM 元素组成。例如，光标不是由浏览器直接呈现，而是由位于正确位置的 1 像素宽的 div 呈现。您可以使用 Chrome 的 Inspect 功能查看由 Google Docs 创建的 DOM，以查看该引擎的运行结果。有关更多详细信息，另请参阅 Google 文档产品经理的这篇博文：http: //googledrive.blogspot.ca/2010/05/whats-different-about-new-google-docs.html。正如您在问题中提到的，这种类型的光标定位所需的字符宽度是动态计算的。

为了更深入地了解，看看一个类似（虽然显然更简单）项目的实现可能会有所帮助：Ritzy是一个新的开源富文本编辑器，它包含一个自定义的 javascript 界面和布局引擎，就像 Google Docs 一样。它的 DOM 操作使用Facebook React。据我所知，这是该技术的第一个开源实现。它包含类似 Google 文档的字符宽度和光标定位计算（请参阅TextFontMetrics.js），并且可以作为有用的学习工具。

免责声明：我是上述项目的作者。

于 2015-08-19T19:03:15.593 回答