流程图的绘制中,箭头用来表示步骤或过程的方向,对于整个流程图所表达的逻辑起着至关重要的作用,对于不同风格的流程图在箭头的大小、颜色、形状上有着不同的诉求,因此自定义箭头可以极大的丰富流程图的表达。
方式选择
下面介绍了3中自定义箭头的方式,如何选择自己更适合哪种方式呢?
- 选择方式一:如果觉得当前的箭头大小不合适,指向修改下大小,那就选择方式一,成本低只用设置下主题。
- 选择方式二:如果觉得不光大小不合适,颜色也不是你想要的,那就选择方式二,这个需要自定义连线,复写箭头样式方法。
- 选择方式三:如果觉得箭头的形状不是你想要的,需要自定义形状,那就选择方式三,需要自定义连线以及箭头方法,demo中列举了集中常见的箭头path,拿去用就行。如果是设计了独有的箭头,如果是svg参考下面的代码把svg中各个属性替换到里面就行。如果是图片参考下面的代码替换图片地址就行。
demo线上地址:xinxin93.github.io/logicflow_a…
demo代码:github.com/xinxin93/lo…
Logicflow箭头源码分析:juejin.cn/post/716391…
方式一:自定义箭头大小
如果只想修改箭头的大小,可以通过设置主题进行设置。
lf.setTheme({
arrow: {
offset: 20, // 箭头垂线长度
verticalLength: 4, // 箭头底线长度
}
})
方式二:自定义箭头颜色
箭头颜色默认是跟随连线的颜色的,如果想要自定义箭头颜色,可以通过复写getArrowStyle进行修改。
import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core';
class View extends PolylineEdge {
getArrowStyle() {
const style = super.getArrowStyle();
return {
...style,
fill: 'green',
stroke: 'green',
}
}
}
export function registerPolyline(lf) {
lf.register({type: 'polyline', view: View, model: PolylineEdgeModel})
方式三:自定义箭头图形
自定义箭头图形复写getEndArrow实现,箭头图形可以通过svg的path标签、image标签进行自定义。我的示例代码中实现了多种箭头图形样式,具体展示哪种箭头properties属性中进行定义,因此整个getEndArrow函数非常大,如果你的需求只会有一种箭头样式可以简化代码,不用在properties中判断要展示哪种直接返回要展示的图形就可以。
class View extends PolylineEdge {
getEndArrow() {
const { model } = this.props;
const { id, properties } = model;
const { stroke, strokeWidth } = this.getArrowStyle();
const { arrowEnd } = properties;
let pathAttr = {
stroke,
strokeWidth,
}
// ArrorLis 枚举在最下面给出
pathAttr = arrowEnd ? {...pathAttr, ...ArrorList[arrowEnd]} : {...pathAttr, ...ArrorList['2']};
if (pathAttr.type === 'custome1') {
return h('svg', { x: -28, y: -15, width: 30, height: 30, viewBox: "0 0 1024 1024"}, [
h('path', {
d: 'M0.1 884.5l1024-372.4H279.4L0.1 884.5z',
fill: '#2868F0',
}),
h('path', {
d: 'M279.4 512.1h744.7L0.1 139.8l279.3 372.3z',
fill: '#043EB8',
}),
]);
} else if (pathAttr.type === 'custome2') {
return h('image', {
x: -17,
y: -10,
width: 20,
height: 20,
xlinkHref: 'src/assets/custome2.png'
})
} else if (pathAttr.type === 'custome3') {
return h('image', {
x: -23,
y: -15,
width: 30,
height: 30,
xlinkHref: 'src/assets/custome3.png',
})
} else if (pathAttr.d) {
if (pathAttr.fill) {
pathAttr.fill = stroke
} else if (pathAttr.fillColor){
pathAttr.fill = pathAttr.fillColor
} else {
pathAttr.fill = 'none'
}
return (
h('path', { ...pathAttr })
)
} else {
return (
h(pathAttr.tag, { ...pathAttr, ...pathAttr.tagAttr })
);
}
}
}
自定义起点箭头
起点的箭头默认是不展示的,在连线view的getArrow中已经定义了起点箭头,在model中没有给出其定义,因此未展示。想要展示起点箭头,需要在model中定义起点的id。关于起点箭头图形的自定义与上面提到的终点箭头自定义是类似的,不过起点和终点箭头如果图形是一样的话,可以通过设置相同的path,然后旋转180度实现。
class Model extends PolylineEdgeModel {
// 展示起点箭头
setAttributes() {
const { properties } = this;
if (properties.arrowStart) {
this.arrowConfig.markerStart = `url(#marker-start-${this.id})`
}
}
}
class View extends PolylineEdge {
getStartArrow() {
const { model } = this.props;
const { id, properties } = model;
const { stroke, strokeWidth } = this.getArrowStyle();
const { arrowStart } = properties;
let pathAttr = {
stroke,
strokeWidth,
transform: 'rotate(180)'
}
// ArrorLis 枚举在最下面给出
pathAttr = arrowStart ? {...pathAttr, ...ArrorList[arrowStart]} : {...pathAttr, ...ArrorList['1']};
console.log(pathAttr);
if (pathAttr.type === 'custome1') {
return h('svg', { x: 2, y: -15, width: 30, height: 30, viewBox: "0 0 1024 1024"}, [
h('g', { transform: 'translate(1024 1024) rotate(180)'}, [
h('path', {
d: 'M0.1 884.5l1024-372.4H279.4L0.1 884.5z',
fill: '#2868F0',
}),
h('path', {
d: 'M279.4 512.1h744.7L0.1 139.8l279.3 372.3z',
fill: '#043EB8',
}),
]),
]);
} else if (pathAttr.type === 'custome2') {
return h('image', {
x: -17,
y: -10,
width: 20,
height: 20,
xlinkHref: 'src/assets/custome2.png',
transform: 'rotate(180)'
})
} else if (pathAttr.type === 'custome3') {
return h('image', {
x: -23,
y: -15,
width: 30,
height: 30,
xlinkHref: 'src/assets/custome3.png',
transform: 'rotate(180)'
})
} else if (pathAttr.d) {
if (pathAttr.fill) {
pathAttr.fill = stroke
} else if (pathAttr.fillColor){
pathAttr.fill = pathAttr.fillColor
} else {
pathAttr.fill = 'none'
}
return (
h('path', { ...pathAttr })
)
} else {
return (
h(pathAttr.tag, { ...pathAttr, ...pathAttr.tagAttr })
);
}
自定义箭头path枚举
前面自定义箭头方式三示例中用到的path示例
// 自定义箭头path枚举列表
export const ArrorList = {
1: {},
2: {
d: 'M 0 0 -10 -5 -10 5 z',
fill: true,
},
3: {
d: 'M 0 0 -10 5',
},
4: {
d: 'M -10 0 -20 -5 -30 0 -20 5 z',
fill: true
},
5: {
d: 'M 0 0 -10 -5 -10 5 z',
fillColor: '#f7f9ff',
},
6: {
d: 'M -10 -5 0 0 -10 5',
},
7: {
d: 'M -10 0 -20 -5 -30 0 -20 5 z',
fillColor: '#f7f9ff',
},
8: {
tag: 'circle',
tagAttr: {
cx: -10,
cy: 0,
r: 5,
fill: '#f7f9ff',
},
},
101: { type: 'custome1'},
102: { type: 'custome2'},
103: { type: 'custome3'}
}