Browse Source

圆角矩形

shaun-sheep 4 years ago
parent
commit
4919b1c024

+ 127 - 0
docs/.vuepress/components/scene/items/roundRect.vue

@@ -0,0 +1,127 @@
+<template>
+  <div style="margin-top: 10px">
+    <el-button size="small" @click="changeEnable">切换item1禁用状态</el-button>
+    <canvas id="roundRect" width="740" height="400"/>
+  </div>
+</template>
+
+<script>
+  import {SGraphScene, SGraphShape, SGraphView} from '@persagy-web/graph/lib'
+  import {SRect} from '@persagy-web/draw/lib'
+
+  class roundRect extends SGraphShape {
+    constructor(parent, data) {
+      super(parent, data.Style)
+      this.leftTopX = data.X
+      this.leftTopY = data.Y
+      this.width = data.Width
+      this.height = data.Height
+      this.radius = data.Radius
+    }
+
+    boundingRect() {
+      return new SRect(this.leftTopX, this.leftTopY, this.width, this.height)
+    }
+
+    onDraw(painter) {
+      super.onDraw(painter);
+      painter.drawRoundRect(this.leftTopX, this.leftTopY, this.width, this.height, this.radius)
+    }
+  }
+
+  export default {
+    name: "roundRect",
+    data() {
+      return {
+        view: '',
+        item: '',
+        item2: '',
+        rectData: {
+          X: 0,
+          Y: 0,
+          Width: 500,
+          Height: 500,
+          Radius: 50,
+          Style: {
+            "Default": {
+              "Stroke": "#cccccc",
+              "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+              "LineWidth": 2,
+              "Effect": {}
+            },
+            "Selected": {
+              "Stroke": "#66ff66",
+              "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+              "LineWidth": 3,
+              "Effect": {}
+            },
+            "Disabled": {
+              "Stroke": "#333333",
+              "Fill": "#afafaf",
+              "LineWidth": 1,
+              "Effect": {}
+            },
+          }
+        },
+        rectData2: {
+          X: 1000,
+          Y: 0,
+          Width: 500,
+          Height: 500,
+          Radius: 50,
+          Style: {
+            "Default": {
+              "Stroke": "#cccccc",
+              "Fill": "#ffccee",
+              "LineWidth": 2,
+              "Effect": {}
+            },
+            "Selected": {
+              "Stroke": "#66ff66",
+              "Fill": "#ff33ee",
+              "LineWidth": 3,
+              "Effect": {}
+            },
+            "Disabled": {
+              "Stroke": "#333333",
+              "Fill": "#afafaf",
+              "LineWidth": 1,
+              "Effect": {}
+            },
+          }
+        }
+      }
+    },
+    mounted() {
+      this.init()
+    },
+    methods: {
+      init() {
+        this.view = new SGraphView('roundRect')
+        const scene = new SGraphScene()
+
+        this.item = new roundRect(null, this.rectData)
+        this.item.selectable = true
+        scene.addItem(this.item)
+
+        this.item2 = new roundRect(null, this.rectData2)
+        this.item2.selectable = true
+        scene.addItem(this.item2)
+
+        this.view.scene = scene
+        this.view.fitSceneToView()
+        this.view.scalable = false
+      },
+      changeEnable() {
+        if (this.item) {
+          this.item.enabled = !this.item.enabled
+        }
+      },
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

+ 48 - 1
docs/guides/scene/items/roundRect.md

@@ -3,6 +3,53 @@
 ::: details 目录
 [[toc]]
 :::
+## item 实例
+<scene-items-roundRect/>
 
+示例中展示了 一种渐变风格的 json 传参
+
+``` json
+"Default":{
+    "Stroke": "#cccccc",
+    "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+    "LineWidth": 2,
+    "Effect": {}
+},
+"Selected": {
+    "Stroke": "#66ff66",
+    "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+    "LineWidth": 3,
+    "Effect": {}
+},
+```
+
+一种普通纯色风格的 json 传参
+
+``` json
+"Default":{
+    "Stroke": "#cccccc",
+    "Fill": "SLinearGradient{0,0;0,1000;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+    "LineWidth": 2,
+    "Effect": {}
+},
+"Selected": {
+    "Stroke": "#66ff66",
+    "Fill": "SRadialGradient{500,500,50;500,500,500;0,#ff483bff;0.5,#04ff00ff;1,#3d4effff;}",
+    "LineWidth": 3,
+    "Effect": {}
+},
+```
+
+
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/scene/items/roundRect.vue
+:::
+
+
+## item 传参注意
+
+item 传入的数据 data 大写跟随数据字典 <br />
+保存item的时候,保存类型为<font color=red> String </font>,调用渐变类的``` value() ```方法即可返回当前渐变类的字符串; <br />
+item 状态切换及<font color=red> Style </font>内容详情参考 [建筑信息图-底图风格](../../format/style.md)
 
-左上角 宽高 圆角半径