資訊專欄INFORMATION COLUMN
摘要：項目概述一個基于的插件庫，按照函數的寫法，直接將生成的渲染到中。支持常規的滾動操作和一些基礎的元素事件綁定。受益于立即模式允許直接發送繪圖命令到。渲染是一種保留模式，保留模式是一種聲明性，用于維護繪制到其中的對象的層次結構。
項目概述
一個基于Vue的virtual dom插件庫，按照Vue render 函數的寫法，直接將Vue生成的Vnode渲染到canvas中。支持常規的滾動操作和一些基礎的元素事件綁定。
github 地址： github
demo實例：demo
背景從一個小的需求說起：某一天，產品提了一個這樣的需求，需要制作一個微信活動頁，活動頁可以分享包含用戶相關信息的圖片。這些信息是需要從接口取的，而且每個人都不一樣。第一次碰到這種需求的時候，基本上都會去手擼canvasAPI去做渲染功能，這種情況的步驟大致如下：
寫一大串 dom template 標簽
渲染template成dom標簽
開始捕捉dom元素，繪制canvas
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這一層開始。所以，我們基于Vue源碼的方式，實現一個監聽函數，并混入Vue實例中：
Vue.mixin({
// ...
created() {
if (this.$options.renderCanvas) {
// ...
// 監聽vnode中引用的變化，重新渲染
this.$watch(this.updateCanvas, this.noop)
// ...
}
},
methods: {
updateCanvas() {
// 模擬Vue render 函數
// 尋找實例中定義的 renderCanvas 方法，并傳入createElement方法
let vnode = this.$options.renderCanvas.call(this._renderProxy, this.$createElement)
}
})
這樣我們就可以愉快的在組件內部使用：
renderCanvas (h) {
return h(...)
}
canvas 元素處理
render 的vnode我們需要做額外的一些約束，也就是說我們需要怎么樣的渲染標簽，來渲染對應的canvas元素（舉個
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96222.html
摘要：下面我們從前端基礎和底層原理開始講起。對于和這三個對應于矢量圖位圖和圖的渲染來說，給前端開發帶來了重武器，很多小游戲也因此蓬勃發展。這篇文章受眾之大，后來被人重新整理并發布為，其中還包括中文版。 showImg(https://segmentfault.com/img/bVbjM5r?w=1142&h=640); 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ 這...
摘要：提供的圖表的確可以滿足大部分的需求，遵循了數據可視化的一些經典范式。數據可視化已然成為了新的風向標。數據團隊的前端要做的就是用最科學的方法向用戶展示最形象的圖表，而這，也是我們前行的目標。 前言 也許很多人都會覺得奇怪，在這樣一個更多以后臺數據分析為主的公司，為什么需要一個專注于前端的團隊？今天這篇文章就來講述那些年我們錯過的前端數據可視化，以此來解答這個問題。 需求 那么，在我們的項...
摘要：值得一提的是，微信瀏覽器的內核，也即是瀏覽器內核已經內置了很多游戲引擎比如白鷺游戲引擎與，供開發者開發游戲，所以長時間來看，微信瀏覽器的畫布性能將會越來越強大。showImg(https://user-gold-cdn.xitu.io/2019/5/17/16ac3f6acd651e01); 1、什么是流暢的用戶體驗？ 游戲的開發界有一個理論，就是當動畫或者交互響應達到60FPS(60幀每秒...
摘要：函數依次做了這幾件事調用函數，對比新舊兩個，根據兩者的不同得到需要修改的補丁將補丁到真實上當計數器小于等于的時候，將加，再繼續下一次當計數器大于的時候，結束下面我們來實現函數和函數。 上集回顧 【React進階系列】從零開始手把手教你實現一個Virtual DOM（二） 上集我們實現了首次渲染從JSX=>Hyperscript=>VDOM=>DOM的過程，今天我們來看一下當數據變動的時...
閱讀 3553·2023-04-26 00:16
閱讀 1368·2021-11-25 09:43
閱讀 3837·2021-11-23 09:51
閱讀 2975·2021-09-24 09:55
閱讀 726·2021-09-22 15:45
閱讀 1403·2021-07-30 15:30
閱讀 3074·2019-08-30 14:04
閱讀 2255·2019-08-26 13:46
