如何在GCanvas里面使用 antV 系列的图形化框架呢?

[morelearn1990]

请教一下如何在GCanvas里面使用 antV 系列的图形化框架呢?在gcanvas的community里面看见的G2但是不知道如何结合在一起使用

[morelearn1990]

好像不行，都会G2和F2都会需要document这个变量

[zouyn]

可以的。F2可以匹配GCanvas上下文。

[morelearn1990]

那怎么匹配呢?需要对F2再次封装一下么?

[hpk1994]

把你enable返回的canvas对象作为el传给F2.chart

var canvas = enable(this.tag, { bridge: PCSGcanvasBridge })

var chart = new F2.Chart({
id: tag,
el: canvas,
width: width,
height: height,
});

[morelearn1990]

按照上面的方法使用，报错提示 GCanvas not supported yet 。 或者是我操作姿势不对啊 QAQ

[hpk1994]

import {enable, WeexBridge, Image as GImage} from "gcanvas.js";

var tag = 'chart'

var canvas = enable(tag, {bridge: WeexBridge})
var context = canvas.getContext('2d')
canvas.context = context//这个很重要

var chart = new F2.Chart({
id: tag,
el: canvas,
width: width,
height: height,
});

[morelearn1990]

我查了一下,GCanvas not supported yet 这个是因为 F2 里面使用了 measureText 这个 API .在 gcanvas 里面 measureText 直接 throw 的这个错误.然后像 F2 的支付宝小程序版本(https://github.com/antvis/my-f2)一样 mock 一个measureText api 。就可以运行了,但是没有手势事件,渲染感觉还没有网页的流畅(尴尬)

[zouyn]

是的，渲染感觉没网页流畅。手势可以用weex手势事件写一个。
touchstart(ev) {
const plot = this.chart.get('plotRange');
const { x, y } = F2.Util.createEvent(ev, this.chart);
/if (!(x >= plot.tl.x && x <= plot.tr.x && y >= plot.tl.y && y <= plot.br.y)) { // not in chart plot
this.chart.hideTooltip();
return;
}/
const lastTimeStamp = this.timeStamp;
const timeStamp = +new Date();
if ((timeStamp - lastTimeStamp) > 16) {
this.chart.showTooltip({ x, y });
this.timeStamp = timeStamp;
}
},
touchend(ev){
this.chart.hideTooltip();
}

[zouyn]

写了demo可以参考下。

[morelearn1990]

参照你的做了个简单的封装，https://github.com/morelearn1990/F2-gcanvas-wrapper