GCanvas/docs/Guide_JS_Use.md

GCanvas.js

This module provides a canvas-like object in hybrid enviroment (Weex and ReactNative), so you can use the canvsa-like object to do your own job, just like on Web. Besides canvas, it also provide an Image-like class, so you can use the it instead of Image on Web.

Usage in Weex

First, you should install this package from npm:

npm install @gcanvas/core --save

Put a gcanvas element in template. Note that if you want to downgrade weex native to html, you should put a canvas element when is in browser enviroment.

<template>
	<div>
		<gcanvas v-if="isWeex" ref="canvas_holder" style="top: 0; width:750;height:750;position:absolute; background-color:rgba(0,0,0,0.1)" ></gcanvas>
		<canvas v-if="!isWeex" ref="canvas_holder" style="width:750px;height:750px;background-color:rgba(0,0,0,0)"></canvas>
	</div>
</template>

And then revolve in your own progress using weex-toolkit.

const { enable, WeexBridge, Image: GImage } = require('@gcanvas/core');
const EnvImage = isWeex ? Image : GImage;

Notice that we create a EnvImage variable, on web enviroment, it's the native Image class (HTMLImageElement), while on hybrid it's a class defined in gcanvas.js. You can use EnvImage just as the Image object :

// this works on both browser and hybrid enviroment
const image = new EnvImage();
image.onload = function(){
    console.log('loaded');
}
image.src = theUrl;

Then you should call enable before everything starts, and pass WeexBridge as the bridge option in.

mounted: function() {
let ref = this.$refs.canvas_holder;

// some size operations

if (isWeex) {
    ref = enable(ref, {bridge: WeexBridge});
}

// here ref is a canvas-like object
}

After this, ref is a canvas-like object, you can call ref.getContext('2d') or ref.getContext('webgl') and go on your own application. Everything is familiar, right?

Usage in ReactNative

First, you should install this package from npm:

npm install react-native-gcanvas --save
npm install @gcanvas/core --save

Second, import ReactNative modules, and GCanvasView component, GCanvasView.

import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

import {
  requireNativeComponent,
  findNodeHandle,
  NativeModules
} from 'react-native';

import {
  GCanvasView,
} from 'react-native-gcanvas';

Third, import enable, ReactNativeBridge and image from @gcanvas/core, initialize ReactNativeBridge with native module and platform.

const { enable, ReactNativeBridge, Image: GImage } = require('@gcanvas/core');

ReactNativeBridge.GCanvasModule = NativeModules.GCanvasModule;
ReactNativeBridge.Platform = Platform;

Finally, you can use GCanvas in ReactNative App. Notice that before you enable GCanvas, convertGCanvasView reactTag to a string.

export default class App extends Component<{}> {

  //draw something with gcanvas
  draw() => {
	var ref = this.refs.canvas_holder;

	//must convert canvas tag to a string
    var canvas_tag = findNodeHandle(ref);
    var el = { ref:""+canvas_tag, style:{width:414, height:376}};
    ref = enable(el, {bridge: ReactNativeBridge});

    //TODO get context by yourself
    var ctx = ref.getContext('2d');
    //rect
    ctx.fillStyle = 'green';
    ctx.fillRect(0, 0, 100, 100);

    //rect
    ctx.fillStyle = 'black';
    ctx.fillRect(100, 100, 100, 100);
    ctx.fillRect(25, 205, 414-50, 5);

    //circle
    ctx.arc(200, 315, 100, 0, Math.PI * 2, true);
    ctx.fill();

    var image = new GImage();
    image.onload = function(){
      ctx.drawImage(image, 150, 0);
      ctx.drawImage(image, 150, 450);
    }
    image.src = '//gw.alicdn.com/tfs/TB1KwRTlh6I8KJjy0FgXXXXzVXa-225-75.png';
  }

  //render
  render(){
      return  <GCanvasView ref='canvas_holder' style={top: 20,width: 414,height :700,backgroundColor: '#FF000030'}></GCanvasView>  
  }

}

Writing your own bridge

Notice that we pass in the bridge object calling enable. Actually in this module we provide WeexBridge and ReactNativeBridge, if you want to define a custom bridge, you need to implement the same functions WeexBridge implemented. These functions are:

function name	arguments	return
callEnable	ref, configArray	gcanvas
callEnableDebug
callEnableDisableCombo
callSetContextType	componentId, context_type
render	componentId
render2d	componentId, commands
flushNative	componentId
callNative	componentId, cmdArgs, cache	flush native result
texImage2D	componentId, ...args
texSubImage2D	componentId, ...args
bindImageTexture	componentId, src, imageId
preloadImage	[url, id], callback

You can check src/bridge/bridge-weex.js for detail.

This module is the javascript part of the js-native bridge. About writing the native part, you can refer to Custom GCanvas Bridge.