Explorar o código

graph item 补充

haojianlong %!s(int64=4) %!d(string=hai) anos
pai
achega
bfd7f60b65

docs/.vuepress/components/edit/items/editline/editline1 copy.vue → docs/.vuepress/components/edit/items/editline/editline1_copy.vue


+ 144 - 0
docs/.vuepress/components/engine/arrow.vue

@@ -0,0 +1,144 @@
+<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 placeholder="请选择" @change="changeStart" size="small" v-model="begin">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+            <span style="font-size: 14px;">选择结束点样式</span>
+            <el-select placeholder="请选择" @change="changeEnd" size="small" v-model="end">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+        </div>
+        <canvas id="arrow" width="740" height="400" tabindex="0"/>
+    </div>
+</template>
+
+<script>
+    import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
+    import {SRect, SArrowStyleType, SColor, SPoint} from "@persagy-web/draw/lib"
+
+    class Polyline extends SGraphItem{
+        /** 起始点样式 */
+        _begin = SArrowStyleType.Basic;
+        get begin(){
+            return this._begin;
+        }
+        set begin(v){
+            this._begin = v;
+            this.update();
+        }
+        /** 结束点样式 */
+        _end = SArrowStyleType.Basic;
+        get end(){
+            return this._end;
+        }
+        set end(v){
+            this._end = v;
+            this.update();
+        }
+        pointList = [
+            new SPoint(0, 0),
+            new SPoint(2000, 100),
+            new SPoint(1800, 1800),
+            new SPoint(1200, 1800),
+            new SPoint(1000, 1000)
+        ];
+
+        boundingRect() {
+            return new SRect(0,0,2000,2000);
+        }
+        onDraw(painter) {
+            painter.pen.lineWidth = painter.toPx(1);
+            const style = {
+                begin: 3,
+                end: 3
+            };
+            for(let i = 0; i < this.pointList.length - 1; i++){
+
+                painter.drawArrowLine(this.pointList[i], this.pointList[i+1], style)
+            }
+        }
+    }
+
+    export default {
+        name: "arrow",
+        data(){
+            return {
+                view:'',
+                options: [
+                    {
+                        value: SArrowStyleType.None,
+                        label: 'None'
+                    },{
+                        value: SArrowStyleType.Basic,
+                        label: 'Basic'
+                    },{
+                        value: SArrowStyleType.Triangle,
+                        label: 'Triangle'
+                    },{
+                        value: SArrowStyleType.Diamond,
+                        label: 'Diamond'
+                    },{
+                        value: SArrowStyleType.Square,
+                        label: 'Square'
+                    },{
+                        value: SArrowStyleType.Circle,
+                        label: 'Circle'
+                    }
+                ],
+                item: null,
+                tableData: [
+                    {
+                        val: 'None',
+                        desc: '无样式'
+                    },{
+                        val: 'Basic',
+                        desc: '基本箭头'
+                    },
+                    {
+                        val: 'Triangle',
+                        desc: '三角形箭头'
+                    },
+                    {
+                        val: 'Diamond',
+                        desc: '菱形箭头'
+                    },
+                    {
+                        val: 'Square',
+                        desc: '方形箭头'
+                    },
+                    {
+                        val: 'Circle',
+                        desc: '圆形箭头'
+                    },
+                ],
+                begin: SArrowStyleType.None,
+                end: SArrowStyleType.None
+            }
+        },
+        mounted() {
+            this.init()
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('arrow');
+                const scene = new SGraphScene();
+                this.item = new Polyline(null);
+                scene.addItem(this.item);
+                this.view.scene = scene;
+                this.view.fitSceneToView();
+                // this.view.scalable = false;
+            },
+            changeStart(val){
+            },
+            changeEnd(val){
+
+            }
+        }
+    }
+</script>

+ 20 - 21
docs/.vuepress/components/engine/composite/sourceOver.vue

