一、前言
基于上一篇文章中已经搭建好的jsPlumb项目,在此篇文章中演示Endpoint的一些参数以及参数的效果。
二、Endpoint创建
在一个节点上创建Endpoint有三种方式:
// 方式一:直接使用字符串指定类型。注意:大小写敏感
// 圆点形
const endpoint1 = jsPlumb.value.addEndpoint(node1.value, {
endpoint: 'Dot'
});
// 矩形
const endpoint2 = jsPlumb.value.addEndpoint(node2.value, {
endpoint: 'Rectangle'
});
// 空白
const endpoint3 = jsPlumb.value.addEndpoint(node3.value, {
endpoint: 'Blank'
});
// 方式二:使用官方定义好的类型DotEndpoint.type、RectangleEndpoint.type、BlankEndpoint.type
// 圆点形
const endpoint1 = jsPlumb.value.addEndpoint(node1.value, {
endpoint: DotEndpoint.type,
});
// 矩形
const endpoint2 = jsPlumb.value.addEndpoint(node2.value, {
endpoint: RectangleEndpoint.type,
});
// 空白
const endpoint3 = jsPlumb.value.addEndpoint(node3.value, {
endpoint: BlankEndpoint.type,
});
// 方式三:使用一个对像,实现更多细节的配置
const endpoint3 = jsPlumb.value.addEndpoint(node3.value, {
endpoint: {
type: 'Dot',
options: {}
}
});
前两种方式都只能简单的创建一个指定类型的Endpoint,因此着重演示第三种方式中,都有哪些参数可以配置。
三、Endpoint配置
endpoint的配置参数都在options
属性中,如代码所示进行控制Endpoint的大小:
const endpoint4 = jsPlumb.value.addEndpoint(node4.value, {
endpoint: {
type: 'Dot',
options: {
radius: 3,
},
},
});
const endpoint5 = jsPlumb.value.addEndpoint(node5.value, {
endpoint: {
type: 'Dot',
options: {
radius: 10,
},
},
});
const endpoint6 = jsPlumb.value.addEndpoint(node6.value, {
endpoint: {
type: 'Rectangle',
options: {
width: 20,
height: 10,
},
},
});
Dot
类型的Endpoint使用radius
参数来控制大小;Rectangle
类型使用width
和height
来控制大小。
根据官方文档所写,Endpoint还有cssClass
和hoverClass
属性可以用来调整样式,试一试配置cssClass
和hoverClass
看看效果:
const endpoint7 = jsPlumb.value.addEndpoint(node7.value, {
endpoint: {
type: 'Dot',
options: {
radius: 10,
cssClass: 'endpoint-css',
},
},
});
const endpoint8 = jsPlumb.value.addEndpoint(node8.value, {
endpoint: {
type: 'Rectangle',
options: {
width: 20,
height: 10,
cssClass: 'endpoint-css',
},
},
});
// 不会触发hover
const endpoint9 = jsPlumb.value.addEndpoint(node9.value, {
endpoint: {
type: 'Dot',
options: {
radius: 12,
hoverClass: 'endpoint-css',
},
},
});
.endpoint-css {
background-color: red;
border: 2px solid blue;
}
从效果可以看到,配置cssClass
无法改变Endpoint的颜色以及边框。原因是界面上所能看到的Endpoint形状,实际是由svg
所实现,我们配置的cssClass
实际上是被添加到了svg
元素上,而SVG
绘制的图形的样式也不是通过style来控制的,实际控制它们的属性参考svg文档;
属性hoverClass
不管鼠标怎么移动,放到哪里都没有触发过所配置的class,不知道是文档问题还是我的使用问题。
虽然配置cssClass不能进行Endpoint的颜色、边框等样式的调整,但是可以用margin
或padding
来调整位置,比如Endpoint有一半遮住了节点,导致节点内的文案会看不清,想要Endpoint往外挪一点:
const endpoint10 = jsPlumb.value.addEndpoint(node10.value, {
endpoint: {
type: 'Dot',
options: {
radius: 10,
cssClass: 'endpoint-margin',
},
},
});
.endpoint-margin {
margin-top: 10px;
}
这样整个Endpoint就在节点外面了,还可以试试设置padding
从而得到一个半圆的Endpoint。那么想要设置Endpoint的颜色等样式该如何设置呢?
方式一:局部设置
由于svg绘制的图形不能通过style设置样式,那么就使用svg图形控制样式的属性进行设置颜色等样式,例如fill
、stroke
等属性,这种方式还是需要先设置好cssClass
:
const endpoint11 = jsPlumb.value.addEndpoint(node11.value, {
endpoint: {
type: 'Dot',
options: {
radius: 6,
cssClass: 'real-css',
},
},
});
svg.real-css circle{
fill: red;
stroke: blue;
stroke-width: 2px;
}
这样就可以对real-css
类下的Dot
类型的Endpoint进行颜色、边框等的设置。当然如果css编写时去掉类的限制就可以实现全局设置,也就是第二种方式。
方式二:全局设置
svg circle, svg rect {
fill: red;
stroke: blue;
stroke-width: 2px;
}
这样就可以完成全局的设置,但是如果你的项目中存在其他的svg图形,就可能产生一些干扰。jsPlumb还提供了一种全局设置的方式:在jsPlumb实例化的时候,设置Endpoint的全局参数:
jsPlumb.value = newInstance({
container: canvas.value,
endpointStyle: {
fill: 'red',
},
});
四、总结
这样就介绍完了对Endpoint的大小、颜色、位置等一些样式的设置,就可以根据实际情况进行调整。至于svg图形的样式属性,每个属性实际的效果,就可以查询svg的文档学习了解。此篇文章中的完整项目代码地址。
标签:Endpoint,const,--,addEndpoint,value,jsPlumb,endpoint From: https://www.cnblogs.com/bencakes/p/18068304