vue使用antv-x6 绘制流程图DAG图-CSDN博客
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
注册节点两种方法
import { Graph, Node, Path, Cell, Addon } from "@antv/x6";
import { register } from "@antv/x6-vue-shape";
1.x 的写法
registerCustomNode() {
// demo
Graph.registerNode(
"custom-polygon",
{
inherit: "polygon",
width: 66,
height: 36,
markup: [
{
tagName: "polygon",
selector: "body",
},
{
tagName: "text",
selector: "label",
},
],
attrs: {
body: {
strokeWidth: 1,
stroke: "#5F95FF",
fill: "#EFF4FF",
},
text: {
fontSize: 12,
fill: "#262626",
},
},
ports: {
...ports,
// items: [ // 这里是限制连接点多少个的地方
// {
// group: 'top',
// },
// {
// group: 'bottom',
// },
// ],
},
},
true
);
Graph.registerNode(
"custom-circle",
{
inherit: "circle",
width: 45,
height: 45,
markup: [
{
tagName: "circle",
selector: "body",
},
{
tagName: "text",
selector: "label",
},
],
attrs: {
body: {
strokeWidth: 1,
stroke: "#5F95FF",
fill: "#EFF4FF",
},
text: {
fontSize: 12,
fill: "#262626",
},
},
ports: { ...ports },
},
true
);
// 自定义节点
Graph.registerNode(
"dag-node",
{
inherit: "rect",
width: 180,
height: 36,
markup: [
{
tagName: "rect", // 标签名称
selector: "body", // 选择器
},
{
tagName: "image",
selector: "image1",
},
{
tagName: "text",
selector: "label",
},
{
tagName: "image",
selector: "image2",
},
],
attrs: {
body: {
strokeWidth: 1,
stroke: "rgba(255, 255, 255, 0.3)",
fill: "#1D2035",
},
image1: {
"xlink:href": imgCot.logo,
width: 16,
height: 16,
x: 12,
y: 12,
},
label: {
fontSize: 12,
fill: "rgba(255, 255, 255, 0.9)",
},
image2: {
"xlink:href": imgCot.logo,
width: 16,
height: 16,
x: 12,
y: 12,
refX: "80%",
},
},
ports: {
groups: {
top: {
position: "top",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#C2C8D5",
strokeWidth: 1,
fill: "#fff",
},
},
},
bottom: {
position: "bottom",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#C2C8D5",
strokeWidth: 1,
fill: "#fff",
},
},
},
},
},
},
true
);
},2.x 的写法 注册vue组件节点
registerCustomVueNode() {
register({
shape: "dag-node",
width: 185,
height: 40,
component: DataBase,
ports: {
groups: {
top: {
position: "top",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#C2C8D5",
strokeWidth: 1,
fill: "#fff",
},
},
},
bottom: {
position: "bottom",
attrs: {
circle: {
r: 4,
magnet: true,
stroke: "#C2C8D5",
strokeWidth: 1,
fill: "#fff",
},
},
},
},
},
});
},