antv x6.js实现一个canvas可拖拽流程图效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：antv x6.js实现一个canvas可拖拽流程图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>

<body>
    <div>
        <div id="container"></div>
        <div id="stencil" class="sider"></div>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/x6.js"></script>
    <script>
        var graphData = {
    cells: [
      {
        position: {
          x: 420,
          y: 40
        },
        size: {
          width: 80,
          height: 42
        },
        attrs: {
          text: {
            text: '开始',
            nodeType: 'start'
          },
          body: {
            rx: 24,
            ry: 24
          }
        },
        shape: 'flow-chart-rect',
        ports: {
          groups: {
            top: {
              position: 'top',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                  style: {
                    visibility: 'hidden'
                  }
                }
              }
            },
            right: {
              position: 'right',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                  style: {
                    visibility: 'hidden'
                  }
                }
              }
            },
            bottom: {
              position: 'bottom',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                  style: {
                    visibility: 'hidden'
                  }
                }
              }
            },
            left: {
              position: 'left',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                  style: {
                    visibility: 'hidden'
                  }
                }
              }
            }
          },
          items: [
            {
              group: 'top',
              id: 'eccaf3b3-4f56-4a2e-8bcf-64866978fefd'
            },
            {
              group: 'right',
              id: '874ea986-b2cc-47b4-96c0-318974009aa8'
            },
            {
              group: 'bottom',
              id: '32222ded-423a-42cf-a9ff-702d53b62a8d'
            },
            {
              group: 'left',
              id: '6c6418f3-3f45-4632-895e-024c05725a1a'
            }
          ]
        },
        id: '1c3dcf15-7ef2-4438-8d73-21cde6b509a2',
        zIndex: 1
      },
      {
        position: {
          x: 110,
          y: 200
        },
        size: {
          width: 160,
          height: 40
        },
        attrs: {
          text: {
            x: 6,
            text: 'antv x6 001',
            nodeTypeN: 'antv x6',
            nodeType: 2
          }
        },
        shape: 'flow-video-rect',
        ports: {
          groups: {
            top: {
              position: 'top',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                  style: {
                    visibility: 'hidden'
                  }
                }
              }
            },
            right: {
              position: 'right',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                  style: {
                    visibility: 'hidden'
                  }
                }
              }
            },
            bottom: {
              position: 'bottom',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                  style: {
                    visibility: 'hidden'
                  }
                }
              }
            },
            left: {
              position: 'left',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                  style: {
                    visibility: 'hidden'
                  }
                }
              }
            }
          },
          items: [
            {
              group: 'top',
              id: '805ffb33-1ad9-4390-9975-ff8a6d70ba32'
            },
            {
              group: 'right',
              id: '2f3995be-8a2d-46c5-849b-0dc825b9340a'
            },
            {
              group: 'bottom',
              id: 'e1bd1553-25e2-4eda-89e9-2c65a98e8342'
            },
            {
              group: 'left',
              id: '19ad666e-90e7-4036-a77b-72d53a444e00'
            }
          ]
        },
        id: '05cb1da5-124d-4a05-8cbf-4b44fddb30ac',
        zIndex: 2,
        data: {
          baseInfo: {
            nodeName: 'antv x6001',
            nodeExplain: '这是antv x6节点',
            nodeTypeN: 'antv x6',
            nodeType: 2
          },
        }
      },
      {
        position: {
          x: 545,
          y: 200
        },
        size: {
          width: 152.021484375,
          height: 40
        },
        attrs: {
          text: {
            fill: '#ffffff',
            x: 6,
            text: 'h5自定节点',
            nodeTypeN: 'h5自定义节点',
            nodeType: 3
          }
        },
        shape: 'flow-H5-rect',
        ports: {
          groups: {
            top: {
              position: 'top',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                  style: {
                    visibility: 'hidden'
                  }
                }
              }
            },
            right: {
              position: 'right',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                  style: {
                    visibility: 'hidden'
                  }
                }
              }
            },
            bottom: {
              position: 'bottom',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
                  style: {
                    visibility: 'hidden'
                  }
                }
              }
            },
            left: {
              position: 'left',
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: '#5F95FF',
                  strokeWidth: 1,
                  fill: '#fff',
       .........完整代码请登录后点击上方下载按钮下载查看