Browse Source

绘制圆item

haojianlong 4 years ago
parent
commit
7353b814d7

+ 47 - 0
docs/.vuepress/components/example/web/graph/Circle1.vue

@@ -0,0 +1,47 @@
+import {SLineCapStyle} from "@saga-web/draw/lib";
+<template>
+    <canvas id="circle" width="740" height="250" />
+</template>
+
+<script lang="ts">
+    import {SCanvasView, SColor, SPainter, SRect, SLineCapStyle} from "@saga-web/draw/lib";
+
+    class TestView extends SCanvasView {
+
+        constructor() {
+            super("circle")
+        }
+
+        onDraw(canvas: SPainter): void {
+            canvas.clearRect(new SRect(0,0,800,400));
+
+            canvas.pen.color = SColor.Blue;
+            canvas.brush.color = SColor.Red;
+            canvas.drawCircle(100,100,50);
+
+            canvas.pen.lineWidth = 10;
+            canvas.pen.lineDash = [10,11];
+            canvas.pen.lineCapStyle = SLineCapStyle.Butt;
+            canvas.pen.color = SColor.Blue;
+            canvas.brush.color = SColor.Red;
+            canvas.pen.dashOffset = new Date().getTime()/50%60;
+            canvas.drawCircle(230,100,40);
+
+            canvas.pen.dashOffset = -new Date().getTime()/50%60;
+            canvas.drawCircle(315,100,40);
+
+            this.update();
+        }
+    }
+
+    export default {
+        name: "Circle1",
+        mounted(): void {
+            new TestView();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 24 - 1
docs/.vuepress/components/example/web/graph/DrawLine1.vue

@@ -19,9 +19,32 @@
             canvas.drawLine(0,0, 100, 100);
 
             canvas.pen.lineWidth = 1;
+
+            canvas.pen.color = SColor.Blue;
+            for (let i = 0; i < 360; i += 10) {
+                let q = i * Math.PI / 180;
+                canvas.drawLine(
+                    200,
+                    50,
+                    200 + 50 * Math.cos(q),
+                    50 + 50 * Math.sin(q));
+            }
+
+            canvas.pen.color = SColor.Red;
+            for (let i = 0; i < 360; i += 10) {
+                let q1 = i * Math.PI / 180;
+                let q2 = (i + 120) * Math.PI / 180;
+                canvas.drawLine(
+                    350 + 50 * Math.cos(q1),
+                    50 + 50 * Math.sin(q1),
+                    350 + 50 * Math.cos(q2),
+                    50 + 50 * Math.sin(q2));
+            }
+
+            canvas.pen.lineWidth = 1;
             canvas.pen.dashOffset = new Date().getTime()/50%60;
             canvas.pen.lineDash = [10,50];
-            canvas.drawLine(200, 50, 400, 50);
+            canvas.drawLine(400, 50, 700, 50);
             this.update();
         }
     }

+ 6 - 6
docs/.vuepress/components/example/web/graph/scene/ClockItem.vue

@@ -4,9 +4,9 @@
 
 <script lang="ts">
     import { SColor, SPainter, SRect } from "@saga-web/draw";
-    import { SGraphyItem, SGraphyScene, SGraphyView } from "@saga-web/graphy";
+    import { SGraphItem, SGraphScene, SGraphView } from "@saga-web/graph";
 
