React Canvas：高效能渲染 React 組

標籤：

　　React Canvas 提供了使用 Canvas 渲染移動 Web App 介面的能力，替代傳統的 DOM 渲染，具有更接近 Native App 的使用體驗。React Canvas 提供了一組標準的 React 組件，由基於的渲染元素抽象而成。

 

 

 

GitHub      源碼下載

　

範例程式碼：

var React = require(‘react‘);var ReactCanvas = require(‘react-canvas‘);var Surface = ReactCanvas.Surface;var Image = ReactCanvas.Image;var Text = ReactCanvas.Text;var MyComponent = React.createClass({  render: function () {    var surfaceWidth = window.innerWidth;    var surfaceHeight = window.innerHeight;    var imageStyle = this.getImageStyle();    var textStyle = this.getTextStyle();    return (      <Surface width={surfaceWidth} height={surfaceHeight} left={0} top={0}>        <Image style={imageStyle} src=‘...‘ />        <Text style={textStyle}>          Here is some text below an image.        </Text>      </Surface>    );  },  getImageHeight: function () {    return Math.round(window.innerHeight / 2);  },  getImageStyle: function () {    return {      top: 0,      left: 0,      width: window.innerWidth,      height: this.getImageHeight()    };  },  getTextStyle: function () {    return {      top: this.getImageHeight() + 10,      left: 0,      width: window.innerWidth,      height: 20,      lineHeight: 20,      fontSize: 12    };  }});

　　

您可能感興趣的相關文章

• 網站開發中很有用的 jQuery 效果【附源碼】
• 分享35個讓人驚訝的 CSS3 動畫效果示範
• 十分驚豔的8個 HTML5 & JavaScript 特效
• Web 開發中很實用的10個效果【源碼下載】
• 12款經典的白富美型 jQuery 圖片輪播外掛程式

 

本文連結：React Canvas：高效能渲染 React 組件

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

React Canvas：高效能渲染 React 組