一直以来我们公司很多移动端项目大部分都是由Android开发在搞,所以即便是有用到前端的地方也都是开发好页面之后,前端提供页面地址,打apk的包都是Android的事。最开始使用uniapp结合f6开发的时候也是如此,我最终使用HBuilder X打的是h5的包。但是最近有一个项目重构,要求摆脱之前套壳的方式,完全由前端来打apk的包。之前使用f6开发的功能就出现在浏览器访问没有问题,使用真机运行就完全不好使。但是需求提出来了不能置之不理。于是经过百般尝试,最终结合renderjs实现了f6在app中运行。
<template>
<view id="container"></view>
</template>
<script module="fence" lang="renderjs">
import F6 from '@antv/f6';
export default {
data() {
return {
graph: null, // 画布实例对象,
grid:null,
minimap:null,
data: {
nodes: [{
id: 'node1', // String,该节点存在则必须,节点的唯一标识
x: 100, // Number,可选,节点位置的 x 值
y: 200, // Number,可选,节点位置的 y 值
},
{
id: 'node2', // String,该节点存在则必须,节点的唯一标识
x: 300, // Number,可选,节点位置的 x 值
y: 200, // Number,可选,节点位置的 y 值
},
{
id: 'node3', // String,该节点存在则必须,节点的唯一标识
x: 300, // Number,可选,节点位置的 x 值
y: 400, // Number,可选,节点位置的 y 值
},
{
id: 'node4', // String,该节点存在则必须,节点的唯一标识
x: 100, // Number,可选,节点位置的 x 值
y: 400, // Number,可选,节点位置的 y 值
},
],
// 边集
edges: [{
source: 'node1', // String,必须,起始点 id
target: 'node2', // String,必须,目标点 id
}, {
source: 'node2', // String,必须,起始点 id
target: 'node3', // String,必须,目标点 id
}, {
source: 'node3', // String,必须,起始点 id
target: 'node4', // String,必须,目标点 id
}, {
source: 'node4', // String,必须,起始点 id
target: 'node1', // String,必须,目标点 id
}, ],
}
}
},
mounted() {
this.initGraph()
},
methods: {
// 初始化流程图画布
initGraph() {
this.graph = new F6.Graph({
container: 'container',
width: 375,
height: 500,
fitView: true,
modes: {
default: ['drag-canvas'],
},
layout: {
type: 'radial',
unitRadius: 50,
// center: [500, 300],
},
});
// 监听点击事件
this.graph.on('node:tap', this.graphNodeClick);//点击事件
this.graph.on('node:dragstart', (e) => {//拖拽开始
this.graph.layout();
this.refreshDragedNodePosition(e);
})
this.graph.on('node:drag', (e) => {//拖拽过程
this.refreshDragedNodePosition(e)
})
this.graph.on('node:dragend', (e) => {//拖拽结束
// e.item.get('model').fx = null
// e.item.get('model').fy = null
})
this.graph.data(this.data);
this.graph.render();
// this.graph.fitView();
},
graphNodeClick(e){
console.log(e)
},
refreshDragedNodePosition(e){
const model = e.item.get('model')
model.fx = e.x
model.fy = e.y
}
}
}
</script>
<style>
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
}
</style>