|
@@ -1,5 +1,15 @@
|
|
<template>
|
|
<template>
|
|
<div>
|
|
<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="sourceOver" width="740" height="400" tabindex="0"/>
|
|
<canvas id="sourceOver" width="740" height="400" tabindex="0"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
@@ -9,10 +19,20 @@
|
|
import {SColor, SRect, SCompositeType} from "@persagy-web/draw/lib"
|
|
import {SColor, SRect, SCompositeType} from "@persagy-web/draw/lib"
|
|
|
|
|
|
class Circle extends SGraphItem{
|
|
class Circle extends SGraphItem{
|
|
|
|
+ _composite = SCompositeType.SourceOver;
|
|
|
|
+ get composite(){
|
|
|
|
+ return this._composite;
|
|
|
|
+ }
|
|
|
|
+ set composite(v){
|
|
|
|
+ this._composite = v;
|
|
|
|
+ this.update();
|
|
|
|
+ }
|
|
constructor(parent, com){
|
|
constructor(parent, com){
|
|
super(parent);
|
|
super(parent);
|
|
this.composite = com ? SCompositeType.SourceOver : com;
|
|
this.composite = com ? SCompositeType.SourceOver : com;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+
|
|
boundingRect() {
|
|
boundingRect() {
|
|
return new SRect(-500,-500,1500,1500);
|
|
return new SRect(-500,-500,1500,1500);
|
|
}
|
|
}
|
|
@@ -21,14 +41,10 @@
|
|
painter.pen.color = SColor.Transparent;
|
|
painter.pen.color = SColor.Transparent;
|
|
painter.drawRect(0,0,1000,1000);
|
|
painter.drawRect(0,0,1000,1000);
|
|
|
|
|
|
- painter.composite = SCompositeType.SourceOut;
|
|
|
|
|
|
+ painter.composite = this.composite;
|
|
|
|
|
|
painter.brush.color = SColor.Red;
|
|
painter.brush.color = SColor.Red;
|
|
painter.drawCircle(0,0,500);
|
|
painter.drawCircle(0,0,500);
|
|
-
|
|
|
|
- painter.brush.color = SColor.Transparent;
|
|
|
|
- painter.pen.color = SColor.Black;
|
|
|
|
- painter.drawRect(-500,-500,1500,1500);
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -36,7 +52,90 @@
|
|
name: "sourceOver",
|
|
name: "sourceOver",
|
|
data(){
|
|
data(){
|
|
return {
|
|
return {
|
|
- view:''
|
|
|
|
|
|
+ view:'',
|
|
|
|
+ value: SCompositeType.SourceOver,
|
|
|
|
+ options: [
|
|
|
|
+ {
|
|
|
|
+ value: SCompositeType.SourceOver,
|
|
|
|
+ label: '在目标图像上显示源图像'
|
|
|
|
+ },{
|
|
|
|
+ value: SCompositeType.Copy,
|
|
|
|
+ label: '显示源图像。忽略目标图像'
|
|
|
|
+ },{
|
|
|
|
+ value: SCompositeType.DestinationAtop,
|
|
|
|
+ label: '在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示'
|
|
|
|
+ },{
|
|
|
|
+ value: SCompositeType.DestinationIn,
|
|
|
|
+ label: '在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的'
|
|
|
|
+ },{
|
|
|
|
+ value: SCompositeType.DestinationOut,
|
|
|
|
+ label: '在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的'
|
|
|
|
+ },{
|
|
|
|
+ value: SCompositeType.DestinationOver,
|
|
|
|
+ label: '在源图像上方显示目标图像。'
|
|
|
|
+ },{
|
|
|
|
+ value: SCompositeType.Lighter,
|
|
|
|
+ label: '显示源图像 + 目标图像。'
|
|
|
|
+ },{
|
|
|
|
+ value: SCompositeType.SourceAtop,
|
|
|
|
+ label: '在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的'
|
|
|
|
+ },{
|
|
|
|
+ value: SCompositeType.SourceIn,
|
|
|
|
+ label: '在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。'
|
|
|
|
+ },{
|
|
|
|
+ value: SCompositeType.Xor,
|
|
|
|
+ label: '使用异或操作对源图像与目标图像进行组合'
|
|
|
|
+ },{
|
|
|
|
+ value: SCompositeType.SourceOut,
|
|
|
|
+ label: '在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的'
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ circle: null,
|
|
|
|
+ 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() {
|
|
mounted() {
|
|
@@ -46,16 +145,17 @@
|
|
init(){
|
|
init(){
|
|
this.view = new SGraphView('sourceOver');
|
|
this.view = new SGraphView('sourceOver');
|
|
const scene = new SGraphScene();
|
|
const scene = new SGraphScene();
|
|
- const circle = new Circle(null, SCompositeType.SourceOut);
|
|
|
|
- scene.addItem(circle);
|
|
|
|
|
|
+ this.circle = new Circle(null, SCompositeType.SourceOut);
|
|
|
|
+ scene.addItem(this.circle);
|
|
this.view.scene = scene;
|
|
this.view.scene = scene;
|
|
this.view.fitSceneToView();
|
|
this.view.fitSceneToView();
|
|
this.view.scalable = false;
|
|
this.view.scalable = false;
|
|
},
|
|
},
|
|
|
|
+ changeCom(val){
|
|
|
|
+ if (this.circle) {
|
|
|
|
+ this.circle.composite = val;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
-
|
|
|
|
-<style scoped>
|
|
|
|
-
|
|
|
|
-</style>
|
|
|