-    class ClockItem extends SGraphyItem {
+    class ClockItem extends SGraphItem {
         /** 宽度 */
         width = 100;
         /** 高度 */
@@ -24,7 +24,7 @@
          * @param   width       宽度
          * @param   height      高度
          */
-        constructor(parent: SGraphyItem | null, width: number, height: number) {
+        constructor(parent: SGraphItem | null, width: number, height: number) {
             super(parent);
             this.width = width;
             this.height = height;
@@ -171,12 +171,12 @@
         }
     }
 
-    class TestView extends SGraphyView {
+    class TestView extends SGraphView {
         clock1 = new ClockItem(null, 300, 300);
 
         constructor() {
             super("clockItem1");
-            this.scene = new SGraphyScene();
+            this.scene = new SGraphScene();
             this.scene.addItem(this.clock1);
         }
     }
@@ -190,4 +190,4 @@
 
 <style scoped>
 
-</style>
+</style>

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

@@ -0,0 +1,167 @@
+import {SItemStatus} from "@saga-web/big/lib";
+<template>
+    <div>
+        <el-input v-model="input" placeholder="请输入内容"></el-input>
+        <el-button @click="change">00000</el-button>
+        <canvas id="editPolygon" width="740" height="400" tabindex="0"></canvas>
+    </div>
+</template>
+
+<script lang="ts">
+    import {SGraphItem, SGraphScene, SGraphView} from "@saga-web/graph/lib";
+    import {SImageItem, SItemStatus, SObjectItem, STextItem} from "@saga-web/big/lib";
+    import {SColor, SPainter, SRect, SSize, STextBaseLine} from "@saga-web/draw/lib";
+    import {SMouseEvent} from "@saga-web/base/lib";
+
+    /**
+     * 图例item  icon
+     *
+     * */
+    class SImgTextItem extends SObjectItem{
+
+        /** item状态  */
+        _status:SItemStatus = SItemStatus.Create;
+        get status():SItemStatus{
+            return this._status;
+        }
+        set status(v:SItemStatus){
+            this._status = v;
+            this.update();
+        }
+
+        /** 是否显示文字  */
+        _showText:boolean = true;
+        get showText():boolean{
+            return this._showText;
+        }
+        set showText(v:boolean){
+            if (v === this._showText) {
+                return
+            }
+            this._showText = v;
+            if (v) {
+                this.textItem.show();
+            } else {
+                this.textItem.hide();
+            }
+        }
+
+        /** img Item    */
+        img: SImageItem = new SImageItem(this);
+
+        /** text item   */
+        textItem: STextItem = new STextItem(this);
+
+        /**
+         * 构造体
+         *
+         * */
+        constructor(parent:SGraphItem|null){
+            super(parent);
+            this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
+            setTimeout(() => {
+                this.img.width = 28;
+                this.img.height = 28;
+                this.update();
+            },1000);
+            this.img.isTransform = true;
+            this.textItem.text = `图例item示例`;
+            this.textItem.moveTo(16,0);
+            this.textItem.font.textBaseLine = STextBaseLine.Middle;
+        }
+
+        /**
+         * 宽高发发生变化
+         *
+         * @param   oldSize 改之前的大小
+         * @param   newSize 改之后大小
+         * */
+        onResize(oldSize: SSize, newSize: SSize) {
+            console.log(arguments);
+        } // Function onResize()
+
+        /**
+         * 鼠标双击事件
+         *
+         * @param   event   鼠标事件
+         * @return  是否处理事件
+         * */
+        onDoubleClick(event: SMouseEvent): boolean {
+            console.log('doubleclick');
+            this.status = SItemStatus.Edit;
+            return true;
+        } // Function onDoubleClick()
+
+        /**
+         * 宽高发发生变化
+         *
+         * @return  SRect   所有子对象的并集
+         * */
+        boundingRect(): SRect {
+            let rect = new SRect();
+            this.children.forEach(t => {
+                rect = rect.unioned(t.boundingRect());
+            });
+            return rect;
+        } // Function boundingRect()
+
+        /**
+         * Item绘制操作
+         *
+         * @param   painter painter对象
+         */
+        onDraw(painter: SPainter): void {
+            painter.pen.lineWidth = painter.toPx(1);
+            painter.pen.color = new SColor("#00FF00");
+            painter.brush.color = SColor.Transparent;
+            painter.drawRect(this.boundingRect());
+            super.onDraw(painter);
+
+            if (this.status == SItemStatus.Edit) {
+                this.anchorList.forEach(t => {
+
+                })
+            }
+        } // Function onDraw()
+    }
+
+
+    export default {
+        name: "ImgTextItem",
+        data() {
+            return {
+                scene: null,
+                view: null,
+                input:'',
+            };
+        },
+        mounted() {
+            console.log(22222222222222222)
+            this.view = new SGraphView("editPolygon");
+            this.scene = new SGraphScene();
+            this.view.scene = this.scene;
+            this.init()
+        },
+        methods:{
+            init(){
+                const item = new SImgTextItem(null);
+                item.moveable = true;
+
+                this.scene.addItem(item);
+                this.view.fitSceneToView();
+            },
+            change() {
+
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    canvas{
+        border:1px solid #ccc;
+    }
+    canvas:focus{
+        outline: none;
+    }
+</style>

+ 5 - 4
docs/.vuepress/components/example/web/graph/scene/TextItem.vue

@@ -144,6 +144,7 @@
 	 * @author  张宇(taohuzy@163.com)
 	 */
 	class SGraphPropertyCommand<T> extends SGraphCommand {
+		/**	指向item对象	*/
 		item: SGraphItem;
 		/** 属性名称 */
 		propName: string;
@@ -167,7 +168,7 @@
 			this.propName = propName;
             this.oldProp = oldProp;
             this.newProp = newProp;
-        }
+        } // Constructor
 
 		/**
 		 * redo操作
@@ -175,7 +176,7 @@
         redo(): void {
             this.item[this.propName] = this.newProp;
             this.item.update();
-        }
+        } // Function redo()
 
 		/**
 		 * undo操作
@@ -183,7 +184,7 @@
         undo(): void {
             this.item[this.propName] = this.oldProp;
             this.item.update();
-        }
+        } // Function undo()
 	}
 
 	class SGraphMoveCommand extends SGraphCommand {
@@ -244,4 +245,4 @@
 
 <style scoped>
 
-</style>
+</style>

+ 26 - 25
docs/.vuepress/components/example/web/graph/scene/Undo1.vue

@@ -12,16 +12,16 @@
 <script lang="ts">
     import { SMouseEvent, SUndoStack } from "@saga-web/base";
     import { SColor, SPainter, SRect } from "@saga-web/draw";
-    import { SGraphyItem, SGraphyScene, SGraphyView } from "@saga-web/graphy";
-    import {SGraphyCommand} from "@saga-web/graphy/lib";
+    import { SGraphItem, SGraphScene, SGraphView } from "@saga-web/graph";
+    import {SGraphCommand} from "@saga-web/graph/lib";
     import {SUndoCommand} from "@saga-web/base/lib";
     import {SPoint} from "@saga-web/draw/lib";
 
-    class RectItem extends SGraphyItem {
+    class RectItem extends SGraphItem {
         width = 100;
         height = 100;
 
-        constructor(parent: SGraphyItem | null) {
+        constructor(parent: SGraphItem | null) {
             super(parent);
             this.moveable = true;
             this.selectable = true;
@@ -40,10 +40,10 @@
         }
     }
 
-    class CircleItem extends SGraphyItem {
+    class CircleItem extends SGraphItem {
         r = 50;
 
-        constructor(parent: SGraphyItem | null) {
+        constructor(parent: SGraphItem | null) {
             super(parent);
             this.moveable = true;
             this.selectable = true;
@@ -61,7 +61,7 @@
         }
     }
 
-    class SScene extends SGraphyScene {
+    class SScene extends SGraphScene {
         undoStack = new SUndoStack();
         /** 定义命令 */
         cmd = 0;
@@ -71,7 +71,7 @@
         }
 
 
-        onMouseUp(event: SMouseEvent): void {
+        onMouseUp(event: SMouseEvent): boolean {
             switch(this.cmd) {
                 case 1:
                     this.addCircle(event.x, event.y);
@@ -83,40 +83,41 @@
                     super.onMouseUp(event);
             }
             this.cmd = 0;
+            return false
         }
 
         private addCircle(x: number, y: number): void {
-            let item = new CircleItem();
+            let item = new CircleItem(null);
             item.moveTo(x - 50, y - 50);
             this.addItem(item);
-            this.undoStack.push(new SGraphyAddCommand(this, item));
+            this.undoStack.push(new SGraphAddCommand(this, item));
             item.connect("onMove", this, this.onItemMove.bind(this));
         }
 
         private addRect(x: number, y: number): void {
-            let item = new RectItem();
+            let item = new RectItem(null);
             item.moveTo(x - 50, y - 50);
             this.addItem(item);
-            this.undoStack.push(new SGraphyAddCommand(this, item));
+            this.undoStack.push(new SGraphAddCommand(this, item));
             item.connect("onMove", this, this.onItemMove.bind(this));
         }
 
-        onItemMove(item: SGraphyItem, ...arg: any): void {
-            this.undoStack.push(new SGraphyMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
+        onItemMove(item: SGraphItem, ...arg: any): void {
+            this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
         }
     }
 
-    class TestView extends SGraphyView {
+    class TestView extends SGraphView {
         constructor() {
             super("undoFrame");
         }
     }
 
-    class SGraphyAddCommand extends SGraphyCommand {
-        item: SGraphyItem;
-        parent: SGraphyItem | null;
+    class SGraphAddCommand extends SGraphCommand {
+        item: SGraphItem;
+        parent: SGraphItem | null;
 
-        constructor(scene: SGraphyScene, item: SGraphyItem) {
+        constructor(scene: SGraphScene, item: SGraphItem) {
             super(scene);
             this.item = item;
             this.parent = item.parent;
@@ -136,7 +137,7 @@
         }
     }
 
-    class SGraphyDeleteCommand extends SGraphyCommand {
+    class SGraphDeleteCommand extends SGraphCommand {
         mergeWith(command: SUndoCommand): boolean {
             return false;
         }
@@ -148,19 +149,19 @@
         }
     }
 
-    class SGraphyMoveCommand extends SGraphyCommand {
-        item: SGraphyItem;
+    class SGraphMoveCommand extends SGraphCommand {
+        item: SGraphItem;
         old: SPoint;
         pos: SPoint;
 
-        constructor(scene: SGraphyScene, item: SGraphyItem, old: SPoint, pos: SPoint) {
+        constructor(scene: SGraphScene, item: SGraphItem, old: SPoint, pos: SPoint) {
             super(scene);
             this.item = item;
             this.old = old;
             this.pos = pos;
         }
         mergeWith(command: SUndoCommand): boolean {
-            if (command instanceof  SGraphyMoveCommand && command.item == this.item) {
+            if (command instanceof  SGraphMoveCommand && command.item == this.item) {
                 command.pos = this.pos;
                 return true;
             }
@@ -211,4 +212,4 @@
 
 <style scoped>
 
-</style>
+</style>

+ 7 - 1
docs/dev/saga-graphy/graphy-engine/draw.md

@@ -14,6 +14,7 @@
 :::
 
 ## 折线
+
 <example-web-graph-DrawPolyline1 /> 
 
 ::: details 查看代码
@@ -34,10 +35,15 @@
 
 ## 圆
 
+<example-web-graph-Circle1 /> 
+
+::: details 查看代码
+
+<<< @/docs/.vuepress/components/example/web/graph/Circle1.vue
 
 
 ## 椭圆
 
 ## 多边形
 
-## 路径
+## 路径

+ 2 - 1
docs/dev/saga-graphy/index.js

@@ -25,7 +25,8 @@ const content = [
                     ["/dev/saga-graphy/scene-manage/items/clock", "时钟"],
                     ["/dev/saga-graphy/scene-manage/items/text", "文本"],
                     ["/dev/saga-graphy/scene-manage/items/image", "图片"],
-                    ["/dev/saga-graphy/scene-manage/items/edit-polygon", "可编辑多边形示例"]
+                    ["/dev/saga-graphy/scene-manage/items/edit-polygon", "可编辑多边形示例"],
+                    ["/dev/saga-graphy/scene-manage/items/imgText", "图例item(图片文本组合)"]
                 ]
             },
             ["/dev/saga-graphy/scene-manage/undo", "Undo示例"]

+ 6 - 0
docs/dev/saga-graphy/scene-manage/items/imgText.md

@@ -0,0 +1,6 @@
+# 图例item示例
+::: details 目录
+[[toc]]
+:::
+
+<example-web-graph-scene-SImgTextItem/>

+ 4 - 4
package.json

@@ -13,11 +13,10 @@
   },
   "dependencies": {
     "@saga-web/base": "^2.1.9",
-    "@saga-web/big": "^1.0.11",
-    "@saga-web/draw": "^2.1.82",
-    "@saga-web/graph": "^2.1.54",
+    "@saga-web/big": "^1.0.17",
+    "@saga-web/draw": "^2.1.84",
+    "@saga-web/graph": "^2.1.66",
     "@saga-web/feng-map": "1.0.6",
-    "@saga-web/topology": "1.0.84",
     "axios": "^0.18.1",
     "element-ui": "^2.12.0",
     "vue": "^2.6.10",
@@ -29,6 +28,7 @@
     "ts-loader": "^7.0.4",
     "typescript": "^3.9.2",
     "vuepress": "^1.2.0",
+    "polybooljs": "^1.2.0",
     "vuepress-plugin-typescript": "^0.2.0",
     "vuepress-types": "^0.9.2"
   }