antv x6文档笔记一（vue2）
<template>
<div class="page_box">
<!-- 深度分析 -->
<div id="container"></div>
<el-button @click="add"> 新增一个节点</el-button>
<el-button @click="exportData"> 导出数据</el-button>
<el-button @click="importData"> 导入数据</el-button>
<el-button @click="start"> 开始动画</el-button>
<img src="../../assets/img/common/go.png" alt="" />
</div>
</template>
<script>
import { Graph ,Vector} from "@antv/x6";
import { insertCss } from "insert-css";
export default {
data() {
return {
graph: null,
baseData: null,
};
},
computed: {
node() {
return {
// 节点
nodes: [
{
id: "node1", // String，可选，节点的唯一标识
x: 40, // Number，必选，节点位置的 x 值
y: 40, // Number，必选，节点位置的 y 值
width: 180, // Number，可选，节点大小的 width 值
height: 140, // Number，可选，节点大小的 height 值
label: "hello", // String，节点标签
data: {
// 关联的业务数据
name: "sz",
age: 18,
},
ports: [
// 定义连接点
{
id: "port1",
attrs: {
//定义连接点的样式
circle: {
r: 6, // 半径
magnet: true, //使链接桩在连线交互时可以被连接上
stroke: "#31d0c6", // 边框颜色
strokeWidth: 2, // 边框宽度
fill: "#fff",
},
},
},
{ id: "port2" },
{ id: "port3" },
],
},
{
id: "node2", // String，节点的唯一标识
x: 160, // Number，必选，节点位置的 x 值
y: 180, // Number，必选，节点位置的 y 值
width: 180, // Number，可选，节点大小的 width 值
height: 140, // Number，可选，节点大小的 height 值
label: "world", // String，节点标签
ports: [
// 定义连接点
{
id: "port1",
attrs: {
//定义连接点的样式
circle: {
r: 6, // 半径
magnet: true, //使链接桩在连线交互时可以被连接上
stroke: "#31d0c6", // 边框颜色
strokeWidth: 2, // 边框宽度
fill: "#fff",
},
},
},
{ id: "port2" },
{ id: "port3" },
],
},
],
// 边 连线
edges: [
{
id:'line1',
source: "node1", // String，必须，起始节点 id
target: "node2", // String，必须，目标节点 id
shape: "shadow-edge", // 线的形状 double-edge
attrs: {
line: {
stroke: "orange", //线的颜色
},
},
},
],
};
},
},
methods: {
// 初始化函数
render() {
// 初始化画布
const graph = new Graph({
container: document.getElementById("container"),
width: 800, // 画布宽高
height: 600,
background: {
// color: "#fffbe6", // 设置画布背景颜色
// image: "https://img0.baidu.com/it/u=1985782942,2642646797&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333", // 必须为网图 或者base64
// image: "./excel.png", // 这个图片 必须在 public 中
// size: {
// width: 1800,
// height: 1600,
// },
},
// history:true, // 是否允许撤销 和重做 // 需要回调处理
selecting: {
enabled: true, // 是否允许点选 或者框选
className: "my-selecting", // 定制样式 所加的类名
rubberband: true, // 启用框选
showNodeSelectionBox: true,
},
resizing: {
//调整节点大小
enabled: true,
},
rotating: {
// 调整节点旋转
enabled: true,
},
translating: {
// 调整节点移动范围
restrict: true, // 如果为ture 不能超过边界 可以为一个详细对象 配置 可移动范围
},
grid: {
size: 10, // 网格大小 10px
visible: true, // 渲染网格背景
},
});
this.graph = graph;
graph.zoom(-0.5);
graph.translate(80, 40);
// 渲染节点和边
graph.fromJSON(this.node);
},
add() {
// 创建节点
const wrap = document.createElement("div");
wrap.innerHTML = ` <a href="#" class="my-btn">Submit</a>`;
wrap.style.width = "300px";
wrap.style.height = "300px";
wrap.style.display = "flex";
wrap.style.alignItems = "center";
wrap.style.justifyContent = "center";
wrap.style.background = "#ffd591";
wrap.style.border = "2px solid #ffa940";
wrap.style.borderRadius = "4px";
// wrap.innerText = "World";
// 插入节点样式
insertCss(`
.my-btn{
position: relative;
display: inline-block;
padding: 10px 20px;
color: #03e9f4;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: .3s;
margin-top: 40px;
letter-spacing: 3px
}
.my-btn:hover {
background: #03e9f4;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 100px #03e9f4;
}
`);
// 新增节点
const target = this.graph.addNode({
shape: "html",
x: 320,
y: 260,
width: 120,
height: 50,
html: wrap,
});
},
// 导出数据
exportData() {
this.baseData = this.graph.toJSON();
console.log(this.baseData);
},
// 导入数据
importData() {
this.graph.fromJSON(this.baseData);
},
// 动画 未完全实现
start(){
const view = this.graph.findViewByCell('line1')
console.log('view',view);
const token = Vector.create('circle', { r: 10, fill: 'green' })
// setTimeout(()=>{
// view.sendToken(token.node, 1000)
// },2000)
const stop = view.sendToken(token.node, 1000)
// setTimeout(stop, 5000)
}
},
mounted() {
this.render();
// 节点/线 被框选时触发
this.graph.on("selection:changed", (args) => {
// code here
console.log("args", args);
});
// 节点被点击了
this.graph.on("node:click", ({ e, x, y, node, view }) => {
console.log("节点被点击了", node);
});
// 线被点击了
this.graph.on("edge:click", ({ e, x, y, edge, view }) => {
console.log("线被点击了", edge);
});
this.graph.on("cell:mouseenter", ({ cell }) => {
if (cell.isNode()) {
cell.addTools([
{
name: "button-remove",
args: {
x: 0,
y: 0,
offset: { x: 10, y: 10 },
},
},
]);
} else {
cell.addTools(["vertices", "segments"]);
}
});
this.graph.on("cell:mouseleave", ({ cell }) => {
cell.removeTools();
});
},
};
</script>
<style lang="less" scoped>
// .container{
// background:url('../../assets/img/common/center-box.png');
// }
</style>