成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

將你的 Virtual dom 渲染成 Canvas

adie / 560人閱讀

摘要：項目概述一個基于的插件庫，按照函數(shù)的寫法，直接將生成的渲染到中。支持常規(guī)的滾動操作和一些基礎(chǔ)的元素事件綁定。受益于立即模式允許直接發(fā)送繪圖命令到。渲染是一種保留模式，保留模式是一種聲明性，用于維護繪制到其中的對象的層次結(jié)構(gòu)。

項目概述

一個基于Vue的virtual dom插件庫，按照Vue render 函數(shù)的寫法，直接將Vue生成的Vnode渲染到canvas中。支持常規(guī)的滾動操作和一些基礎(chǔ)的元素事件綁定。

github 地址： github

demo實例：demo

背景

從一個小的需求說起：某一天，產(chǎn)品提了一個這樣的需求，需要制作一個微信活動頁，活動頁可以分享包含用戶相關(guān)信息的圖片。這些信息是需要從接口取的，而且每個人都不一樣。第一次碰到這種需求的時候，基本上都會去手擼canvasAPI去做渲染功能，這種情況的步驟大致如下：

寫一大串 dom template 標簽

渲染template成dom標簽

開始捕捉dom元素，繪制canvas

canvas 渲染圖片

面臨的主要問題是復(fù)用性太差，其次是性能上也有問題，用戶看到的界面不一定和正式渲染出的界面一致，可能存在渲染差異。作為一個有追求的前端，當(dāng)然得想想看有沒有更好的法子。于是乎了解到了一個html2canvas 這樣一個庫。但是總是感覺還是要轉(zhuǎn)成dom再去繪制，而且感覺性能和穩(wěn)定性也不是很好。

我們知道vue通過vnode實現(xiàn)了對不同端的渲染工作，那有沒有可能通過vnode實現(xiàn)對canvas的渲染呢？也就是說，沒有vnode -> html -> canvas 而是直接vnode -> canvas。 同時利用vue的數(shù)據(jù)驅(qū)動，來達到繪制的數(shù)據(jù)驅(qū)動。想法有了，下面開始實施。

調(diào)研

這篇文章對此有詳細的介紹：60 FPS on the mobile web 這里簡單的概括一下：

canvas是一種立即模式的渲染方式，不會存儲額外的渲染信息。Canvas 受益于立即模式,允許直接發(fā)送繪圖命令到 GPU。但若用它來構(gòu)建用戶界面，需要進行一個更高層次的抽象。例如一些簡單的處理,比如當(dāng)繪制一個異步加載的資源到一個元素上時會出現(xiàn)問題,如在圖片上繪制文本。在HTML中，由于元素存在順序，以及 CSS 中存在 z-index，因此是很容易實現(xiàn)的。
dom渲染是一種保留模式，保留模式是一種聲明性API，用于維護繪制到其中的對象的層次結(jié)構(gòu)。保留模式 API 的優(yōu)點是，對于你的應(yīng)用程序，他們通常更容易構(gòu)建復(fù)雜的場景，例如 DOM。通常這都會帶來性能成本,需要額外的內(nèi)存來保存場景和更新場景，這可能會很慢。

看來canvas繪制頁面的研究，很久之前就已經(jīng)有人付出過研究了。而且性能還是很不錯的。那我們更要試試看，到底我們的想法能不能實現(xiàn)了！越來越期待....

開始

canvas 的渲染其實也是一種嘗試，既然前人以及做了充分的實踐，那么我們便站在巨人的肩膀上去基于vue來實現(xiàn)一個數(shù)據(jù)驅(qū)動的canvas渲染。說做就做！(我們這里只提供思路，不做具體實現(xiàn)細節(jié)的討論，因為實現(xiàn)起來有點復(fù)雜，如果有興趣可以參考我的項目實現(xiàn)，或者一起交流探討 )

處理vnode

