Browse Source

文档补充

haojianlong 4 years ago
parent
commit
a5361b3c73

+ 61 - 0
docs/.vuepress/components/engine/composite/sourceOver.vue

@@ -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>

+ 5 - 0
docs/.vuepress/components/engine/gradient/GradRect.ts

@@ -28,5 +28,10 @@ export class GradRect extends SGraphItem{
         painter.pen.color = SColor.Black;
         painter.brush.gradient = this.gradient;
         painter.drawRect(0,0,1000,1000);
+        if (this.gradient instanceof  SRadialGradient) {
+            painter.brush.color = SColor.Transparent;
+            painter.drawCircle(this.gradient.x1, this.gradient.y1, this.gradient.r1);
+            painter.drawCircle(this.gradient.x2, this.gradient.y2, this.gradient.r2);
+        }
     }
 }

+ 8 - 0
docs/guides/engine/composite.md

@@ -12,6 +12,14 @@
 
 ![融合1](./img/source-over.png) 
 
+定义从左到右的渐变,作为矩形的填充样式:
+
+<engine-composite-sourceOver /> 
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/engine/composite/sourceOver.vue
+:::
+
 ```
 painter.composite = SCompositeType.SourceOver
 ```

BIN
docs/guides/engine/img/line-gradient.png


BIN
docs/guides/engine/img/line-gradient2.png


BIN
docs/guides/engine/img/radial-gradient.png


BIN
docs/guides/engine/img/radial-gradient2.png


BIN
docs/guides/engine/img/radial-gradient3.png


BIN
docs/guides/engine/img/radial-gradient4.png


BIN
docs/guides/engine/img/radial-gradient5.png


BIN
docs/guides/engine/img/radial-gradient6.png


BIN
docs/guides/engine/img/radial-gradient7.png