|
@@ -10,33 +10,35 @@
|
|
|
<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="id" width="740" height="400" tabindex="0"/>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script lang="ts">
|
|
|
import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
|
|
|
- import {SColor, SRect, SCompositeType} from "@persagy-web/draw/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(){
|
|
|
+ get composite():SCompositeType{
|
|
|
return this._composite;
|
|
|
}
|
|
|
- set composite(v){
|
|
|
+ set composite(v:SCompositeType){
|
|
|
this._composite = v;
|
|
|
this.update();
|
|
|
}
|
|
|
- constructor(parent, com){
|
|
|
+ constructor(parent: SGraphItem | null, com:SCompositeType){
|
|
|
super(parent);
|
|
|
this.composite = com ? SCompositeType.SourceOver : com;
|
|
|
}
|
|
|
|
|
|
|
|
|
- boundingRect() {
|
|
|
+ boundingRect(): SRect {
|
|
|
return new SRect(-500,-500,1500,1500);
|
|
|
}
|
|
|
- onDraw(painter) {
|
|
|
+ onDraw(painter: SPainter): void {
|
|
|
painter.brush.color = SColor.Blue;
|
|
|
painter.pen.color = SColor.Transparent;
|
|
|
painter.drawRect(0,0,1000,1000);
|
|
@@ -47,113 +49,105 @@
|
|
|
painter.drawCircle(0,0,500);
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- export default {
|
|
|
- name: "sourceOver",
|
|
|
- data(){
|
|
|
- return {
|
|
|
- view:'',
|
|
|
+ @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,
|
|
|
- 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: 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: '使用异或操作对源图像与目标图像进行组合。'
|
|
|
- }
|
|
|
- ]
|
|
|
+ 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() {
|
|
|
+ ];
|
|
|
+ mounted():void {
|
|
|
this.init()
|
|
|
- },
|
|
|
- methods:{
|
|
|
- init(){
|
|
|
- this.view = new SGraphView('sourceOver');
|
|
|
- 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){
|
|
|
- if (this.circle) {
|
|
|
- this.circle.composite = val;
|
|
|
- }
|
|
|
+ };
|
|
|
+ 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;
|
|
|
}
|
|
|
}
|
|
|
}
|