rax-canvas

支持

Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序

描述

画布组件.

• 在 Weex 上依赖 gcanvas
• 在支付宝小程序中依赖 canvas

安装

$ npm install rax-canvas --save

属性

|属性| 类型 | 默认值 | 必填 | 描述 | 支持 | | ----------- | ---------- | ---------- | ------------ | ------------------ | ------------ | | style | object | - | ✘ | 通过内联的方式设置画布样式 | | | className | object | - | ✘ | 设置画布的样式 | | | width | number | 0 | ✘ | 设置画布的宽度 | | | height | number | 0 | ✘ | 设置画布的高度 | | | onClick | function | - | ✘ | 点击画布时触发的事件 | | | onLongPress | function | - | ✘ | 长按画布时触发的事件 | | | onTouchStart | function | - | ✘ | 触摸画布时触发的事件 | | | onTouchMove | function | - | ✘ | 手指在画布上移动时触发的事件 | | | onTouchEnd | function | - | ✘ | 结束触摸时触发的事件 | | | onTouchCancel | function | - | ✘ | 触摸事件取消的时候触发的事件 | |

方法

getContext(type: string)

返回画布实例。

type 默认值为 2d，目前在小程序中暂不支持设置。 由于微信小程序新接口获取 canvas context 是一个异步行为，如果想获得设置 2d/webgl 的能力，则不能使用 getContext 方法，需要用户自己兼容处理，具体详见微信小程序文档 https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html。

注意

直接指定 width 或者 height 的优先级高于在 style 和 className 中指定的宽高。

示例

import { createElement, Component, render, createRef } from 'rax';
import Canvas from 'rax-canvas';
import DriverUniversal from "driver-universal"

class CanvasSample extends Component {
  constructor(props) {
    super(props);
    this.raxCanvasDemo = createRef()
  }
  componentDidMount() {
    const context = this.raxCanvasDemo.current.getContext();
    context.fillStyle = 'red';
    context.fillRect(0, 0, 100, 100);
  }

  render() {
    return <Canvas style={{
      width: 750,
      height: 750
    }} ref={this.raxCanvasDemo} />;
  }
}

render(<CanvasSample />, document.body, { driver: DriverUniversal });