熟悉Vue源碼的應(yīng)該都知道，Vue通過render函數(shù)，傳入createElement方法來構(gòu)造出一個vnode，通過發(fā)布--訂閱模式來實現(xiàn)對數(shù)據(jù)的監(jiān)聽，重新生成vnode。我們要做的就是在vnode這一層開始。所以，我們基于Vue源碼的方式，實現(xiàn)一個監(jiān)聽函數(shù)，并混入Vue實例中：

Vue.mixin({
    // ...
    created() {
      if (this.$options.renderCanvas) {
        // ...
        // 監(jiān)聽vnode中引用的變化，重新渲染
        this.$watch(this.updateCanvas, this.noop)
        // ...
      }
    },
    methods: {
      updateCanvas() {
        // 模擬Vue render 函數(shù)
        // 尋找實例中定義的 renderCanvas 方法，并傳入createElement方法
        let vnode = this.$options.renderCanvas.call(this._renderProxy, this.$createElement)
      }
})

這樣我們就可以愉快的在組件內(nèi)部使用：

renderCanvas (h) {
  return h(...)
}
canvas 元素處理

render 的vnode我們需要做額外的一些約束，也就是說我們需要怎么樣的渲染標簽，來渲染對應(yīng)的canvas元素（舉個

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96222.html

相關(guān)文章

  • 程序員練級攻略（2018）：前端基礎(chǔ)和底層原理

    摘要：下面我們從前端基礎(chǔ)和底層原理開始講起。對于和這三個對應(yīng)于矢量圖位圖和圖的渲染來說，給前端開發(fā)帶來了重武器，很多小游戲也因此蓬勃發(fā)展。這篇文章受眾之大，后來被人重新整理并發(fā)布為，其中還包括中文版。 showImg(https://segmentfault.com/img/bVbjM5r?w=1142&h=640); 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ 這...

    widuu 評論0 收藏0

  • 用最科學(xué)的方法展示最形象的圖表——前段數(shù)據(jù)可視化選型實踐

    摘要：提供的圖表的確可以滿足大部分的需求，遵循了數(shù)據(jù)可視化的一些經(jīng)典范式。數(shù)據(jù)可視化已然成為了新的風(fēng)向標。數(shù)據(jù)團隊的前端要做的就是用最科學(xué)的方法向用戶展示最形象的圖表，而這，也是我們前行的目標。 前言 也許很多人都會覺得奇怪，在這樣一個更多以后臺數(shù)據(jù)分析為主的公司，為什么需要一個專注于前端的團隊？今天這篇文章就來講述那些年我們錯過的前端數(shù)據(jù)可視化，以此來解答這個問題。 需求 那么，在我們的項...

    Eminjannn 評論0 收藏0

  • 【黑科技】React-canvas助力HTML5

    摘要：值得一提的是，微信瀏覽器的內(nèi)核，也即是瀏覽器內(nèi)核已經(jīng)內(nèi)置了很多游戲引擎比如白鷺游戲引擎與，供開發(fā)者開發(fā)游戲，所以長時間來看，微信瀏覽器的畫布性能將會越來越強大。showImg(https://user-gold-cdn.xitu.io/2019/5/17/16ac3f6acd651e01); 1、什么是流暢的用戶體驗？ 游戲的開發(fā)界有一個理論，就是當(dāng)動畫或者交互響應(yīng)達到60FPS(60幀每秒...

    MorePainMoreGain 評論0 收藏0

  • 【React進階系列】從零開始手把手教你實現(xiàn)一個Virtual DOM（三）

    摘要：函數(shù)依次做了這幾件事調(diào)用函數(shù)，對比新舊兩個，根據(jù)兩者的不同得到需要修改的補丁將補丁到真實上當(dāng)計數(shù)器小于等于的時候，將加，再繼續(xù)下一次當(dāng)計數(shù)器大于的時候，結(jié)束下面我們來實現(xiàn)函數(shù)和函數(shù)。 上集回顧 【React進階系列】從零開始手把手教你實現(xiàn)一個Virtual DOM（二） 上集我們實現(xiàn)了首次渲染從JSX=>Hyperscript=>VDOM=>DOM的過程，今天我們來看一下當(dāng)數(shù)據(jù)變動的時...

    qqlcbb 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<