11 - 画布滚动,滚轮缩放,小地图
2022-06-01 本文已影响0人
skoll
简介
1 .使画面具备滚动,平移,居中,缩放等能力,这些都必须是scroller之后才会有的效果
scroller:{
enabled:true,
pannable:{
enabled:true,
eventTypes:['rightMouseDown','leftMouseDown'],
//决定了左键和右键都可以拖
},
modifiers:['alt'],
//在之前的基础上,必须有alt才能拖动
autoResize:true,
//是否自动缩放
}
2 .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
<style>
.snapline-prefix-cls {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
}
</style>
</head>
<body>
<div id="container">
</div>
<button id="copy">复制</button>
<button id="paste">粘贴</button>
<button id="cut">剪切</button>
<button id="undo">回退</button>
<button id="redo">前进</button>
<script>
const copy=document.querySelector('#copy')
const paste=document.querySelector('#paste')
const cut=document.querySelector('#cut')
const undo=document.querySelector('#undo')
const redo=document.querySelector('#redo')
const graph=new X6.Graph({
container:document.getElementById('container'),
width:800,
height:600,
background:{
color:'#fffbe6',
},
scroller:{
enabled:true,
className:'my-csroller',
//附加样式名,用于定义样式,默认为undefined
width:500,
height:300,
//画布的宽度和高度,这里是除了上面的,自己这边还能加
pannable:{
enabled:true,
eventTypes:['leftMouseDown','rightMouseDown']
//支持左键和右键平移
},
//空白地方启用画布平移能力
modifiers:'ctrl',
//修饰键,现在必须ctrl+左键才会
cursor:"grab",
//鼠标样式
padding:20,
//画布四周的padding边距.保证画布在滚动时,在宽度和高度方向至少有minVisibleWidth和minVisibleHeight大小的画布可见
pageVisible:true,
//是否分页
pageBreak:true,
pageHeight:150,
}
})
const rectA=graph.addNode({
x:60,
y:50,
width:180,
height:100,
label:"default",
})
const rectB= graph.addNode({
x:160,
y:200,
width:100,
height:50,
label:"Rect with Ports",
})
</script>
</body>
</html>
2 .然后就是一堆移动视图的方法,把某个点,某个矩形移动到
1 .之前用scrollBetter,仅仅有一个移动到某个位置scrollTo()这种的
2 .https://x6.antv.vision/zh/docs/tutorial/basic/scroller#cursor
3 .目前用过的只有画布到中间,某个节点到中间.用于在动画的时候聚焦节点
4 .graph.scrollToPoint(x?: number, y?: number, options?: ScrollOptions) 将某个点滚动到视野中间
5 .graph.scrollToContent(options?: ScrollOptions) 使画布的内容中心滚动到视口中间
6 .graph.scrollToCell(cell: Cell, options?: ScrollOptions) 滚动画布，使节点/边的中心位于画布的视口中心。
7 .centerCell(options?: CenterOptions) 将节点/边的中心与视口中心对齐。如果不能通过滚动来对齐，则自动为 Scroller 的容器增加一定的 padding 边距来强制对齐
8 .老实说.这么多看着差不多的,有点不知道区别是什么..
滚轮缩放
1 .鼠标滚轮的默认行为是滚动页面,启用Scroller后用域滚动画布 ,某些情况下我们需要用滚轮来缩放画布,为了避免交互冲突,通常配合修饰符来实现滚轮缩放画布
2 .滚轮主要是用来缩放操作
mousewheel:{
enabled:true,
modifiers:['ctrl','meta'],
global:true,
//是否是全局事件
factor:1.1,
}
小地图
1 .小地图是完整画布的预览,支持通过平移缩放小地图的视口来平移缩放画布,需要搭配scroller使用
2 .
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
<style>
.snapline-prefix-cls {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
}
</style>
</head>
<body>
<div id="container">
</div>
<div id="mini-container">
</div>
<button id="copy">复制</button>
<button id="paste">粘贴</button>
<button id="cut">剪切</button>
<button id="undo">回退</button>
<button id="redo">前进</button>
<script>
const copy=document.querySelector('#copy')
const paste=document.querySelector('#paste')
const cut=document.querySelector('#cut')
const undo=document.querySelector('#undo')
const redo=document.querySelector('#redo')
const graph=new X6.Graph({
container:document.getElementById('container'),
width:800,
height:600,
background:{
color:'#fffbe6',
},
scroller:{
enabled:true,
className:'my-csroller',
//附加样式名,用于定义样式,默认为undefined
width:500,
height:300,
//画布的宽度和高度,这里是除了上面的,自己这边还能加
pannable:{
enabled:true,
eventTypes:['leftMouseDown','rightMouseDown']
//支持左键和右键平移
},
//空白地方启用画布平移能力
modifiers:'alt',
//修饰键,现在必须ctrl+左键才会
cursor:"grab",
//鼠标样式
padding:20,
//画布四周的padding边距.保证画布在滚动时,在宽度和高度方向至少有minVisibleWidth和minVisibleHeight大小的画布可见
pageVisible:true,
//是否分页
pageBreak:true,
pageHeight:150,
},
mousewheel:{
enabled:true,
modifiers:['alt'],
global:true,
//是否为全局事件:如果是全局事件,就绑定在document上面,否则绑定在画布容器上
factor:1,
//缩放比例
minScale:0.5,
//最小缩放比
maxScale:2,
zoomAtMousePosition:true,
//是否见鼠标作为位置中心进行缩放
modifiers:'alt|ctrl&shift'
//同时按下alt+shift,或者ctrl+shift
},
minimap:{
enabled:true,
container:document.getElementById('mini-container'),
width:100,
height:100,
scalable:false,
//小地图是否可以缩放
minScale:0.1,
//最小缩放比
maxScale:2,
//最大缩放比
graphOptions:{
//自定义小地图的Graph的选项
async:true,
getCellView(cell){
if(cell.isNode){
return SimpleNodeView
}
},
createCellView(cell){
if(cell.isEdge){
return cell
}
}
}
}
})
const rectA=graph.addNode({
x:60,
y:50,
width:180,
height:100,
label:"default",
})
const rectB= graph.addNode({
x:160,
y:200,
width:100,
height:50,
label:"Rect with Ports",
})
</script>
</body>
</html>
