Просмотр исходного кода

Merge branch 'master' of http://39.106.8.246:3003/doc/persagy-web-doc

YaolongHan 4 лет назад
Родитель
Сommit
273fa5556b

+ 212 - 0
docs/.vuepress/components/scene/eagleEyeMap.vue

@@ -0,0 +1,212 @@
+<template>
+    <div class="container">
+        <div>
+            <canvas id="enlargeCopy" width="1200" height="600" tabindex="0"/>
+
+            <canvas id="enlarge" width="200" height="200" tabindex="0"/>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import { SGraphScene, SGraphView, SImageItem } from "@persagy-web/graph";
+    import { Component, Vue } from "vue-property-decorator";
+    import {SPoint, SColor, SPainter, SRect} from "@persagy-web/draw/lib";
+    import {SObject, SMouseButton, SMouseEvent} from "@persagy-web/base/lib";
+    import { SFloorParser } from "@persagy-web/big/lib";
+
+    class LargeView extends SGraphView {
+        // 记录左键按下位置
+        private _leftKeyPos: SPoint = new SPoint();
+        // 可视区域即 大图中展示的区域 在 标准视图中的位置及大小
+        // 可视区域宽度
+        _rectW: number = 200;
+        get rectW():number{
+            return this._rectW;
+        }
+        set rectW(v:number) {
+            this._rectW = v;
+            this.update()
+        }
+        // 可视区域高度
+        _rectH: number = 100;
+        get rectH():number{
+            return this._rectH;
+        }
+        set rectH(v:number) {
+            this._rectH = v;
+            this.update()
+        }
+        // 可视区域中心点
+        rectC: SPoint = new SPoint(100, 100);
+        // 可视区域描述的矩形
+        rect: SRect = new SRect();
+        // 鼠标按下的点是否在区域内
+        inRect: boolean = false;
+
+        /**
+         * 鼠标按下事件
+         *
+         * @param event       事件参数
+         */
+        protected onMouseDown(event: MouseEvent): void {
+            let se = new SMouseEvent(event);
+            // 判断是否在可视区域内
+            if (this.rect.contains(event.offsetX, event.offsetY)) {
+                this.inRect = true;
+            }
+            // 设置可视区域中心点
+            this.rectC.x = event.offsetX;
+            this.rectC.y = event.offsetY;
+            this.update();
+            // 按下鼠标左键
+            if (se.buttons & SMouseButton.LeftButton) {
+                this._leftKeyPos.x = se.x;
+                this._leftKeyPos.y = se.y;
+            }
+            // 将事件对象中的坐标转为场景坐标,并抛出事件
+            const ev = this.toSceneMotionEvent(event);
+            this.$emit('viewMouseMove', ev);
+        }
+
+        /**
+         * 鼠标移动事件
+         *
+         * @param event       事件参数
+         */
+        protected onMouseMove(event: MouseEvent): void {
+            // 按下的点如果在可视区域内,则执行移动可视区域方法
+            if (this.inRect) {
+                this.rectC.x = event.offsetX;
+                this.rectC.y = event.offsetY;
+                const ev = this.toSceneMotionEvent(event);
+                this.$emit('viewMouseMove', ev);
+                this.update();
+            }
+        }
+
+        /**
+         * 鼠标抬起事件
+         *
+         * @param event       事件参数
+         */
+        protected onMouseUp(event: MouseEvent): void {
+            // 按键抬起时 初始化值
+            this.inRect = false;
+        }
+        /**
+         * 绘制前景
+         *
+         * @param painter 绘制对象
+         */
+        protected drawForeground(painter: SPainter): void {
+            // 设置画笔,画刷样式
+            painter.pen.color = new SColor('#efb42f');
+            painter.pen.lineWidth = 2;
+            painter.brush.color = new SColor('#efb42f38');
+            // 绘制可视区域
+            this.rect = new SRect(this.rectC.x - this.rectW / 2, this.rectC.y - this.rectH / 2, this.rectW, this.rectH);
+            painter.drawRect(this.rect);
+        }
+    }
+
+    @Component
+    export default class GIFCanvas extends Vue {
+        json: string = require('../../../public/assets/map/3.json');
+        viewCopy: SGraphView | null = null;
+        view: LargeView | null = null;
+        /**
+         * 页面挂载
+         */
+        mounted(): void {
+            // 1.实例化2个视图
+            this.view = new LargeView('enlarge'); // 标准视图
+            this.viewCopy = new SGraphView('enlargeCopy'); // 放大视图
+            // 实例化1个场景
+            const scene = new SGraphScene();
+            // 在场景中添加楼层平面图
+            let parser = new SFloorParser();
+            // @ts-ignore
+            parser.parseData(JSON.parse(JSON.stringify(this.json.EntityList[0].Elements)));
+            parser.spaceList.forEach(t => {scene.addItem(t);t.fillColor=new SColor('#47bbde75');t.connect('onMouseDown', this, this.spaceClick)});
+
+            // 监听标准视图的事件, 回调函数是 mouseMove
+            this.view.connect('viewMouseMove', this, this.mouseMove);
+
+            // 先将场景设置到放大视图中
+            this.viewCopy.scene = scene;
+            // 再设置到标准视图中
+            this.view.scene = scene;
+            // 场景适配标准视图,
+            this.view.fitSceneToView(1);
+            // 设置放大视图为此时标准视图的 6 倍, 注意 6 = 1200 / 200; 1200是放大视图的宽,200 是标准视图中 可视区域的宽
+            this.viewCopy.scale = 6 * this.view.scale;
+            // 设置标准视图不可放缩
+            this.view.scalable = false;
+            // 监听放大视图中滚轮放缩事件, wheelScale 是回调
+            this.viewCopy.connect('onMouseWheel', this, this.wheelScale);
+            // 监听放大视图中滚轮按下拖动事件, midMouseMove 是回调
+            this.viewCopy.connect('midMouseMove', this, this.midMouseMove);
+
+            // 将标准视图中 可视区域的中心点坐标转为场景坐标
+            const p1 = this.view.mapToScene(this.view.rectC.x, this.view.rectC.y);
+            // 在放大视图中 将场景定位到 相应位置
+            this.locationGraphy(p1);
+        }
+
+        // 步骤5
+        mouseMove(item: SObject, ev: any[]) {
+            const p = ev[0];
+            this.locationGraphy(p)
+        }
+        // 定位点到放大视图的中心点
+        locationGraphy(point:any) {
+            let centerX = (this.viewCopy!!.width / 2) - point.x * this.viewCopy!!.scale;
+            let centerY = (this.viewCopy!!.height / 2) - point.y * this.viewCopy!!.scale;
+            this.viewCopy!!.origin = new SPoint(centerX, centerY)
+        }
+        // 放大视图 滚轮放缩事件回调
+        wheelScale(item: SObject, ev: any[]) {
+            // ev[0] view 的放缩比例
+            // ev[1] true 上滚 放大
+            if (this.view && this.viewCopy) {
+                if (ev[1]) {
+                    this.view.rectW /= this.viewCopy.wheelZoom;
+                    this.view.rectH /= this.viewCopy.wheelZoom;
+                } else {
+                    this.view.rectW *= this.viewCopy.wheelZoom;
+                    this.view.rectH *= this.viewCopy.wheelZoom;
+                }
+            }
+        }
+        // 放大视图 滚轮按下拖动回调
+        midMouseMove(item: SObject, ev: any[]) {
+            if (this.viewCopy && this.view) {
+                const p = this.viewCopy.mapToScene(600, 300);
+                const p2 = this.view.mapFromScene(p.x, p.y);
+                this.view.rectC.x = p2.x;
+                this.view.rectC.y = p2.y;
+                this.view.update();
+            }
+        }
+        spaceClick(){
+            console.log(arguments)
+        }
+    }
+
+
+</script>
+<style scoped lang="less">
+    .container{
+        & > div{
+            position: relative;
+            height: 600px;
+        }
+        canvas {
+            position: absolute;
+        }
+        #enlarge{
+            background: #fff;
+        }
+    }
+</style>

