简介
1 .好像有了向线里面插入标签的语法了
edge.insertLabel
edge.appendLabel
2 .由于所有自定义标签都将与该默认标签进行 merge所以我们可以像下面这样简单提供一个标签的文本属性来添加一个标签,edge.defaultLabel里面可以默认一些属性
3 .最简单
graph.addEdge({
source,
target,
label: 'edge label',
})
位置 position
1 .distance:0.5,表示在线的中心位置.一共可以取以下三种值
1 .位于 [0, 1] 之间时，表示标签位于从起点开始，沿长度方向，多少相对长度（比例）的位置。
2 .正数表示标签位于从起点开始，沿边长度方向，偏离起点多少长度的位置。
3 .负数表示标签位于从终点开始，沿长度方向，偏离终点多少长度的位置
全部代码
1 .defaultLabel:放在线上,就是这条线加的都是可以使用这个
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@1.1.1/dist/x6.js"></script> -->
<!-- 实在调试不出来,那就换最新的版本试试 -->
<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
<!-- 线条过渡样式 -->
<!-- 这个实现也有点拉,就是多加几条线,然后每个都展示一点点,那就是说,有多少种颜色,就要加多少线条 -->
</head>
<body>
<h3>基本图形和属性</h3>
<div id="container">
</div>
<script>
const graph=new X6.Graph({
container:document.getElementById('container'),
width:800,
height:600,
grid:true,
})
const edge = graph.addEdge({
source: { x: 40, y: 40 },
target: { x: 320, y: 40 },
//每一条线可以规定自己的label样式,只适合自己
defaultLabel:{
markup:[
{
tagName:'rect',
selector:'body'
},{
tagName:'text',
selector:'label'
}
],
attrs:{
text:{
fill:'#000',
fontSize:14,
textAchor:'middle',
textVerticalAnchor:'middle',
pointerEvents:'none',
},
rect:{
ref:'label',
fill:"#fff",
rx:3,
ry:3,
refWidth:1,
refHeight:1,
refX:0,
refY:0,
fill:"#eee"
}
},
//决定位置:标签在线段上的位置
position:{
//distance:10
//distance:-10
distance:0.5,
offset:{
x:10,
y:10,
},
//决定偏移
angle:40,
//决定角度
options:{
keepGradient:true,
//计算角度的时候,以边当前的角度为基准.也就说如果这个边是有角度的时候,就以现在有的角度为0度开始操作
ensureLegibility:true,
//保证标签文本易读性的属性,基本上可以都加a
}
//这俩个属性要一起配合来实现旋转相关的显示
},
}
})
graph.on('edge:click',(e)=>{
console.log('click',e)
const edge=e.edge
e.e.stopPropagation()
e.edge.appendLabel({
attrs:{
text:{
text:'hello'
}
}
})
console.log(edge.getLabels())
})
</script>
</body>
</html>
html标签
1 .X6.Markup 为什么没有这个的文档呢?擦,目前就是知道就是渲染的时候从<foreignObject>里面拿结构
2 .
const graph = new Graph({
container: this.container,
onEdgeLabelRendered: (args) => {
const { selectors } = args
const content = selectors.foContent as HTMLDivElement
if (content) {
content.style.display = 'flex'
content.style.alignItems = 'center'
content.style.justifyContent = 'center'
ReactDOM.render(<Button size="small">Antd Button</Button>, content)
}
},
})
//也就是这俩一定要搭配起来用
markup: Markup.getForeignObjectMarkup(),
添加多个标签
1 .以为是用appendLabel不停的加,但是实际上是labels里面不停的加,这里是一个数组
<!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@1.1.1/dist/x6.js"></script> -->
<!-- 实在调试不出来,那就换最新的版本试试 -->
<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
<!-- 线条过渡样式 -->
<!-- 这个实现也有点拉,就是多加几条线,然后每个都展示一点点,那就是说,有多少种颜色,就要加多少线条 -->
</head>
<body>
<h3>基本图形和属性</h3>
<div id="container">
</div>
<script>
const graph=new X6.Graph({
container:document.getElementById('container'),
width:800,
height:600,
grid:true,
})
const markup=[
{
tagName: 'rect',
selector: 'labelBody',
},
{
tagName: 'text',
selector: 'labelText',
},
]
const attrs={
labelText: {
text: 'Label 1',
fill: '#ffa940',
textAnchor: 'middle',
textVerticalAnchor: 'middle',
},
labelBody: {
ref: 'labelText',
refX: -8,
refY: -5,
refWidth: '100%',
refHeight: '100%',
refWidth2: 16,
refHeight2: 10,
stroke: '#ffa940',
fill: '#fff',
strokeWidth: 2,
rx: 5,
ry: 5,
},
}
const position={
distance: 0.3,
args: {
keepGradient: true,
ensureLegibility: true,
},
}
const edge = graph.addEdge({
source: { x: 40, y: 40 },
target: { x: 320, y: 40 },
labels:[
{
markup:markup,
attrs:Object.assign({}, Object.assign(attrs,{labelText:{
text:"按钮1"
}})),
position:position
},
//这也太草了吧,Obejct.assign要想返回一个全新的对象,一定要和一个新的,空的做最后的merge,而且这样写也太麻烦了
{
markup:markup,
attrs:Object.assign({},attrs,{labelText:{
text:"按钮2"
}}),
//这里可以看出,可以一直加,并不需要向上面那样嵌套
//position:Object.assign(position,{distance:0.8})
}
]
})
graph.on('edge:click',(e)=>{
console.log('click',e)
const edge=e.edge
e.e.stopPropagation()
e.edge.appendLabel({
attrs:{
text:{
text:'hello'
}
}
})
})
</script>
</body>
</html>
沿着路径的标签
1 .textPath:这里配置要参照的线条
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@1.1.1/dist/x6.js"></script> -->
<!-- 实在调试不出来,那就换最新的版本试试 -->
<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
<!-- 线条过渡样式 -->
<!-- 这个实现也有点拉,就是多加几条线,然后每个都展示一点点,那就是说,有多少种颜色,就要加多少线条 -->
</head>
<body>
<h3>基本图形和属性</h3>
<div id="container">
</div>
<script>
const graph=new X6.Graph({
container:document.getElementById('container'),
width:800,
height:600,
grid:true,
})
graph.addEdge({
source: { x: 40, y: 40 },
target: { x: 320, y: 40 },
vertices:[{x:320,y:209}],
markup:[
{
tagName:'path',
selector:'line'
},
{
tagName:'text',
selector:"label"
},
//只要是有,就必须全套,只写一个tagName:text,是不行的,不会显示出已经有的线条,就算是他已经有了数据,最关键的是,这还决定了最后的dom层级,在这里可以看到tagName:text在path的后面,所以最后渲染出来的效果就是label会在线条上,如果过来,线条就会覆盖文字,离谱..
],
attrs:{
line:{
connection:true,
strokeWidth:20,
fill:"none",
//弧线的话必须要有这个属性,不然就会是一个扇形的效果,会自动填充颜色
targetMarker:'',
//目标点的箭头去掉,
stroke:"#eee",
strokeLinejoin: 'round',
//线的拐角变圆滑
},
label:{
textPath:{
selector:'line',
startOffset:'60%'
},
//表示标签沿着path路径排列
fill:"#52c41a",
textVerticalAnchor: 'middle',
textAnchor: 'middle',
//text元素,与y坐标在垂直方向的对齐方式
text:"中华人民共和国万岁",
}
}
})
</script>
</body>
</html>
网友评论