react-canvas 中文文档

react-canvas

目的

构建面向移动设备的界面有悠久的历史，我们发现与本地应用程序相比，移动Web应用程序感觉缓慢的原因是DOM。 CSS动画和过渡是在Web上实现平滑动画的最快途径，但它们有一些限制。 React Canvas利用现代移动浏览器拥有硬件加速画布的事实。
虽然还有其他将画布绘图API绑定到React的尝试，但是它们更侧重于可视化和游戏。React Canvas的不同之处在于重点构建应用程序用户界面。事实上，它是对渲染到convas上行为的具体实现。
React Canvas带来了Web开发人员熟悉的一些API，并将它们与高性能绘图引擎混合在一起。

安装

React Canvas可通过npm获得：
npm install react-canvas

React Canvas 组件

React Canvas提供了一组标准的React组件，这些组件是底层渲染实现的抽象（封装）。

<Surface>

Surface 是顶级组件。你可以将它视为为绘图画布，并且可以在它里面放置其他组件。

<Layer>

Layer 是构建其他组件的基础组件。常见的样式和属性，如top，width，left，height，backgroundColor和zIndex在此级别表示。

<Group>

Group是容器组件。因为React强制所有组件在render（）中返回单个组件，所以Group可用于对一组子组件进行合并。Group也是优化滚动性能的重要组成部分，因为它允许渲染引擎缓存昂贵的绘图操作。

<Text>

Text 是一个灵活的组件，支持多行截断，这在DOM中历来是非常困难和昂贵的。

<Image>

Image 和平时使用的Image一样。然而，它增加了一些能力：隐藏图像，直到它被完全加载，并且可以在加载时淡入。

<Gradient>

Gradient可用于设置组或表面的背景。

  render() {
    ...
    return (
      <Group style={this.getStyle()}>
        <Gradient style={this.getGradientStyle()} 
                  colorStops={this.getGradientColors()} />
      </Group>
    );
  }
  getGradientColors(){
    return [
      { color: "transparent", position: 0 },
      { color: "#000", position: 1 }
    ]
  }

<ListView>

ListView是一个触摸滚动容器，用于呈现列中的元素列表。你可以把它理解为web端的UITableView(注：UITableView是ios的表视图组件）。它使用了许多相同的优化，可以像iOS上的表视图和Android上的列表视图一样快速。

事件

构建组件

这是一个将文本呈现在图像下方的简单组件：

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
    };
  }

});

ListView

许多移动界面都会用到无限长的滚动列表。 React Canvas提供了ListView组件来做到这一点。因为ListView在视图外虚拟元素，所以传递子对象不同于在render（）中声明子节点的正常的React组件。

numberOfItemsGetter, itemHeightGetter and itemGetter等 props 是必需的。


var ListView = ReactCanvas.ListView;

var MyScrollingListView = React.createClass({

 render: function () {
   return (
     <ListView
       numberOfItemsGetter={this.getNumberOfItems}
       itemHeightGetter={this.getItemHeight}
       itemGetter={this.renderItem} />
   );
 },

 getNumberOfItems: function () {
   // Return the total number of items in the list
 },

 getItemHeight: function () {
   // Return the height of a single item
 },

 renderItem: function (index) {
   // Render the item at the given index, usually a <Group>
 },

});

目前，ListView要求每个项目的高度相同。未来版本将支持可变高度项目。

Text sizing

React Canvas提供了用于计算文本度量的measureText函数。时间轴示例中的页面组件包含使用measureText实现精确多行折叠文本的示例。自定义字体当前不受支持，但将在以后的版本中添加。

css-layout

适配性

运行样例

npm install
npm start

这将启动一个位于端口8080的实时重加载服务器。要想覆盖默认服务器和实时重加载端口，请使用PORT和/或RELOAD_PORT环境变量运行npm启动即可。

使用 webpack

npm install -g brfs
npm install --save-dev transform-loader brfs

然后将brfs转换添加到您的webpack config文件中

module: {
  postLoaders: [
    { loader: "transform?brfs" }
  ]
}

react-convas中文文档