+ 7 - 0
docs/.vuepress/styles/palette.styl

@@ -19,3 +19,10 @@ canvas:focus{
 .el-table__body, .el-table__footer, .el-table__header{
   margin:0;
 }
+.custom-block.details{
+    margin: 1em 0;
+    padding 1em 1.6em;
+}
+.page-edit{
+    padding: 0.8em 0;
+}

+ 3 - 2
docs/guides/index.js

@@ -58,9 +58,10 @@ const content = [
                 title: "综合示例",
                 children: [
                     ["/guides/scene/items/clock", "时钟"],
-                    ["/guides/scene/regularPolygon", "正多边形"],
-                    ["/guides/scene/star", "星形"],
+                    // ["/guides/scene/regularPolygon", "正多边形"],
+                    // ["/guides/scene/star", "星形"],
                     ["/guides/scene/enlarge", "放大效果"],
+                    ["/guides/scene/eagleEyeMap", "鹰眼图"],
                 ]
             },
         ]

+ 7 - 0
docs/guides/scene/eagleEyeMap.md

@@ -0,0 +1,7 @@
+# 鹰眼图
+
+<scene-eagleEyeMap />
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/scene/eagleEyeMap.vue
+:::

Разница между файлами не показана из-за своего большого размера
+ 263235 - 0
docs/public/assets/map/3.json