Browse Source

'添加文本和图片示例'

zhangyu 4 years ago
parent
commit
d2dd44c25c

+ 193 - 0
docs/.vuepress/components/example/web/graph/scene/ImageItem.vue

@@ -0,0 +1,193 @@
+<template>
+    <canvas id="clockItem1" width="400" height="400" />
+</template>
+
+<script lang="ts">
+    import { SColor, SPainter, SRect } from "@saga-web/draw";
+    import { SGraphyItem, SGraphyScene, SGraphyView } from "@saga-web/graphy";
+
+    class ClockItem extends SGraphyItem {
+        /** 宽度 */
+        width = 100;
+        /** 高度 */
+        height = 100;
+
+        /** 半径 */
+        get radius(): number {
+            return Math.min(this.width, this.height) / 2.0;
+        }
+
+        /**
+         * 构造函数
+         *
+         * @param   parent      指向父Item
+         * @param   width       宽度
+         * @param   height      高度
+         */
+        constructor(parent: SGraphyItem | null, width: number, height: number) {
+            super(parent);
+            this.width = width;
+            this.height = height;
+        }
+
+        /**
+         * 对象边界区域
+         *
+         * @return  边界区域
+         */
+        boundingRect(): SRect {
+            return new SRect(0, 0, this.width, this.height);
+        }
+
+        /**
+         * Item绘制操作
+         *
+         * @param   canvas      画布
+         */
+        onDraw(canvas: SPainter): void {
+            canvas.translate(this.width / 2, this.height / 2);
+            const t = new Date();
+            this.drawScale(canvas);
+            this.drawHour(canvas, t.getHours(), t.getMinutes(), t.getSeconds());
+            this.drawMinute(canvas, t.getMinutes(), t.getSeconds());
+            this.drawSecond(canvas, t.getSeconds() + t.getMilliseconds() / 1000.0);
+
+            this.update();
+        }
+
+        /**
+         * 绘制表刻度
+         *
+         * @param   canvas      画布
+         */
+        private drawScale(canvas: SPainter): void {
+            const scaleLength = Math.max(this.radius / 10.0, 2.0);
+            const scaleLength1 = scaleLength * 1.2;
+            const strokeWidth = Math.max(this.radius / 100.0, 2.0);
+            const strokeWidth1 = strokeWidth * 2.0;
+
+            canvas.save();
+            canvas.pen.color = SColor.Blue;
+
+            for (let i = 1; i <= 12; i++) {
+                // 12小时刻度
+                canvas.pen.lineWidth = strokeWidth1;
+                canvas.drawLine(
+                    0,
+                    -this.radius,
+                    0,
+                    -this.radius + scaleLength1
+                );
+
+                if (this.radius >= 40) {
+                    // 如果半度大于40显示分钟刻度
+                    canvas.rotate((6 * Math.PI) / 180);
+                    for (let j = 1; j <= 4; j++) {
+                        // 分钟刻度
+                        canvas.pen.lineWidth = strokeWidth;
+                        canvas.drawLine(
+                            0,
+                            -this.radius,
+                            0,
+                            -this.radius + scaleLength
+                        );
+                        canvas.rotate((6 * Math.PI) / 180);
+                    }
+                } else {
+                    canvas.rotate((30 * Math.PI) / 180);
+                }
+            }
+
+            canvas.restore();
+        }
+
+        /**
+         * 绘制时针
+         *
+         * @param   canvas      画布
+         * @param   hour        时
+         * @param   minute      分
+         * @param   second      秒
+         */
+        private drawHour(
+            canvas: SPainter,
+            hour: number,
+            minute: number,
+            second: number
+        ): void {
+            canvas.save();
+            canvas.pen.color = SColor.Black;
+            canvas.rotate(
+                ((hour * 30.0 + (minute * 30.0) / 60 + (second * 30.0) / 3600) *
+                    Math.PI) /
+                180
+            );
+            canvas.drawLine(
+                0,
+                this.radius / 10.0,
+                0,
+                -this.radius / 2.0
+            );
+            canvas.restore();
+        }
+
+        /**
+         * 绘制秒针
+         *
+         * @param   canvas      画布
+         * @param   minute      分
+         * @param   second      秒
+         */
+        private drawMinute(canvas: SPainter, minute: number, second: number): void {
+            canvas.save();
+            canvas.pen.color = SColor.Black;
+            canvas.rotate(((minute * 6 + (second * 6) / 60.0) * Math.PI) / 180);
+            canvas.drawLine(
+                0,
+                this.radius / 10.0,
+                0,
+                (-this.radius * 2.0) / 3.0
+            );
+            canvas.restore();
+        }
+
+        /**
+         * 绘制秒针
+         *
+         * @param   canvas      画布
+         * @param   second      秒
+         */
+        private drawSecond(canvas: SPainter, second: number): void {
+            canvas.save();
+            canvas.pen.color = SColor.Red;
+            canvas.rotate((second * 6 * Math.PI) / 180);
+            canvas.drawLine(
+                0,
+                this.radius / 5.0,
+                0,
+                -this.radius + this.radius / 10.0
+            );
+            canvas.restore();
+        }
+    }
+
+    class TestView extends SGraphyView {
+        clock1 = new ClockItem(null, 300, 300);
+
+        constructor() {
+            super("clockItem1");
+            this.scene = new SGraphyScene();
+            this.scene.addItem(this.clock1);
+        }
+    }
+
+    export default {
+        mounted(): void {
+            new TestView();
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 200 - 0
docs/.vuepress/components/example/web/graph/scene/TextItem.vue

@@ -0,0 +1,200 @@
+<template>
+	<div>
+		<el-row>
+			<el-input v-model="input" @keyup.native="handleKeyup" style="width:200px;" placeholder="请输入内容"></el-input>
+			<el-button @click="undo">Undo</el-button>
+			<el-button @click="redo">Redo</el-button>
+		</el-row>
+		<canvas id="TextItem1" width="400" height="400" />
+	</div>
+</template>
+
+<script lang="ts">
+	import { SMouseEvent, SUndoStack } from "@saga-web/base";
+    import { SColor, SPainter, SRect, SFont, STextBaseLine } from "@saga-web/draw";
+	import { SGraphyItem, SGraphyScene, SGraphyView } from "@saga-web/graphy";
+	import { SGraphyCommand } from "@saga-web/graphy/lib";
+	import { SUndoCommand } from "@saga-web/base/lib";
+	import {SPoint} from "@saga-web/draw/lib";
+	
+	class TextItem extends SGraphyItem {
+		/** 宽度 */
+        width = 100;
+        /** 高度 */
+		height = 100;
+        /** 文本内容 */
+		_text: string = "";
+		get text(): string {
+			return this._text;
+		}
+		set text(v: string): void {
+			this._text = v;
+			this.update();
+		}
+		
+		/**
+         * 构造函数
+         *
+         * @param   parent      指向父Item
+         * @param   str         文本内容
+         */
+        constructor(parent: SGraphyItem | null = null, str: string = "") {
+			super(parent);
+			this.text = str;
+			this.moveable = true;
+			this.selectable = true;
+			this.selected = true;
+		}
+		
+		/**
+         * 对象边界区域
+         *
+         * @return  边界区域
+         */
+        boundingRect(): SRect {
+            return new SRect(0, 0, this.width, this.height);
+        }
+
+        /**
+         * Item绘制操作
+         *
+         * @param   canvas      画布
+         */
+        onDraw(canvas: SPainter): void {
+			// this.width = canvas.toPx(canvas.textWidth(this.text));
+			// this.height = canvas.toPx(this.font.size);
+
+			// canvas.font.textBaseLine = this.font.textBaseLine;
+			// canvas.font.textDirection = this.font.textDirection;
+			// canvas.font.textAlign = this.font.textAlign;
+			// canvas.font.name = this.font.name;
+			// canvas.font.size = canvas.toPx(this.font.size);
+			// canvas.brush.color = new SColor(this.color);
+			// canvas.drawText(this.text, 0, 0, this.maxWidth);
+
+
+			canvas.brush.color = SColor.Red;
+			canvas.drawRect(0, 0, this.width, this.height);
+			canvas.brush.color = SColor.Yellow;
+			canvas.font.textBaseLine = STextBaseLine.Top;
+			canvas.drawText(this.text, 0, 0);
+        }
+	}
+
+	class SScene extends SGraphyScene {
+		undoStack = new SUndoStack();
+		textItem: SGraphyItem = new TextItem();
+
+		constructor() {
+			super();
+			this.addItem(this.textItem);
+			this.textItem.connect("onMove", this, this.onItemMove.bind(this));
+		}
+
+		updateText(str: string): void {
+			if(this.textItem.text !== str) {
+				let old = this.textItem.text;
+				this.textItem.text = str;
+				this.undoStack.push(new SGraphyPropertyCommand(this, this.textItem, "text", old, str));
+			}
+		}
+
+		onItemMove(item: SGraphyItem, ...arg: any): void {
+            this.undoStack.push(new SGraphyMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
+        }
+
+	}
+
+	class TestView extends SGraphyView {
+        constructor() {
+			super("TextItem1");
+        }
+	}
+
+	class SGraphyPropertyCommand extends SGraphyCommand {
+		item: SGraphyItem;
+		/** 属性名称 */
+		propName: string;
+		/** 属性旧值 */
+		oldProp: <T>;
+		/** 属性新值 */
+        newProp: <T>;
+
+        constructor(scene: SGraphyScene, item: SGraphyItem, propName: string, oldProp: <T>, newProp: <T>) {
+            super(scene);
+			this.item = item;
+			this.propName = propName;
+            this.oldProp = oldProp;
+            this.newProp = newProp;
+        }
+
+        redo(): void {
+            this.item[this.propName] = this.newProp;
+            this.item.update();
+        }
+
+        undo(): void {
+            this.item[this.propName] = this.oldProp;
+            this.item.update();
+        }
+	}
+	
+	class SGraphyMoveCommand extends SGraphyCommand {
+        item: SGraphyItem;
+        old: SPoint;
+        pos: SPoint;
+
+        constructor(scene: SGraphyScene, item: SGraphyItem, 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) {
+                command.pos = this.pos;
+                return true;
+            }
+            return false;
+        }
+
+        redo(): void {
+            this.item.pos = new SPoint(this.pos.x, this.pos.y);
+            this.item.update();
+        }
+
+        undo(): void {
+            this.item.pos = new SPoint(this.old.x, this.old.y);
+            this.item.update();
+        }
+    }
+
+    export default {
+        mounted(): void {
+			let view = new TestView();
+			this.scene.updateText(this.input);
+			view.scene = this.scene;
+		},
+		data() {
+			return {
+				scene: new SScene(),
+				input: '测试文本'
+			}
+		},
+		methods: {
+			handleKeyup(value): void {
+				this.scene.updateText(this.input);
+			},
+			undo(): void {
+				this.scene.undoStack.undo();
+			},
+			redo(): void {
+				this.scene.undoStack.redo();
+			}
+		},
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 1 - 5
docs/.vuepress/components/example/web/graph/scene/Undo1.vue

@@ -10,8 +10,6 @@
 </template>
 
 <script lang="ts">
-    import Vue from "vue";
-    import ElementUI from "element-ui";
     import { SMouseEvent, SUndoStack } from "@saga-web/base";
     import { SColor, SPainter, SRect } from "@saga-web/draw";
     import { SGraphyItem, SGraphyScene, SGraphyView } from "@saga-web/graphy";
@@ -19,8 +17,6 @@
     import {SUndoCommand} from "@saga-web/base/lib";
     import {SPoint} from "@saga-web/draw/lib";
 
-    Vue.use(ElementUI);
-
     class RectItem extends SGraphyItem {
         width = 100;
         height = 100;
@@ -185,7 +181,7 @@
     export default {
         data() {
             return {
-                scene: new SScene();
+                scene: new SScene(),
             }
         },
         mounted(): void {

+ 1 - 7
docs/.vuepress/enhanceApp.js

@@ -5,10 +5,4 @@ import Vue from 'vue'
 import Element from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 
-export default ({
-        Vue,
-        options,
-        router
-    }) => {
-    Vue.use(Element)
-}
+Vue.use(Element);

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

@@ -23,6 +23,8 @@ const content = [
                 path: "/dev/saga-graphy/scene-manage/items/",
                 children: [
                     ["/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/undo", "Undo示例"]

+ 10 - 0
docs/dev/saga-graphy/scene-manage/items/image.md

@@ -0,0 +1,10 @@
+# 图片实例
+::: details 目录
+[[toc]]
+:::
+
+<example-web-graph-scene-ImageItem />
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/example/web/graph/scene/ImageItem.vue
+:::

+ 10 - 0
docs/dev/saga-graphy/scene-manage/items/text.md

@@ -0,0 +1,10 @@
+# 文本实例
+::: details 目录
+[[toc]]
+:::
+
+<example-web-graph-scene-TextItem />
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/example/web/graph/scene/TextItem.vue
+:::