# 绘制带有末端样式的线段
选择起始点样式 选择结束点样式
# 函数入参
传入线段和末端样式style{begin?:SArrowStyleType,end?:SArrowStyleType}
drawArrowLine(line: SLine, style?: SArrow):void
1
传入线段的两个点和末端样式
drawArrowLine(p1: SPoint, p2: SPoint, style?: SArrow): void;
1
传入线段的两个点的坐标值和末端样式
drawArrowLine(x1: number,y1: number,x2: number,y2: number,style?: SArrow): void;
1
查看代码
<template>
<div>
<el-table :data="tableData" style="width: 100%" class="elementTable">
<el-table-column prop="val" label="值" width="180"></el-table-column>
<el-table-column prop="desc" label="描述"></el-table-column>
</el-table>
<div style="margin: 14px 0;">
<span style="font-size: 14px;">选择起始点样式</span>
<el-select placeholder="请选择" @change="changeStart" size="small" v-model="begin">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<span style="font-size: 14px;">选择结束点样式</span>
<el-select placeholder="请选择" @change="changeEnd" size="small" v-model="end">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
<canvas :id="id" width="740" height="400" tabindex="0"/>
</div>
</template>
<script lang="ts">
import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
import {SRect, SArrowStyleType, SColor, SPoint, SPainter} from "@persagy-web/draw/lib"
import { Component, Prop, Vue } from "vue-property-decorator";
import { v1 as uuid } from "uuid";
class Polyline extends SGraphItem{
/** 起始点样式 */
_begin = SArrowStyleType.Basic;
get begin():SArrowStyleType{
return this._begin;
}
set begin(v:SArrowStyleType){
this._begin = v;
this.update();
}
/** 结束点样式 */
_end = SArrowStyleType.Basic;
get end():SArrowStyleType{
return this._end;
}
set end(v:SArrowStyleType){
this._end = v;
this.update();
}
pointList: SPoint[] = [
new SPoint(0, 0),
new SPoint(1000, 1000),
new SPoint(1200, 1800),
new SPoint(1800, 1800),
new SPoint(2000, 100),
// new SPoint(0, 0)
];
boundingRect():SRect {
return new SRect(0,0,2000,1800);
}
onDraw(painter:SPainter) {
painter.pen.lineWidth = painter.toPx(1);
const style = {
begin: this.begin,
end: this.end
};
for(let i = 0; i < this.pointList.length - 1; i++){
painter.drawArrowLine(this.pointList[i], this.pointList[i+1], style)
}
}
}
@Component
export default class ShadowCanvas extends Vue {
id: string = uuid();
options = [
{
value: SArrowStyleType.None,
label: 'None'
},{
value: SArrowStyleType.Basic,
label: 'Basic'
},{
value: SArrowStyleType.Triangle,
label: 'Triangle'
},{
value: SArrowStyleType.Diamond,
label: 'Diamond'
},{
value: SArrowStyleType.Square,
label: 'Square'
},{
value: SArrowStyleType.Circle,
label: 'Circle'
}
];
view: SGraphView | undefined;
item: Polyline | undefined;
tableData = [
{
val: 'None',
desc: '无样式'
},{
val: 'Basic',
desc: '基本箭头'
},
{
val: 'Triangle',
desc: '三角形箭头'
},
{
val: 'Diamond',
desc: '菱形箭头'
},
{
val: 'Square',
desc: '方形箭头'
},
{
val: 'Circle',
desc: '圆形箭头'
},
];
begin:SArrowStyleType = SArrowStyleType.Basic;
end:SArrowStyleType = SArrowStyleType.Basic;
mounted():void {
this.init()
};
init(){
this.view = new SGraphView(this.id);
const scene = new SGraphScene();
this.item = new Polyline(null);
scene.addItem(this.item);
this.view.scene = scene;
this.view.fitSceneToView();
this.view.scalable = false;
};
changeStart(val: SArrowStyleType):void{
this.item!!.begin = val
};
changeEnd(val: SArrowStyleType):void{
this.item!!.end = val
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
# 类型
# 无
不绘制任意箭头
# 标准箭头
绘制如下类型箭头
# 画法描述
1.将坐标系平移至线段终点;
2.计算出线段与x轴夹角,并将坐标系旋转至x轴与线段重合;
3.设定箭头夹角为θ=π/2,末端三角形边长d=5,则箭头上下端与x轴夹角为π/4,根据此角度与边长计算上下端坐标;
4.直接绘制原点与上下端连线的折线图形即可;
// 定义箭头长度
const d = 5;
// 箭头横坐标
const x1 = d * Math.cos(Math.PI / 4);
// 箭头纵坐标
const y1 = d * Math.sin(Math.PI / 4);
// 线段与x轴夹角
const fo = Math.atan(line.dy / line.dx);
const ang = line.dx >= 0 ? fo : fo + Math.PI;
this.save();
this.translate(line.x2, line.y2);
this.rotate(ang);
this.engine.drawPolyline([
new SPoint(-x1, y1),
new SPoint(0, 0),
new SPoint(-x1, -y1)
]);
this.restore();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 三角形
绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色
# 画法描述
坐标点位置计算与标准箭头类似,只是箭头夹角θ=π/6,且最后绘制图形为多边形
// 定义箭头长度
const d = 5;
// 箭头横坐标
const x1 = d * Math.cos(Math.PI / 4);
// 箭头纵坐标
const y1 = d * Math.sin(Math.PI / 4);
// 线段与x轴夹角
const fo = Math.atan(line.dy / line.dx);
const ang = line.dx >= 0 ? fo : fo + Math.PI;
this.save();
this.translate(line.x2, line.y2);
this.rotate(ang);
this.engine.drawPolygon([
new SPoint(-x1, y1),
new SPoint(0, 0),
new SPoint(-x1, -y1)
]);
this.restore();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 圆
绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色
# 画法描述
1.将坐标系平移至线段终点;
2.设定圆半径r=5,计算圆心坐标为(-r,0),绘制圆形即可
// 定义箭头长度
const d = 5;
// 线段与x轴夹角
const fo = Math.atan(line.dy / line.dx);
const ang = line.dx >= 0 ? fo : fo + Math.PI;
this.save();
this.translate(line.x2, line.y2);
this.rotate(ang);
this.engine.drawCircle(-d / 2, 0, d / 2);
this.restore();
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 菱形
绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色
# 画法描述
坐标点位置计算与标准箭头类似,只需多计算一个点,绘制图形为多边形
// 定义箭头长度
const d = 5;
// 箭头横坐标
const x1 = d * Math.cos(Math.PI / 4);
// 箭头纵坐标
const y1 = d * Math.sin(Math.PI / 4);
// 线段与x轴夹角
const fo = Math.atan(line.dy / line.dx);
const ang = line.dx >= 0 ? fo : fo + Math.PI;
this.save();
this.translate(line.x2, line.y2);
this.rotate(ang);
this.engine.drawPolygon([
new SPoint(-x1, y1),
new SPoint(0, 0),
new SPoint(-x1, -y1),
new SPoint(-Math.sqrt(2) * d, 0)
]);
this.restore();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 方形
绘制如下类型箭头,通过画笔颜色和画刷颜色控制笔触颜色和填充颜色
# 画法描述
1.将坐标系平移至线段终点;
2.可以计算四个顶点坐标,绘制多边形;亦可移至计算出的原点,直接绘制矩形;
// 定义箭头长度
const d = 5;
// 线段与x轴夹角
const fo = Math.atan(line.dy / line.dx);
const ang = line.dx >= 0 ? fo : fo + Math.PI;
this.save();
this.translate(line.x2, line.y2);
this.rotate(ang);
this.engine.drawPolygon([
new SPoint(-d, d / 2),
new SPoint(0, d / 2),
new SPoint(0, -d / 2),
new SPoint(-d, -d / 2)
]);
this.restore();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15