|
@@ -0,0 +1,61 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <canvas id="sourceOver" width="740" height="400" tabindex="0"/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
|
|
|
+ import {SColor, SRect, SCompositeType} from "@persagy-web/draw/lib"
|
|
|
+
|
|
|
+ class Circle extends SGraphItem{
|
|
|
+ constructor(parent, com){
|
|
|
+ super(parent);
|
|
|
+ this.composite = com ? SCompositeType.SourceOver : com;
|
|
|
+ }
|
|
|
+ boundingRect() {
|
|
|
+ return new SRect(-500,-500,1500,1500);
|
|
|
+ }
|
|
|
+ onDraw(painter) {
|
|
|
+ painter.brush.color = SColor.Blue;
|
|
|
+ painter.pen.color = SColor.Transparent;
|
|
|
+ painter.drawRect(0,0,1000,1000);
|
|
|
+
|
|
|
+ painter.composite = SCompositeType.SourceOut;
|
|
|
+
|
|
|
+ painter.brush.color = SColor.Red;
|
|
|
+ painter.drawCircle(0,0,500);
|
|
|
+
|
|
|
+ painter.brush.color = SColor.Transparent;
|
|
|
+ painter.pen.color = SColor.Black;
|
|
|
+ painter.drawRect(-500,-500,1500,1500);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "sourceOver",
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ view:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ init(){
|
|
|
+ this.view = new SGraphView('sourceOver');
|
|
|
+ const scene = new SGraphScene();
|
|
|
+ const circle = new Circle(null, SCompositeType.SourceOut);
|
|
|
+ scene.addItem(circle);
|
|
|
+ this.view.scene = scene;
|
|
|
+ this.view.fitSceneToView();
|
|
|
+ this.view.scalable = false;
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|