# 颜色与样式
# 颜色
# 内置颜色
SColor 内置了一些常用颜色。见下表：
| SColor.Transparent | #00000000 |
| SColor.Black | #00000000 |
| SColor.DarkBlue | #000080 |
| SColor.Blue | #0000FF |
| SColor.DarkGreen | #008000 |
| SColor.Green | #00FF00 |
| SColor.DarkCyan | #008080 |
| SColor.Cyan | #00FFFF |
| SColor.DarkRed | #800000 |
| SColor.Red | #FF0000 |
| SColor.DarkMagenta | #800080 |
| SColor.Magenta | #FF00FF |
| SColor.DarkYellow | #808000 |
| SColor.Yellow | #00000000 |
| SColor.White | #FFFFFF |
| SColor.DarkGray | #808080 |
| SColor.Gray | #A0A0A0 |
| SColor.LightGray | #C0C0C0 |
# 填充色实例
# 轮廓色实例
# 阴影
阴影扩散范围 :
x轴偏移量 :
y轴偏移量 :
阴影颜色 :
查看代码
<template>
<div style="margin-top: 10px;">
阴影扩散范围 : <el-input-number @change="changeblur" v-model="blurl" size="mini" style="width: 100px"></el-input-number>
x轴偏移量 : <el-input-number @change="changeX" v-model="X" size="mini" style="width: 100px"></el-input-number>
y轴偏移量 : <el-input-number @change="changeY" v-model="Y" size="mini" style="width: 100px"></el-input-number>
阴影颜色 : <el-color-picker @change="changeColor" v-model="color" size="mini" style="vertical-align: middle"></el-color-picker>
<canvas :id="id" width="740" height="400" tabindex="0"></canvas>
</div>
</template>
<script lang="ts">
import { SColor, SPainter } from "@persagy-web/draw/lib";
import { Component, Prop, Vue } from "vue-property-decorator";
import {SGraphView} from "@persagy-web/graph/lib";
import { v1 as uuid } from "uuid";
class shadowView extends SGraphView {
shadowBlur:number;
shadowColor:SColor;
shadowOffsetX:number;
shadowOffsetY:number;
constructor(id: string) {
super(id);
this.shadowBlur = 10;
this.shadowColor = new SColor('#00000060');
this.shadowOffsetX = 10;
this.shadowOffsetY = 10;
}
onDraw(canvas:SPainter) {
canvas.clearRect(0,0,740,400);
canvas.pen.lineWidth = 1;
canvas.pen.color = SColor.Black;
canvas.brush.color = SColor.White;
canvas.shadow.shadowBlur = this.shadowBlur;
canvas.shadow.shadowColor = this.shadowColor;
canvas.shadow.shadowOffsetX = this.shadowOffsetX;
canvas.shadow.shadowOffsetY = this.shadowOffsetY;
canvas.drawRect(300,50,100,100);
canvas.drawRect(270,100,100,100);
}
}
@Component
export default class ShadowCanvas extends Vue {
id: string = uuid();
view: shadowView | undefined;
blurl: number = 10;
X: number = 10;
Y: number = 10;
color: string = "#cccccc";
mounted() {
this.view = new shadowView(this.id);
}
// 修改扩散距离
changeblur(v:number):void {
this.view!!.shadowBlur = v;
this.view!!.update()
};
// x轴偏移量
changeX(v:number){
this.view!!.shadowOffsetX = v;
this.view!!.update()
};
// y轴偏移量
changeY(v:number){
this.view!!.shadowOffsetY = v;
this.view!!.update()
};
// 修改颜色
changeColor(v:string){
this.view!!.shadowColor = new SColor(v);
this.view!!.update()
}
}
</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
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