GCanvas移动端跨平台渲染引擎
GCanvas 是由淘宝开发的针对移动设备的跨平台渲染引擎。 它使用 C ++ 编写,基于 OpenGL ES,可为 Javascript 运行时提供高性能的 2D / WebGL 渲染。它也具有类似浏览器的画布 API ,因此使用起来非常方便和灵活,尤其适用于 Web 开发人员。
GCanvas 支持 Android 4.0+(API 14)和 iOS 8.0+ 。支持 Weex 和 ReactNative 等混合框架。 它还可以利用大多数设备上的硬件加速,使得开发者可以使用 Javascript 以非常高的帧率绘制场景。
Demo
<template> <div> <gcanvas v-if="isWeex" ref="canvas_holder" v-bind:style="{width:width,height:height,backgroundColor:'rgba(255,255,255,1)'}"></gcanvas> <canvas v-if="!isWeex" ref="canvas_holder" v-bind:style="{width:width+'px',height:height+'px',backgroundColor:'rgba(255,255,255,1)'}"></canvas> </div> </template> <script> const isWeex = typeof callNative === "function"; const dom = weex.requireModule("dom"); import { enable, WeexBridge, Image as GImage } from "gcanvas.js"; let EnvImage = isWeex ? GImage : Image; function run(canvas, { requestAnimationFrame }) { var img = new EnvImage(); let cxt = canvas.getContext('2d'); img.onload = function(){ cxt.drawImage(img, 0, 0, img.width, img.height); } img.src = 'https://c1.staticflickr.com/3/2388/5800134409_83345951ed_b.jpg'; } export default { data() { return { isWeex, width: 750, height: 980 }; }, mounted: function() { const start = () => { var ref = this.$refs.canvas_holder; var size = isWeex ? { width: parseInt(this.width), height: parseInt(this.height) } : { width: parseInt(ref.clientWidth), height: parseInt(ref.clientHeight) }; if (isWeex) { ref = enable(ref, { debug: true, bridge: WeexBridge }); } ref.width = size.width; ref.height = size.height; run(ref, { requestAnimationFrame: isWeex ? setTimeout : requestAnimationFrame }); }; setTimeout(function(){ dom.getComponentRect("viewport", e => { this.height = e.size.height; this.isReady = true; setTimeout(start, 1000); }) }, 50); } }; </script>
评论