# 融合
目录
通过canvas的属性globalCompositeOperation,设置多个图形之间的绘制方式
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。
选择融合方式
查看代码
<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 v-model="value" placeholder="请选择" @change="changeCom" size="small">
<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 {SColor, SRect, SCompositeType, SPainter} from "@persagy-web/draw/lib"
import { Component, Prop, Vue } from "vue-property-decorator";
import { v1 as uuid } from "uuid";
class Circle extends SGraphItem{
_composite = SCompositeType.SourceOver;
get composite():SCompositeType{
return this._composite;
}
set composite(v:SCompositeType){
this._composite = v;
this.update();
}
constructor(parent: SGraphItem | null, com:SCompositeType){
super(parent);
this.composite = com ? SCompositeType.SourceOver : com;
}
boundingRect(): SRect {
return new SRect(-500,-500,1500,1500);
}
onDraw(painter: SPainter): void {
painter.brush.color = SColor.Blue;
painter.pen.color = SColor.Transparent;
painter.drawRect(0,0,1000,1000);
painter.composite = this.composite;
painter.brush.color = SColor.Red;
painter.drawCircle(0,0,500);
}
}
@Component
export default class CompositeCanvas extends Vue {
view: SGraphView | undefined;
id: string = uuid();
value: SCompositeType = SCompositeType.SourceOver;
options = [{
value: SCompositeType.DestinationAtop,
label: 'DestinationAtop'
},{
value: SCompositeType.DestinationIn,
label: 'DestinationIn'
},{
value: SCompositeType.DestinationOut,
label: 'DestinationOut'
},{
value: SCompositeType.DestinationOver,
label: 'DestinationOver'
},{
value: SCompositeType.SourceAtop,
label: 'SourceAtop'
},{
value: SCompositeType.SourceIn,
label: 'SourceIn'
},{
value: SCompositeType.SourceOver,
label: 'SourceOver'
},{
value: SCompositeType.SourceOut,
label: 'SourceOut'
},{
value: SCompositeType.Xor,
label: 'Xor'
},{
value: SCompositeType.Lighter,
label: 'Lighter'
},{
value: SCompositeType.Copy,
label: 'Copy'
}];
circle: Circle | undefined;
tableData = [{
val: 'source-over',
desc: '默认。在目标图像上显示源图像。'
},{
val: 'source-atop',
desc: '在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。'
},
{
val: 'source-in',
desc: '在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。'
},
{
val: 'source-out',
desc: '在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。'
},
{
val: 'destination-over',
desc: '在源图像上显示目标图像。'
},
{
val: 'destination-atop',
desc: '在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。'
},
{
val: 'destination-in',
desc: '在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。'
},
{
val: 'destination-out',
desc: '在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。'
},
{
val: 'lighter',
desc: '显示源图像 + 目标图像。'
},
{
val: 'copy',
desc: '显示源图像。忽略目标图像。'
},
{
val: 'xor',
desc: '使用异或操作对源图像与目标图像进行组合。'
}
];
mounted():void {
this.init()
};
init():void{
this.view = new SGraphView(this.id);
const scene = new SGraphScene();
this.circle = new Circle(null, SCompositeType.SourceOut);
scene.addItem(this.circle);
this.view.scene = scene;
this.view.fitSceneToView();
this.view.scalable = false;
};
changeCom(val:SCompositeType):void{
if (this.circle) {
this.circle.composite = 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
144
145
146
147
148
149
150
151
152
153
154
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
144
145
146
147
148
149
150
151
152
153
154