mirror of
https://github.com/alibaba/GCanvas.git
synced 2025-12-08 17:36:42 +00:00
94 lines
3.1 KiB
Markdown
94 lines
3.1 KiB
Markdown
# GCanvas Weex Bridge iOS Guide
|
|
|
|
If your project use Weex, and want to integrate GCanvas, or you want to see how to run Weex sample with GCanvas. This guide is just for you.
|
|
|
|
## Integrate GCanvas
|
|
|
|
#### Requirement
|
|
|
|
* Make sure that you have installed the [iOS development environment](https://help.apple.com/xcode/mac/current/#/dev60b6fbbc7) and [CocoaPods](https://guides.cocoapods.org/using/getting-started.html).
|
|
* Make sure that you have integrate [WeexSDK](https://github.com/apache/incubator-weex#ios) >= 0.16.X
|
|
* Make sure that you have insalled the [weex-toolkit](https://www.npmjs.com/package/weex-toolkit) in [Nodejs](https://nodejs.org/en/) 4.0+ for running case
|
|
|
|
#### Installation with CocoaPods
|
|
|
|
Add these pods to your Podfile and run `pod install` to install:
|
|
|
|
```objective-c
|
|
pod 'WeexGcanvas'
|
|
pod 'WeexPluginLoader'
|
|
```
|
|
|
|
`WeexPluginLoader` would dynamic register Weex `Module` and `Component` of GCanvas, so we do not need to register manually. dd
|
|
|
|
Now, you can use official sample to test GCanvas, `sample.vue` file in path `./examples/2d/sammple.vue`.
|
|
|
|
You can also write a sample by youself.
|
|
|
|
|
|
## Write Weex Sample
|
|
Before write a Weex sample, you should learn [Weex Tutorial](http://weex.apache.org/guide/#overview).
|
|
|
|
There is a simple page below, find this in path `./bridges/weex-bridge/examples/2d/simple.vue`.
|
|
```javascript
|
|
<template>
|
|
<div ref="test">
|
|
<gcanvas ref="canvas_holder" style="width:750;height:750;background-color:rgba(0,0,0,0.1)"></gcanvas>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
//for debug
|
|
const enable = require('../../../../js/dist/gcanvas.min.js').enable;
|
|
const WeexBridge = require('../../../../js/dist/gcanvas.min.js').WeexBridge;
|
|
const GImage = require('../../../../js/dist/gcanvas.min.js').Image;
|
|
|
|
|
|
module.exports = {
|
|
mounted: function () {
|
|
var ref = this.$refs.canvas_holder;
|
|
var size = {width:750, height:750};
|
|
var gcanvas = enable(ref, size);
|
|
var ctx = gcanvas.getContext('2d');
|
|
|
|
//rect
|
|
ctx.fillStyle = 'red';
|
|
ctx.fillRect(0, 0, 100, 100);
|
|
|
|
//rect
|
|
ctx.fillStyle = 'black';
|
|
ctx.fillRect(100, 100, 100, 100);
|
|
ctx.fillRect(25, 210, 700, 5);
|
|
|
|
//circle
|
|
ctx.arc(450, 200, 100, 0, Math.PI * 2, true);
|
|
ctx.fill();
|
|
|
|
//image
|
|
var image = new GImage();
|
|
image.src = 'https://gw.alicdn.com/tfs/TB1KwRTlh6I8KJjy0FgXXXXzVXa-225-75.png';
|
|
image.onload = function(){
|
|
ctx.drawImage(image, 100, 300);
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
```
|
|
|
|
|
|
## Run Weex Sample
|
|
|
|
* **Fisrt**, Use `weex-toolkit`to create Weex Javascript bundle.
|
|
```shell
|
|
weex preview sample.vue
|
|
```
|
|
There would be lanuch a default browser(Chrome) , and generate Javascript bundle show as qrcode.
|
|
|
|
* **Second**,Install `GCanvasPlayground` app
|
|
run `pod install` in `ios/playground` path, and then install `GCanvasPlayground` app on your iPhone device.
|
|
|
|
* **Finally**, Run `GCanvasPlayground` app, scan qrcode created at first setp. If you get reuslt same as below, congratuation.
|
|
<img src='https://img.alicdn.com/tfs/TB1z9ijX29TBuNjy0FcXXbeiFXa-1242-2208.png' width="60%">
|
|
|
|
|