国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

將你的 Virtual dom 渲染成 Canvas

adie / 554人閱讀

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

項(xiàng)目概述

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

github 地址： github

demo實(shí)例：demo

背景

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

寫一大串 dom template 標(biāo)簽

渲染template成dom標(biāo)簽

開(kāi)始捕捉dom元素，繪制canvas

canvas 渲染圖片

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

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

調(diào)研

這篇文章對(duì)此有詳細(xì)的介紹：60 FPS on the mobile web 這里簡(jiǎn)單的概括一下：

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

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

開(kāi)始

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

處理vnode

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

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

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

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

render 的vnode我們需要做額外的一些約束，也就是說(shuō)我們需要怎么樣的渲染標(biāo)簽，來(lái)渲染對(duì)應(yīng)的canvas元素（舉個(gè)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/96222.html

相關(guān)文章

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

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

    widuu 評(píng)論0 收藏0

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

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

    Eminjannn 評(píng)論0 收藏0

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

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

    MorePainMoreGain 評(píng)論0 收藏0

  • 【React進(jìn)階系列】從零開(kāi)始手把手教你實(shí)現(xiàn)一個(gè)Virtual DOM（三）

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

    qqlcbb 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<