Weex 中引入F2 ios 真机和模拟器上均显示空白

[Bob2622]

环境: node: v8.12.0 npm: 6.4.1 F2: 3.1.0 gcanvas.js: 0.0.8 weexSDK: 0.20.1

gcanvas 引入成功例证:

<template>
    <div>
        <gcanvas v-if="isWeex" ref="canvas_holder" style="width:750px;height:1000px;"></gcanvas>
        <canvas v-if="!isWeex" ref="canvas_holder" style="width:100%;height:100%;"></canvas>
    </div>
</template>
<script>
// import F2 from '@antv/f2';
const isWeex = weex.config.env.platform !== 'Web'
const { enable, WeexBridge, Image: GImage } = require('gcanvas.js');
const EnvImage = !isWeex ? Image : GImage;

export default {
    data() {
        return {
            isWeex: isWeex ? 1 : 0
        }
    },
    mounted: function () {

        let ref = this.$refs.canvas_holder;
        if (isWeex) {
            ref = enable(ref, {bridge: WeexBridge});
        }
        var ctx = ref.getContext('2d');

        //rect
        ctx.fillStyle = 'red';
        ctx.fillRect(0, 0, 100, `100);`
    }
};
</script>

可以描绘出一个红色矩形

但是使用F2描绘官网引导例子: 柱形图时显示空白

<template>
    <div>
        <gcanvas v-if="isWeex" ref="canvas_holder" style="width:750px;height:1000px;"></gcanvas>
        <canvas v-if="!isWeex" ref="canvas_holder" style="width:100%;height:100%;"></canvas>
    </div>
</template>
<script>
import F2 from '@antv/f2';
const isWeex = weex.config.env.platform !== 'Web'
const { enable, WeexBridge, Image: GImage } = require('gcanvas.js');
const EnvImage = !isWeex ? Image : GImage;

export default {
    data() {
        return {
            isWeex: isWeex ? 1 : 0
        }
    },
    mounted: function () {

        let ref = this.$refs.canvas_holder;
        if (isWeex) {
            ref = enable(ref, {bridge: WeexBridge});
        }
        var ctx = ref.getContext('2d');

        // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
        const data = [
            { genre: 'Sports', sold: 275 },
            { genre: 'Strategy', sold: 115 },
            { genre: 'Action', sold: 120 },
            { genre: 'Shooter', sold: 350 },
            { genre: 'Other', sold: 150 },
        ];

        // Step 1: 创建 Chart 对象
        const chart = new F2.Chart({
            context: ctx
        });

        // Step 2: 载入数据源
        chart.source(data);

        // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
        chart.interval().position('genre*sold').color('genre');

        // Step 4: 渲染图表
        chart.render();
    }
};
</script>

调研了好多天, 实在是解决不了了 - -

[simaQ]

参考下 https://github.com/morelearn1990/F2-gcanvas-wrapper

// Step 1: 创建 Chart 对象
        const chart = new F2.Chart({
            context: ctx
        });

你这里使用下面的参数试试：

// Step 1: 创建 Chart 对象
        const chart = new F2.Chart({
            el: ctx,
            width: 200, // 传入 width
            height: 200 // 传入 height 
        });

[emptywalker]

我参考 https://github.com/morelearn1990/F2-gcanvas-wrapper 例子，但是，发现

      let ref = this.$refs.canvas_1;

      ref = enable(ref, { bridge: WeexBridge });
     // 下面的就不执行了，WeexBridge 为 {} .

[Bob2622]

参考下 https://github.com/morelearn1990/F2-gcanvas-wrapper

// Step 1: 创建 Chart 对象
        const chart = new F2.Chart({
            context: ctx
        });

你这里使用下面的参数试试：

// Step 1: 创建 Chart 对象
        const chart = new F2.Chart({
            el: ctx,
            width: 200, // 传入 width
            height: 200 // 传入 height 
        });

特地新建了个样例工程, 详细信息都在 readme 里 。能帮我看下么, 怎么都调不出来柱形图 https://github.com/Bob2622/weexTest @simaQ

[Bob2622]

我参考 https://github.com/morelearn1990/F2-gcanvas-wrapper 例子，但是，发现

      let ref = this.$refs.canvas_1;

      ref = enable(ref, { bridge: WeexBridge });
     // 下面的就不执行了，WeexBridge 为 {} .

我在模拟器上运行的 怎么调试啊 我这完全没有调试的手段

[emptywalker]

我参考 https://github.com/morelearn1990/F2-gcanvas-wrapper 例子，但是，发现

      let ref = this.$refs.canvas_1;

      ref = enable(ref, { bridge: WeexBridge });
     // 下面的就不执行了，WeexBridge 为 {} .

我在模拟器上运行的 怎么调试啊 我这完全没有调试的手段

我是把 gcanvas.js 库的src下面的js都copy到weex项目中，然后通过log调试的。

[emptywalker]

@Bob2622 我在实现你推荐的例子时，在 iOS 注册了 canvas module，和 gcanvas component 后，项目能正常运行，但没有效果。并且 Xcode 一直打印下面的信息：

LOG: initailizeGLEnvironment
LOG: ClearScreen: r:0.000000, g:0.000000, b:0.000000, a:0.000000
LOG: FBO complete! fboFrame = 2, fboTexture = 1, fboStencial = 3, w = 1080, h = 576
LOG: GCanvas::OnSurfaceChanged mContextLost 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0
LOG: GCanvas::Render: mContextType: 0

无限循环的打印 LOG: GCanvas::Render: mContextType: 0 这句，请问是什么原因哈

[emptywalker]

我在使用这个demo的时候，能够画出图形，但没过多久 iOS 就crash了。截图如下

[snowkeda]

h5 ios上也会有类似的情况。 反复重新渲染图表出现无法渲染的情况。

http://index.meadin.com/brandindex/123
这两个来回切换 http://index.meadin.com/brandrankings

[jianxiongc]

@emptywalker 请问这个问题找到原因了吗？

[emptywalker]

@c1394393468 我的是本地环境问题，换成 https://github.com/alibaba/GCanvas/tree/master/GCanvas/bridges/weex-bridge/ios 这里面的playground 就 OK 了。你可以尝试一下

[jianxiongc]

我在导入交互组件时 const Interaction = require('@antv/f2/lib/interaction/pan'); 页面白屏了

[emptywalker]

@c1394393468 建议你现在GCanvas 的playground试试看，是否有问题，有问题的话可以通过钉钉联系开发团队

[jianxiongc]

我在导入交互组件时 const Interaction = require('@antv/f2/lib/interaction/pan'); 页面白屏了

看了一下是由于f2里面 pan 里面 require ('./dom') ,weex 里没有dom,window

[hj0503]

@c1394393468 建议你现在GCanvas 的playground试试看，是否有问题，有问题的话可以通过钉钉联系开发团队

怎么联系，我遇到解决不了的问题了

[jin2gh]

您好，请问您解决了吗？我在微信h5开发的时候，ios上也没有绘制图表，安卓上正常