文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

将你的 Virtual dom 渲染成 Canvas

2024-12-10 15:12

关注

demo 地址:https://muwoo.github.io/vnode2canvas/

背景
从一个小的需求说起:某一天,产品提了一个这样的需求,需要制作一个微信活动页,活动页可以分享包含用户相关信息的图片。这些信息是需要从接口取的,而且每个人都不一样。第一次碰到这种需求的时候,基本上都会去手撸 canvasAPI 去做渲染功能,这种情况的步骤大致如下:

  1. 写一大串 dom template 标签
  2. 渲染 template 成 dom 标签
  3. 开始捕捉 dom 元素,绘制 canvas
  4. canvas 渲染图片

面临的主要问题是复用性太差,其次是性能上也有问题,用户看到的界面不一定和正式渲染出的界面一致,可能存在渲染差异。作为一个有追求的前端,当然得想想看有没有更好的法子。于是乎了解到了一个 html2canvas 这样一个库。但是总是感觉还是要转成 dom 再去绘制,而且感觉性能和稳定性也不是很好。

我们知道 vue 通过 vnode 实现了对不同端的渲染工作,那有没有可能通过 vnode 实现对 canvas 的渲染呢?也就是说,没有 vnode -> html -> canvas 而是直接vnode -> canvas。同时利用 vue 的数据驱动,来达到绘制的数据驱动。想法有了,下面开始实施。

调研
这篇文章对此有详细的介绍:60 FPS on the mobile web 这里简单的概括一下:

canvas 是一种立即模式的渲染方式,不会存储额外的渲染信息。Canvas 受益于立即模式,允许直接发送绘图命令到 GPU。但若用它来构建用户界面,需要进行一个更高层次的抽象。例如一些简单的处理,比如当绘制一个异步加载的资源到一个元素上时会出现问题,如在图片上绘制文本。

在 HTML 中,由于元素存在顺序,以及 CSS 中存在 z-index,因此是很容易实现的。dom 渲染是一种保留模式,保留模式是一种声明性 API,用于维护绘制到其中的对象的层次结构。保留模式 API 的优点是,对于你的应用程序,他们通常更容易构建复杂的场景,例如 DOM。通常这都会带来性能成本,需要额外的内存来保存场景和更新场景,这可能会很慢。

看来 canvas 绘制页面的研究,很久之前就已经有人付出过研究了。而且性能还是很不错的。那我们更要试试看,到底我们的想法能不能实现了!越来越期待....

开始
canvas 的渲染其实也是一种尝试,既然前人以及做了充分的实践,那么我们便站在巨人的肩膀上去基于 vue 来实现一个数据驱动的canvas渲染。说做就做!(我们这里只提供思路,不做具体实现细节的讨论,因为实现起来有点复杂,如果有兴趣可以参考我的项目实现,或者一起交流探讨 )

处理 vnode
熟悉 Vue 源码的应该都知道,Vue 通过 render 函数,传入 createElement 方法来构造出一个 vnode,通过发布--订阅模式来实现对数据的监听,重新生成 vnode。vnode 最后被转成各平台所需的视图。而我们要做的就是在 vnode 这一层开始。所以,我们基于 Vue 源码的方式,实现一个监听函数,并混入 Vue 实例中:

  1. Vue.mixin({ 
  2.     // ... 
  3.     created() {      if (this.$options.renderCanvas) { 
  4.         // ... 
  5.         // 监听vnode中引用的变化,重新渲染 
  6.         this.$watch(this.updateCanvas, this.noop) 
  7.         // ... 
  8.       }    },    methods: {      updateCanvas() {        // 模拟Vue render 函数 
  9.         // 寻找实例中定义的 renderCanvas 方法,并传入createElement方法 
  10.         let vnode = this.$options.renderCanvas.call(this._renderProxy, this.$createElement) 
  11.       }}) 

这样我们就可以愉快的在组件内部使用:

  1. renderCanvas (h) { 
  2.   return h(...) 

canvas 元素处理
render 的 vnode 我们需要做额外的一些约束,也就是说我们需要怎么样的渲染标签,来渲染对应的 canvas 元素(举个 ):

  1. view/scrollView/scrollItem --> fillRect
  2. text --> fillText
  3. image --> drawImage

其中这些元素类分别都继承于一个 Super 类,并且由于它们各有不同的展示方式,因此它们分别实现自己的 draw 方法,做定制化的展示。

绘制对象的布局机制实现
绘制 canvas 布局最基础的写法是为 canvas 元素传入一系列坐标点和相关的基础宽高,这样写到实际项目中可能是这样的:

  1. renderCanvas(h) { 
  2.   return h('view', { 
  3.      style: { 
  4.        left: 10, 
  5.        top: 10, 
  6.        width: 100, 
  7.        height: 100 
  8.      }  })} 

这样写确实有点不方便维护,目前有好几种解决方案,一种是使用 css-layout去做管理。css-layout 支持的转换属性如下:

这样也只是做了一层转换,帮我们更好的用 css 思维去写 canvas,但是如果我们很不爽 css in js 的写法,其实我们还可以写一个webpack loader 来加载外部 css:

  1. const css = require('css'
  2. module.exports = function (source, other) { 
  3.   let cssAST = css.parse(source) 
  4.   let parseCss = new ParseCss(cssAST) 
  5.   parseCss.parse()  this.cacheable(); 
  6.   this.callback(null, parseCss.declareStyle(), other); 
  7. };class ParseCss { 
  8.   constructor(cssAST) { 
  9.     this.rules = cssAST.stylesheet.rules 
  10.     this.targetStyle = {} 
  11.   }  parse () {    this.rules.forEach((rule) => { 
  12.       let selector = rule.selectors[0] 
  13.       this.targetStyle[selector] = {} 
  14.       rule.declarations.forEach((dec) => { 
  15.         this.targetStyle[selector][dec.property] = this.formatValue(dec.value) 
  16.       })    })  }  formatValue (string) { 
  17.     string = string.replace(/"/g, '').replace(/'/g, '') 
  18.     return string.indexOf('px') !== -1 ? parseInt(string) : string 
  19.   }  declareStyle (property) {    return `window.${property || 'vStyle'} = ${JSON.stringify(this.targetStyle)}` 
  20.   }} 

简单的来说:主要也就是将 css 文件转成 AST 语法树,之后再对语法树做转换,转成 canvas 需要的定义形式,并以变量的形式注入到组件中。

实现列表滚动
如果我们的元素很多,需要滚动时,我们必须解决 canvas 内部元素滚动的问题。这里我选择了使用Zynga Scroller 来模拟用户滚动方法,通过他返回的滚动坐标点,来对 canvas 进行重绘。有兴趣的可以参考这里我的实现:

https://github.com/muwoo/vnode2canvas/blob/master/src/core/shape/scrollView.js

事件模拟
对于 click,touch 等 dom 事件的模拟,我们采用的方案是根据点击区域进行检测,并找出最底层的元素,递归寻找父元素并触发对应事件处理程序,从而模拟事件冒泡。详细的实现可以参考这里:

https://github.com/muwoo/vnode2canvas/blob/master/src/core/event.js

最后
canvas 绘制页面也是一种创新的尝试,希望这里的研究对你有启发,也欢迎你的 PR。这里也做了很多性能优化,限于篇幅不在赘述了,有兴趣也可以一起探讨。

最后:它并不意味着完全取代基于DOM的渲染,这仍然需要文本输入,复制/粘贴,可访问性和SEO。出于这些原因,我们可以使用canvas和基于DOM的渲染的组合。

 

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