antv x6.js实现一个canvas可拖拽流程图效果代码
代码语言：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',
style: {
visibility: 'hidden'
}
}
}
}
},
items: [
{
group: 'top',
id: '81dade1c-f256-4f1a-9d39-25e20c78d0d7'
},
{
group: 'right',
id: '465779bb-62b7-439c-a637-556396a9123e'
},
{
group: 'bottom',
id: 'bad3f84f-cec3-40e7-aa3e-31617af542c3'
},
{
group: 'left',
id: 'ff2dd04c-2015-4f33-9444-211bf9e115f5'
}
]
},
id: '7f5e19ee-16ff-43d5-9307-57ff4acf14bc',
zIndex: 3,
data: {
baseInfo: {
nodeName: 'h5自定义节点',
nodeExplain: '这是h5视频节点',
nodeTypeN: 'h5antv x6',
nodeType: 3
},
}
},
{
position: {
x: 344.1357421875,
y: 390
},
size: {
width: 137.548828125,
height: 40
},
attrs: {
text: {
x: 6,
text: 'web自定义节点',
nodeTypeN: 'web自定义节点',
nodeType: 4
},
body: {
stroke: 'orange'
}
},
shape: 'flow-web-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: '192a83f2-b53e-467d-8bb8-62d3ecde953e'
},
{
group: 'right',
id: '2a51cca3-07e3-459b-87ab-fbe7487cb45d'
},
{
group: 'bottom',
id: '13f3d359-1135-4e83-8f39-6e98553d7da1'
},
{
group: 'left',
id: '55df1b17-71cd-480d-8702-b0d3b02b4d23'
}
]
},
id: 'f61c66bc-7714-413e-9f1b-cc993138b3f7',
zIndex: 4,
data: {
baseInfo: {
nodeName: 'web自定义节点001',
nodeExplain: 'web自定义节点节点描述',
nodeTypeN: 'h5antv x6',
nodeType: 3
},
requestType: 1,
requestTarget: '',
requestParams: [
{
paramName: '',
paramValue: '',
paramType: ''
}
],
responseParams: [
{
paramName: '',
paramValue: '',
paramType: ''
}
]
}
},
{
position: {
x: 335.8642578125,
y: 550
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
x: 6,
text: '规则',
nodeTypeN: '规则校验',
nodeType: 5
},
body: {
stroke: '#5F95FF'
}
},
shape: 'flow-rule-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: 'c1fe8c0c-fa28-4bf4-a688-00d475bee09e'
},
{
group: 'right',
id: 'a9151054-83fe-41ff-8ed2-549ce2a8544e'
},
{
group: 'bottom',
id: '716823de-c431-47b4-90b7-8ca57fc574fb'
},
{
group: 'left',
id: 'eeb9a906-9007-481a-8046-3cb284447ba8'
}
]
},
id: 'ac703648-6374-4812-9329-700a01889ac4',
zIndex: 5,
data: {
baseInfo: {
nodeName: '规则',
nodeExplain: '规则校验的描述',
nodeTypeN: '规则校验',
nodeType: 5
},
checkRuleBranchList: [
{
validateType: 1,
validateParam: '',
validateOperator: ''
}
]
}
},
{
shape: 'edge',
attrs: {
line: {
stroke: '#5F95FF',
strokeWidth: 1,
targetMarker: {
name: 'classic',
size: 10
}
}
},
id: 'a7ade588-06b9-46c4-a01c-bcc773b03aa2',
router: {
name: 'manhattan'
},
source: {
cell: '1c3dcf15-7ef2-4438-8d73-21cde6b509a2',
port: '32222ded-423a-42cf-a9ff-702d53b62a8d'
},
target: {
cell: '05cb1da5-124d-4a05-8cbf-4b44fddb30ac',
port: '805ffb33-1ad9-4390-9975-ff8a6d70ba32'
},
zIndex: 6,
labels: [
{
attrs: {
label: { text: '线001' },
body: {
stroke: '#5F95FF'
}
}
}
],
data: {
baseInfo: {
nodeType: '',
nodeName: '线001',
nodeExplain: '开始到antv x6'
},
lineTriggerConditions: {
triggerType: 0,
triggerIntention: '',
globalFlag: 0,
globalVariableKey: '',
globalVariableValue: '',
triggerEvent: 1
}
}
},
{
shape: 'edge',
attrs: {
line: {
stroke: '#5F95FF',
strokeWidth: 1,
targetMarker: {
name: 'classic',
size: 10
}
}
},
id: '1d0d7b58-ced4-4dcc-b0a1-1504da00eeca',
router: {
name: 'manhattan'
},
source: {
cell: '1c3dcf15-7ef2-4438-8d73-21cde6b509a2',
port: '32222ded-423a-42cf-a9ff-702d53b62a8d'
},
target: {
cell: '7f5e19ee-16ff-43d5-9307-57ff4acf14bc',
port: '81dade1c-f256-4f1a-9d39-25e20c78d0d7'
},
zIndex: 7,
labels: [
{
attrs: {
label: { text: '线005' },
body: {
stroke: '#5F95FF'
}
}
}
],
data: {
baseInfo: {
nodeType: '',
nodeName: '先002',
nodeExplain: '开始到h5视频'
},
lineTriggerConditions: {
triggerType: 0,
triggerIntention: '',
globalFlag: 0,
globalVariableKey: '',
globalVariableValue: '',
triggerEvent: 1
}
}
},
{
shape: 'edge',
attrs: {
line: {
stroke: '#5F95FF',
strokeWidth: 1,
targetMarker: {
name: 'classic',
size: 10
}
}
},
id: '4e7dd0c5-d05b-439d-bcb1-60fd5bcbe905',
router: {
name: 'manhattan'
},
source: {
cell: '7f5e19ee-16ff-43d5-9307-57ff4acf14bc',
port: 'bad3f84f-cec3-40e7-aa3e-31617af542c3'
},
target: {
cell: 'f61c66bc-7714-413e-9f1b-cc993138b3f7',
port: '192a83f2-b53e-467d-8bb8-62d3ecde953e'
},
zIndex: 8,
labels: [
{
attrs: {
label: { text: '线002' },
body: {
stroke: '#5F95FF'
}
}
}
],
data: {
baseInfo: {
nodeType: '',
nodeName: '线003',
nodeExplain: 'h5到web自定义节点'
},
lineTriggerConditions: {
triggerType: 0,
triggerIntention: '',
globalFlag: 0,
globalVariableKey: '',
globalVariableValue: '',
triggerEvent: 1
}
}
},
{
shape: 'edge',
attrs: {
line: {
stroke: '#5F95FF',
strokeWidth: 1,
targetMarker: {
name: 'classic',
size: 10
}
}
},
id: '303f76d7-f882-42f9-99fd-6115782d4ea5',
router: {
name: 'manhattan'
},
source: {
cell: 'f61c66bc-7714-413e-9f1b-cc993138b3f7',
port: '13f3d359-1135-4e83-8f39-6e98553d7da1'
},
target: {
cell: 'ac703648-6374-4812-9329-700a01889ac4',
port: 'c1fe8c0c-fa28-4bf4-a688-00d475bee09e'
},
zIndex: 9,
labels: [
{
attrs: {
label: { text: '线003' },
body: {
stroke: '#5F95FF'
}
}
}
],
data: {
baseInfo: {
nodeType: '',
nodeName: '线004',
nodeExplain: 'web到规则校验'
},
lineTriggerConditions: {
triggerType: 0,
triggerIntention: '',
globalFlag: 0,
globalVariableKey: '',
globalVariableValue: '',
triggerEvent: 1
}
}
}
]
}
</script>
<script>
window.onload = function () {
var graph = new X6.Graph({
container: document.getElementById('container'),
width: 800,
height: 600,
background: {
color: '#ecf5f3', // 设置画布背景颜色
},
// 格子属性
grid: {
size: 10,
visible: true,
type: 'dot',
args: [
{
color: '#cccccc',
thickness: 1
},
{
color: '#5F95FF',
thickness: 1,
factor: 4
}
]
},
selecting: {
enabled: true,
multiple: false, // 是否启用点击多选
rubberband: false, // 是否启用框选，默认为 false
movable: true
},
connecting: {
anchor: 'center',
// connectionPoint: 'anchor',
allowBlank: false,
highlight: true,
snap: true,
allowMulti: 'withPort',
interacting: {
vertexDeletable: true
},
// 连线
createEdge() {
return new X6.Shape.Edge({
attrs: {
line: {
stroke: '#5F95FF',
strokeWidth: 1,
targetMarker: {
name: 'classic',
size: 10
}
}
},
router: {
name: 'manhattan'
}
})
},
validateConnection({
sourceMagnet,
targetMagnet
}) {
// if (sourceView === targetView) {
// return false
// }
if (!sourceMagnet) {
return false
}
if (!targetMagnet) {
return false
}
return true
}
},
highlighting: {
magnetAvailable: {
name: 'stroke',
args: {
padding: 4,
attrs: {
strokeWidth: 4,
stroke: 'rgba(223,234,255)'
}
}
}
},
snapline: true,
history: true,
clipboard: {
enabled: true
},
keyboard: {
enabled: true
},
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0