跳到正文
QuireKit
Core 开发文档
Alpha · API 持续演进

视图与渲染

理解内容和显示的关系,选择 DOM、HTML、Canvas 或 SVG 四种视图。

同一份文档可以由不同视图显示。Core 管理内容和命令,View 把内容显示出来,并把输入、点击和拖选转回文档操作。

从哪一种开始

视图适合的起点接入方式
原生 DOM先接入可编辑文字,复用浏览器输入和 DOM NodeViewDomViewExtension,mode: 'dom'
Canvas自绘文字、选区和分页工作区canvasViewExtension(),mode: 'canvas'
SVG根据相同排版结果显示矢量内容svgViewExtension(),mode: 'svg'
retained HTML使用 QuireKit 管理输入和选区的连续流显示htmlViewExtension(),mode: 'html'

原生 DOM 来自 @quirekit/dom-view,retained HTML 来自 @quirekit/view-html,Canvas 与 SVG 来自 @quirekit/view。两种 HTML 形式有不同的输入和几何处理,不应混用它们的配置。

第一次接入可从快速开始使用 DOM;要自己做 Canvas/SVG 工作区,继续挂载教程。想直接使用带标尺和功能区的产品,可以接入 Classic。

切换显示不会转换文档模型

创建时注册所需视图,再通过 changeMode() 切换主视图。内容、选区和历史仍由同一个 Core 实例管理。普通文章不会因为切换到 Canvas 就成为 Word 文档,Word 的结构与排版规则仍需安装对应扩展。

自定义内容需要对应的显示实现

段落和常见格式由现有能力支持。自定义 Node 除了结构,还要提供所选视图需要的呈现能力;renderHTML() 并不能自动让 Canvas 知道怎样排列子内容。

提示组教程解释了这一步。各视图包的许可独立于 Core,见支持与许可。

QuireKitQuireKit · Core、插件与 Classic 文档