Kaynağa Gözat

融合文档补充

haojianlong 4 yıl önce
ebeveyn
işleme
99ff3b0cc5

+ 112 - 12
docs/.vuepress/components/engine/composite/sourceOver.vue

@@ -1,5 +1,15 @@
 <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="sourceOver" width="740" height="400" tabindex="0"/>
     </div>
 </template>
@@ -9,10 +19,20 @@
     import {SColor, SRect, SCompositeType} from "@persagy-web/draw/lib"
 
     class Circle extends SGraphItem{
+        _composite = SCompositeType.SourceOver;
+        get composite(){
+            return this._composite;
+        }
+        set composite(v){
+            this._composite = v;
+            this.update();
+        }
         constructor(parent, com){
             super(parent);
             this.composite = com ? SCompositeType.SourceOver : com;
         }
+
+
         boundingRect() {
             return new SRect(-500,-500,1500,1500);
         }
@@ -21,14 +41,10 @@
             painter.pen.color = SColor.Transparent;
             painter.drawRect(0,0,1000,1000);
 
-            painter.composite = SCompositeType.SourceOut;
+            painter.composite = this.composite;
 
             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);
         }
     }
 
@@ -36,7 +52,90 @@
         name: "sourceOver",
         data(){
             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() {
@@ -46,16 +145,17 @@
             init(){
                 this.view = new SGraphView('sourceOver');
                 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.fitSceneToView();
                 this.view.scalable = false;
             },
+            changeCom(val){
+                if (this.circle) {
+                    this.circle.composite = val;
+                }
+            }
         }
     }
 </script>
-
-<style scoped>
-
-</style>

BIN
docs/.vuepress/public/assets/img/logo.png


+ 3 - 0
docs/.vuepress/styles/palette.styl

@@ -15,3 +15,6 @@ canvas {
 canvas:focus{
   outline :none;
 }
+.el-table__body, .el-table__footer, .el-table__header{
+  margin:0;
+}

+ 3 - 5
docs/README.md

@@ -1,12 +1,10 @@
 ---
 home: true
 heroImage: /assets/img/logo.png
-heroText: 上格云
-tagline: 上格云 Web 组件开发文档
+heroText: 博锐尚格
+tagline: 博锐尚格 Web 组件开发文档
 actionText: 快速上手 →
 actionLink: /zh/guide/
 
-footer: MIT Licensed | Copyright © 2016-present 北京上格云技术有限公司
+footer: MIT Licensed | Copyright © 2009-present 博锐尚格科技股份有限公司
 ---
-
-# 参考文档

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

@@ -6,130 +6,8 @@
 
 目标图像 = 您已经放置在画布上的绘图
 
-#### 方式1 source-over
-
-默认。在目标图像上显示源图像。
-
-![融合1](./img/source-over.png) 
-
-定义从左到右的渐变,作为矩形的填充样式:
-
 <engine-composite-sourceOver /> 
 
 ::: details 查看代码
 <<< @/docs/.vuepress/components/engine/composite/sourceOver.vue
 :::
-
-```
-painter.composite = SCompositeType.SourceOver
-```
-
-#### 方式2 source-atop
-
-在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
-
-![融合2](./img/source-atop.png)
-
-```
-painter.composite = SCompositeType.SourceAtop
-```
-
-
-#### 方式3 source-in
-
-在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。
-
-![融合3](./img/source-in.png)
-
-```
-painter.composite = SCompositeType.SourceIn
-```
-
-
-#### 方式4 source-out
-
-在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的。
-
-![融合4](./img/source-out.png)
-
-```
-painter.composite = SCompositeType.SourceOut
-```
-
-
-#### 方式5 destination-over
-
-在源图像上方显示目标图像。
-
-![融合5](./img/destination-over.png)
-
-```
-painter.composite = SCompositeType.DestinationOver
-```
-
-
-#### 方式6 destination-atop
-
-在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
-
-![融合6](./img/destination-atop.png)
-
-```
-painter.composite = SCompositeType.DestinationAtop
-```
-
-
-#### 方式7 destination-in
-
-在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的。
-
-![融合7](./img/destination-in.png)
-
-```
-painter.composite = SCompositeType.DestinationIn
-```
-
-
-#### 方式8 destination-out
-
-在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。
-
-![融合8](./img/destination-out.png)
-
-```
-painter.composite = SCompositeType.DestinationOut
-```
-
-
-#### 方式9 lighter
-
-显示源图像 + 目标图像。
-
-![融合9](./img/lighter.png)
-
-```
-painter.composite = SCompositeType.Lighter
-```
-
-
-#### 方式10 copy
-
-显示源图像。忽略目标图像。
-
-![融合10](./img/copy.png)
-
-```
-painter.composite = SCompositeType.Copy
-```
-
-
-#### 方式11 xor
-
-使用异或操作对源图像与目标图像进行组合。
-
-![融合11](./img/xor.png)
-
-```
-painter.composite = SCompositeType.Xor
-```
-

BIN
docs/guides/engine/img/copy.png


BIN
docs/guides/engine/img/destination-atop.png


BIN
docs/guides/engine/img/destination-in.png


BIN
docs/guides/engine/img/destination-out.png


BIN
docs/guides/engine/img/destination-over.png


BIN
docs/guides/engine/img/lighter.png


BIN
docs/guides/engine/img/source-atop.png


BIN
docs/guides/engine/img/source-in.png


BIN
docs/guides/engine/img/source-out.png


BIN
docs/guides/engine/img/source-over.png


BIN
docs/guides/engine/img/xor.png


BIN
docs/public/assets/img/logo.png