소스 검색

阴影效果示例

haojianlong 4 년 전
부모
커밋
2beb380e72

+ 3 - 0
docs/.vuepress/components/example/web/graph/.idea/.gitignore

@@ -0,0 +1,3 @@
+
+# Default ignored files
+/workspace.xml

+ 6 - 0
docs/.vuepress/components/example/web/graph/.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>

+ 8 - 0
docs/.vuepress/components/example/web/graph/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/graph.iml" filepath="$PROJECT_DIR$/.idea/graph.iml" />
+    </modules>
+  </component>
+</project>

+ 6 - 0
docs/.vuepress/components/example/web/graph/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/../../../../../.." vcs="Git" />
+  </component>
+</project>

+ 2 - 2
docs/.vuepress/components/example/web/graph/scene/SImgTextItem.vue

@@ -94,8 +94,8 @@
                 return item;
             });
             this.update();
-            this.textItem.text = "请填写文本";
-            this.textItem.moveTo(16, -6);
+            this.textItem.text = "x2";
+            this.textItem.moveTo(18, 6);
             this.moveable = true;
             this.selectable = true;
         }

+ 83 - 0
docs/.vuepress/components/example/web/graph/style/shadow.vue

@@ -0,0 +1,83 @@
+<template>
+    <div>
+        阴影扩散范围:<el-input-number @change="changeblur" v-model="blurl" size="mini" style="width: 100px"></el-input-number>
+        x轴偏移量:<el-input-number @change="changeX" v-model="X" size="mini" style="width: 100px"></el-input-number>
+        y轴偏移量:<el-input-number @change="changeY" v-model="Y" size="mini" style="width: 100px"></el-input-number>
+        <el-color-picker @change="changeColor" v-model="color" size="mini" style="vertical-align: middle"></el-color-picker>
+        <canvas id="shadow" width="740" height="400" tabindex="0"></canvas>
+    </div>
+</template>
+
+<script>
+    import {SGraphScene, SGraphView} from "@saga-web/graph/lib";
+    import { SCanvasView, SColor, SPainter } from "@saga-web/draw/lib";
+
+    class shadowView extends SCanvasView {
+
+        constructor(id) {
+            super(id);
+            this.blurArr = [1,2,3,4,5,6,7,8,9,10];
+            this.shadowBlur = 10;
+            this.shadowColor = new SColor('#CCCCCC');
+            this.shadowOffsetX = 10;
+            this.shadowOffsetY = 10;
+        }
+
+        onDraw(canvas) {
+            canvas.clearRect(0,0,740,400);
+
+            canvas.pen.lineWidth = 1;
+            canvas.pen.color = SColor.Black;
+            canvas.brush.color = SColor.White;
+            canvas.shadow.shadowBlur = this.shadowBlur;
+            canvas.shadow.shadowColor = this.shadowColor;
+            canvas.shadow.shadowOffsetX = this.shadowOffsetX;
+            canvas.shadow.shadowOffsetY = this.shadowOffsetY;
+            canvas.drawRect(270,100,100,100);
+        }
+    }
+    export default {
+        name: "shadow",
+        data(){
+            return {
+                view: null,
+                blurl: 10,
+                X:10,
+                Y:10,
+                color:"#CCCCCC"
+            }
+        },
+        mounted() {
+            this.view = new shadowView('shadow');
+        },
+        methods:{
+            // 修改扩散距离
+            changeblur(v) {
+                this.view.shadowBlur = v;
+                this.view.update()
+            },
+            // x轴偏移量
+            changeX(v){
+                this.view.shadowOffsetX = v;
+                this.view.update()
+            },
+            // y轴偏移量
+            changeY(v){
+                this.view.shadowOffsetY = v;
+                this.view.update()
+            },
+            // 修改颜色
+            changeColor(v){
+                this.view.shadowColor = new SColor(v);
+                this.view.update()
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    canvas{
+        border: 1px solid #eeeeee;
+        outline: none;
+    }
+</style>

+ 1 - 1
docs/.vuepress/config.js

@@ -94,7 +94,7 @@ module.exports = {
                     {
                         text: "Web开发",
                         items: [
-                            { text: "图形引擎", link: "http://adm.sagacloud.cn:8080/api/web/graphy/" },
+                            { text: "图形引擎", link: "http://adm.sagacloud.cn:8080/api/web/graph/" },
                             { text: "建筑信息图", link: "http://adm.sagacloud.cn:8080/api/web/big/" }
                         ]
                     },

+ 5 - 0
docs/dev/saga-graphy/graphy-engine/style.md

@@ -1,5 +1,10 @@
 # 颜色与样式
+
 ::: details 目录
 [[toc]]
 :::
 
+## 阴影
+
+<example-web-graph-style-shadow /> 
+

+ 3 - 3
package.json

@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@saga-web/base": "2.1.16",
-    "@saga-web/big": "1.0.29",
-    "@saga-web/draw": "2.1.86",
-    "@saga-web/graph": "2.1.72",
+    "@saga-web/big": "1.0.31",
+    "@saga-web/draw": "2.1.88",
+    "@saga-web/graph": "2.1.75",
     "@saga-web/feng-map": "1.0.6",
     "axios": "^0.18.1",
     "element-ui": "^2.12.0",