[{"data":1,"prerenderedAt":354},["ShallowReactive",2],{"quirekit-doc:\u002Fbuild\u002Fview":3},{"id":4,"title":5,"body":6,"description":344,"extension":345,"keywords":346,"locale":347,"meta":348,"navigation":94,"order":91,"path":349,"section":350,"seo":351,"stem":352,"__hash__":353},"docs\u002Fbuild\u002Fview.zh-CN.md","让正文显示为 Canvas\u002FSVG",{"type":7,"value":8,"toc":338},"minimark",[9,13,27,32,51,190,204,207,211,215,222,257,267,271,282,293,297,304,334],[10,11,12],"p",{},"View 是文档的显示与输入层。第一章使用浏览器原生 DOM 视图；这一章换成 Canvas。Core 中的节点、命令和撤销历史仍采用同一套机制。",[10,14,15,16,20,21,26],{},"开始前，取得与 Core 同批次的 ",[17,18,19],"code",{},"@quirekit\u002Fview","。该包有独立的许可要求，见",[22,23,25],"a",{"href":24},"\u002Fsupport","支持与许可","。",[28,29,31],"h2",{"id":30},"_1-安装对应视图","1. 安装对应视图",[10,33,34,35,38,39,42,43,46,47,50],{},"将原来的 ",[17,36,37],{},"DomViewExtension"," 替换为 Canvas 适配器，并把 ",[17,40,41],{},"mode"," 改为 ",[17,44,45],{},"canvas","。下面是创建配置的关键部分，放在上一章组件的 ",[17,48,49],{},"onMounted"," 中：",[52,53,59],"pre",{"className":54,"code":55,"filename":56,"language":57,"meta":58,"style":58},"language-ts shiki shiki-themes github-light github-light github-dark","import { canvasViewExtension } from '@quirekit\u002Fview'\nimport '@quirekit\u002Fview\u002Fstyles.css'\n\neditor = new Editor({\n  element: element.value,\n  mode: 'canvas',\n  extensions: [\n    StarterKit,\n    canvasViewExtension({ runtime: { width: 720, height: 900 } }),\n  ],\n  content: '\u003Cp>由 Canvas 显示的正文。\u003C\u002Fp>',\n})\n","创建 Canvas 视图","ts","",[17,60,61,81,89,96,115,121,133,139,145,167,173,184],{"__ignoreMap":58},[62,63,66,70,74,77],"span",{"class":64,"line":65},"line",1,[62,67,69],{"class":68},"sDD9d","import",[62,71,73],{"class":72},"sVPnS"," { canvasViewExtension } ",[62,75,76],{"class":68},"from",[62,78,80],{"class":79},"s-HEn"," '@quirekit\u002Fview'\n",[62,82,84,86],{"class":64,"line":83},2,[62,85,69],{"class":68},[62,87,88],{"class":79}," '@quirekit\u002Fview\u002Fstyles.css'\n",[62,90,92],{"class":64,"line":91},3,[62,93,95],{"emptyLinePlaceholder":94},true,"\n",[62,97,99,102,105,108,112],{"class":64,"line":98},4,[62,100,101],{"class":72},"editor ",[62,103,104],{"class":68},"=",[62,106,107],{"class":68}," new",[62,109,111],{"class":110},"sgQzM"," Editor",[62,113,114],{"class":72},"({\n",[62,116,118],{"class":64,"line":117},5,[62,119,120],{"class":72},"  element: element.value,\n",[62,122,124,127,130],{"class":64,"line":123},6,[62,125,126],{"class":72},"  mode: ",[62,128,129],{"class":79},"'canvas'",[62,131,132],{"class":72},",\n",[62,134,136],{"class":64,"line":135},7,[62,137,138],{"class":72},"  extensions: [\n",[62,140,142],{"class":64,"line":141},8,[62,143,144],{"class":72},"    StarterKit,\n",[62,146,148,151,154,158,161,164],{"class":64,"line":147},9,[62,149,150],{"class":110},"    canvasViewExtension",[62,152,153],{"class":72},"({ runtime: { width: ",[62,155,157],{"class":156},"sUNQB","720",[62,159,160],{"class":72},", height: ",[62,162,163],{"class":156},"900",[62,165,166],{"class":72}," } }),\n",[62,168,170],{"class":64,"line":169},10,[62,171,172],{"class":72},"  ],\n",[62,174,176,179,182],{"class":64,"line":175},11,[62,177,178],{"class":72},"  content: ",[62,180,181],{"class":79},"'\u003Cp>由 Canvas 显示的正文。\u003C\u002Fp>'",[62,183,132],{"class":72},[62,185,187],{"class":64,"line":186},12,[62,188,189],{"class":72},"})\n",[10,191,192,195,196,199,200,203],{},[17,193,194],{},"runtime"," 是视图的运行配置，",[17,197,198],{},"width","、",[17,201,202],{},"height"," 使用 CSS 像素。结构样式负责正文层、输入层和选区层的定位，因此需要和视图一起导入。",[10,205,206],{},"下面的单文件示例根据容器宽度设置显示尺寸，可以直接点击输入。源码包含完整导入和 Vue 生命周期。",[208,209],"docs-demo",{"name":210},"tutorial\u002Fcanvas",[28,212,214],{"id":213},"_2-切换-svg-而保留正文","2. 切换 SVG 而保留正文",[10,216,217,218,221],{},"如果产品允许用户切换后端，创建时同时安装 ",[17,219,220],{},"svgViewExtension()","，再调用：",[52,223,226],{"className":54,"code":224,"filename":225,"language":57,"meta":58,"style":58},"editor.changeMode('svg')\neditor.changeMode('canvas')\n","切换显示方式",[17,227,228,245],{"__ignoreMap":58},[62,229,230,233,236,239,242],{"class":64,"line":65},[62,231,232],{"class":72},"editor.",[62,234,235],{"class":110},"changeMode",[62,237,238],{"class":72},"(",[62,240,241],{"class":79},"'svg'",[62,243,244],{"class":72},")\n",[62,246,247,249,251,253,255],{"class":64,"line":83},[62,248,232],{"class":72},[62,250,235],{"class":110},[62,252,238],{"class":72},[62,254,129],{"class":79},[62,256,244],{"class":72},[10,258,259,262,263,266],{},[17,260,261],{},"changeMode()"," 更换主视图，不会重新创建正文。不要再次调用 ",[17,264,265],{},"mount()"," 代替切换：后者用于增加另一个视图。组件退出时仍然只需销毁它拥有的 Editor。",[28,268,270],{"id":269},"_3-让工作区负责滚动和缩放","3. 让工作区负责滚动和缩放",[10,272,273,274,277,278,281],{},"完整产品通常在自己的容器里滚动。把该容器同时传给 ",[17,275,276],{},"scrollViewport","，并设置 ",[17,279,280],{},"scrollSource: 'viewport'","，View 就能使用正确的滚动位置处理输入和选区。",[10,283,284,285,288,289,292],{},"工作区可以根据可用宽度缩放显示。示例在 ",[17,286,287],{},"workspace.vue"," 中计算展示比例，在 ",[17,290,291],{},"runtime.ts"," 中把页数和内容尺寸交给界面。正文里的纸张尺寸保持原值，缩小显示不应改写文档数据。",[28,294,296],{"id":295},"_4-分页来自文档模型","4. 分页来自文档模型",[10,298,299,300,303],{},"Canvas 并不等于 Word 分页。普通文章可以连续显示；Word 模型通过自己的排版规则产生页面。",[17,301,302],{},"pageStack: true"," 将这些页面显示为独立的页面表面，不负责创造分节或页眉页脚规则。",[10,305,306,307,311,312,316,317,199,320,199,322,324,325,329,330,26],{},"需要分页工作区时，参考 ",[22,308,310],{"href":309},"\u002Fbuild\u002Fmodel","Word 模型","与",[22,313,315],{"href":314},"\u002Fbuild\u002Freference","完整工作区","中的 ",[17,318,319],{},"assembly\u002Fword.ts",[17,321,291],{},[17,323,287],{},"。接下来",[22,326,328],{"href":327},"\u002Fbuild\u002Fcommands","连接工具栏","，参数细节见 ",[22,331,333],{"href":332},"\u002Fapi\u002Fview","View API",[335,336,337],"style",{},"html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":58,"searchDepth":83,"depth":83,"links":339},[340,341,342,343],{"id":30,"depth":83,"text":31},{"id":213,"depth":83,"text":214},{"id":269,"depth":83,"text":270},{"id":295,"depth":83,"text":296},"从 DOM 视图切换到 Canvas，理解滚动、缩放和分页由谁处理。","md",null,"zh-CN",{},"\u002Fbuild\u002Fview","构建产品",{"title":5,"description":344},"build\u002Fview.zh-CN","EFpLev1bKgNEV-XzF8cagwgBu5gLjwG_TyS0fhNM6BY",1793045207996]