@@ -54,41 +54,40 @@
             return {
                 view:'',
                 value: SCompositeType.SourceOver,
-                options: [
-                    {
-                        value: SCompositeType.SourceOver,
-                        label: '在目标图像上显示源图像'
-                    },{
-                        value: SCompositeType.Copy,
-                        label: '显示源图像。忽略目标图像'
-                    },{
+                options: [{
                         value: SCompositeType.DestinationAtop,
-                        label: '在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示'
+                        label: 'DestinationAtop'
                     },{
                         value: SCompositeType.DestinationIn,
-                        label: '在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的'
+                        label: 'DestinationIn'
                     },{
                         value: SCompositeType.DestinationOut,
-                        label: '在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的'
+                        label: 'DestinationOut'
                     },{
                         value: SCompositeType.DestinationOver,
-                        label: '在源图像上方显示目标图像。'
-                    },{
-                        value: SCompositeType.Lighter,
-                        label: '显示源图像 + 目标图像。'
+                        label: 'DestinationOver'
                     },{
                         value: SCompositeType.SourceAtop,
-                        label: '在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的'
+                        label: 'SourceAtop'
                     },{
                         value: SCompositeType.SourceIn,
-                        label: '在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。'
+                        label: 'SourceIn'
                     },{
-                        value: SCompositeType.Xor,
-                        label: '使用异或操作对源图像与目标图像进行组合'
+                        value: SCompositeType.SourceOver,
+                        label: 'SourceOver'
                     },{
                         value: SCompositeType.SourceOut,
-                        label: '在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的'
-                    }
+                        label: 'SourceOut'
+                    },{
+                        value: SCompositeType.Xor,
+                        label: 'Xor'
+                    },{
+                        value: SCompositeType.Lighter,
+                        label: 'Lighter'
+                    },{
+                        value: SCompositeType.Copy,
+                        label: 'Copy'
+                    },
                 ],
                 circle: null,
                 tableData: [

+ 87 - 0
docs/.vuepress/components/scene/items/rect.vue

@@ -0,0 +1,87 @@
+<template>
+    <div>
+        <el-button size="small" @click="changeEnable">切换item禁用状态</el-button>
+        <canvas id="rect" width="740" height="400" />
+    </div>
+</template>
+
+<script>
+
+    import {SGraphScene, SGraphShape, SGraphView} from "@persagy-web/graph/lib";
+    import {SRect} from "@persagy-web/draw/lib";
+
+    class rect extends SGraphShape{
+        constructor(parent, data) {
+            super(parent, data.Style);
+            this.leftTopX = data.X;
+            this.leftTopyY= data.Y;
+            this.width = data.Width;
+            this.height = data.Height;
+        }
+        boundingRect() {
+            return new SRect(this.leftTopX,this.leftTopyY,this.width,this.height);
+        }
+        onDraw(painter) {
+            super.onDraw(painter);
+            painter.drawRect(this.leftTopX,this.leftTopyY,this.width,this.height)
+        }
+    }
+    export default {
+        name: "rect1",
+        data(){
+            return {
+                view: '',
+                item: '',
+                rectData: {
+                    X: 0,
+                    Y: 0,
+                    Width: 500,
+                    Height: 500,
+                    Style: {
+                        "Default":{
+                            "Stroke": "#cccccc",
+                            "Fill": "#ccffcc",
+                            "LineWidth": 2,
+                            "Effect": {}
+                        },
+                        "Selected": {
+                            "Stroke": "#66ff66",
+                            "Fill": "#11effe",
+                            "LineWidth": 3,
+                            "Effect": {}
+                        },
+                        "Disabled": {
+                            "Stroke": "#333333",
+                            "Fill": "#afafaf",
+                            "LineWidth": 1,
+                            "Effect": {}
+                        },
+                    }
+                }
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods:{
+            init(){
+                this.view = new SGraphView('rect');
+                const scene = new SGraphScene();
+                this.item = new rect(null, this.rectData);
+                this.item.selectable = true;
+                this.view.scene = scene;
+                scene.addItem(this.item);
+                this.view.fitSceneToView();
+                this.view.scalable = false;
+            },
+            changeEnable(){
+                if (this.item) {
+                    this.item.enabled = !this.item.enabled;
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+</style>

+ 26 - 10
docs/guides/big/style.md

@@ -3,16 +3,32 @@
 [[toc]]
 :::
 
-## style类
-
-主要包含线条颜色(strokeColor:值为SColor类型),填充颜色,线条宽度,被选中时颜色,高亮时颜色,渐变属性
-```json
+``` json
 {
-    "strokeColor": "SColor",
-    "fillColor": "SColor",            
-    "lineWidth": "number",
-    "selectColor": "SColor",
-    "highlightColor": "SColor",
-    "backgroundImage": "Gradient"
+    "default":{
+        "Stroke": "SColor",
+        "Fill": "SColor | Gradient",
+        "LineWidth": "number",
+        "Effect": {}
+    },
+    "Selected": {
+        "Stroke": "SColor",
+        "Fill": "SColor | Gradient",
+        "LineWidth": "number",
+        "Effect": {}
+    },
+    "Disabled": {
+        "Stroke": "SColor",
+        "Fill": "SColor | Gradient",
+        "LineWidth": "number",
+        "Effect": {}
+    },
 }
 ```
+
+| enabled | selected | 状态 |
+|:--:|:--:|:--:|
+| false | false | Disabled |
+| false | true | Disabled |
+| true | false | Default |
+| true | true | Selected |

+ 10 - 0
docs/guides/engine/arrow.md

@@ -1,5 +1,9 @@
 # 绘图指令-绘制带有末端样式的线段
 
+::: details 目录
+[[toc]]
+:::
+
 ## 函数入参
 
 传入线段和末端样式style{begin?:SArrowStyleType,end?:SArrowStyleType}
@@ -14,6 +18,12 @@ drawArrowLine(p1: SPoint, p2: SPoint, style?: SArrow): void;
 
 drawArrowLine(x1: number,y1: number,x2: number,y2: number,style?: SArrow): void;
 
+<engine-arrow /> 
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/engine/arrow.vue
+:::
+
 ## 类型
 
 ### 无

+ 6 - 2
docs/guides/engine/composite.md

@@ -1,13 +1,17 @@
 # 融合
 
+::: details 目录
+[[toc]]
+:::
+
 通过canvas的属性globalCompositeOperation,设置多个图形之间的绘制方式
 
 源图像 = 您打算放置到画布上的绘图。
 
 目标图像 = 您已经放置在画布上的绘图
 
-<engine-composite-sourceOver /> 
+<engine-composite /> 
 
 ::: details 查看代码
-<<< @/docs/.vuepress/components/engine/composite/sourceOver.vue
+<<< @/docs/.vuepress/components/engine/composite.vue
 :::

+ 13 - 4
docs/guides/index.js

@@ -9,7 +9,7 @@ const content = [
             ["/guides/engine/composite", "融合"],
             ["/guides/engine/transform", "变型"],
             ["/guides/engine/clip", "裁剪"],
-            ["/guides/engine/arrow", "绘图指令-绘制带有箭头的线段"],
+            ["/guides/engine/arrow", "绘制带有箭头的线段"],
         ]
     },
     {
@@ -19,8 +19,15 @@ const content = [
             {
                 title: "Item 示例",
                 children: [
-                    ["/guides/scene/items/text", "绘制文字"],
-                    ["/guides/scene/items/image", "绘制图片"],
+                    ["/guides/scene/items/rect", "矩形"],
+                    ["/guides/scene/items/roundRect", "圆角矩形"],
+                    ["/guides/scene/items/polygon", "多边形"],
+                    ["/guides/scene/items/polygonGroup", "多边形组"],
+                    ["/guides/scene/items/area", "区域类型"],
+                    ["/guides/scene/items/areaGroup", "区域类型组"],
+                    ["/guides/scene/items/text", "文字"],
+                    ["/guides/scene/items/image", "图片"],
+                    ["/guides/scene/items/svg", "SVG 图"],
                 ]
             },
             {
@@ -29,6 +36,8 @@ const content = [
                     ["/guides/scene/items/clock", "时钟"],
                     ["/guides/scene/undo", "Undo示例"],
                     ["/guides/scene/align", "对齐示例"],
+                    ["/guides/scene/regularPolygon", "正多边形"],
+                    ["/guides/scene/star", "星形"],
                 ]
             },
         ]
@@ -88,4 +97,4 @@ const content = [
     },
 ];
 
-module.exports = content;
+module.exports = content;

+ 3 - 0
docs/guides/scene/items/area.md

@@ -0,0 +1,3 @@
+# 区域
+
+二维点数组

+ 3 - 0
docs/guides/scene/items/areaGroup.md

@@ -0,0 +1,3 @@
+# 区域组
+
+二维点数组

+ 3 - 0
docs/guides/scene/items/polygon.md

@@ -0,0 +1,3 @@
+# 多边形
+
+一维数组

+ 3 - 0
docs/guides/scene/items/polygonGroup.md

@@ -0,0 +1,3 @@
+# 多边形组
+
+二维数组

+ 14 - 0
docs/guides/scene/items/rect.md

@@ -0,0 +1,14 @@
+# 矩形
+
+左上角 宽高
+
+<scene-items-rect />
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/scene/items/rect.vue
+:::
+
+::: tip item 展示
+    item 状态切换参考 建筑信息图-底图风格
+    item 传入的数据 data 大写跟随数据字典
+:::

+ 3 - 0
docs/guides/scene/items/roundRect.md

@@ -0,0 +1,3 @@
+# 圆角矩形
+
+左上角 宽高 圆角半径

+ 1 - 0
docs/guides/scene/items/svg.md

@@ -0,0 +1 @@
+# SVG 图

+ 5 - 0
docs/guides/scene/regularPolygon.md

@@ -0,0 +1,5 @@
+# 正多边形
+
+外接矩形
+
+圆心 边数 外圆半径 旋转角度

+ 5 - 0
docs/guides/scene/star.md

@@ -0,0 +1,5 @@
+# 星形
+
+外接矩形
+
+圆心 边数 外圆半径 內圆半径(默认是外圆的0.618,黄金比例) 旋转角度

+ 2 - 3
package.json

@@ -14,9 +14,8 @@
   "dependencies": {
     "@persagy-web/base": "2.2.1",
     "@persagy-web/big": "2.2.1",
-    "@persagy-web/draw": "2.2.1",
-    "@persagy-web/graph": "2.2.1",
-    "@persagy-web/feng-map": "2.2.1",
+    "@persagy-web/draw": "2.2.2",
+    "@persagy-web/graph": "2.2.3",
     "vue": "^2.6.10",
     "element-ui": "^2.12.0",
     "vue-property-decorator": "^8.4.2"