ソースを参照

放大效果文档添加

haojianlong 4 年 前
コミット
8f23b12efa
2 ファイル変更122 行追加0 行削除
  1. 89 0
      docs/.vuepress/components/scene/enlarge.vue
  2. 33 0
      docs/guides/scene/enlarge.md

+ 89 - 0
docs/.vuepress/components/scene/enlarge.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="container">
+        <div>
+            <canvas id="enlarge" width="400" height="400" tabindex="0"/>
+        </div>
+        <div>
+            <canvas id="enlargeCopy" width="400" height="400" tabindex="0"/>
+            <div class="mask"></div>
+        </div>
+
+    </div>
+</template>
+
+<script lang="ts">
+    import { SGraphScene, SGraphView, SImageItem } from "@persagy-web/graph";
+    import { Component, Vue } from "vue-property-decorator";
+    import {SGraphItem} from "@persagy-web/graph/lib";
+    import { SPoint } from "@persagy-web/draw/lib";
+
+
+    @Component
+    export default class GIFCanvas extends Vue {
+        url: string = require('./items/1.jpg');
+        viewCopy: SGraphView | null = null;
+        view: SGraphView | null = null;
+        /**
+         * 页面挂载
+         */
+        mounted(): void {
+            // 步骤1
+            this.view = new SGraphView('enlarge');
+            this.viewCopy = new SGraphView('enlargeCopy');
+
+            // 步骤2
+            const scene = new SGraphScene();
+            const item = new SImageItem(null, this.url);
+            scene.addItem(item);
+
+            // 步骤3
+            item.connect('onMouseMove', this, this.mouseMove);
+
+            // 步骤4
+            this.viewCopy.scene = scene;
+            this.viewCopy.scale = 9;
+
+            this.view.scene = scene;
+            this.view.fitItemToView([item]);
+
+            this.view.scalable = false;
+        }
+
+        // 步骤5
+        mouseMove(item: SGraphItem, ev: MouseEvent[]) {
+            const p = item.mapToScene(ev[0].x, ev[0].y);
+            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)
+        }
+    }
+
+
+</script>
+<style scoped lang="less">
+    .container{
+        height: 500px;
+        & > div {
+            float: left;
+            position: relative;
+            width: 400px;
+            height: 400px;
+            canvas {
+                position: absolute;
+            }
+            .mask {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                z-index: 1;
+            }
+        }
+        #enlargeCopy{
+            margin-left: 10px;
+        }
+    }
+</style>

+ 33 - 0
docs/guides/scene/enlarge.md

@@ -1,2 +1,35 @@
 # 放大效果
 
+<scene-enlarge />
+
+### 实现原理
+
+放大区域根据鼠标在标准区域内的位置设置放大区域的中心点,放大区域的放大比例可以任意设置
+
+#### 实现步骤
+
+1.添加2个 canvas 元素,并且实例化2个 view 视图, 以下称为 标准视图 和 放大视图;
+
+2.实例化一个场景(scene), 并且在场景中添加需要展示的元素;
+
+3.为场景中展示的元素绑定``` onMouseMove ```事件, 参数意义依次为 (事件名, 接收者, 回调函数);
+
+4.先将场景(scene)的``` view ```属性设置为放大视图, 后再将该属性设置为标准视图;
+
+5.编写回调函数, 回调函数的功能为: 根据点坐标, 设置放大视图的中心位置;
+
+6.完毕; 鼠标移入标准视图,就可以在放大视图中看到效果了
+
+##### 详细请看以下 代码详情
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/scene/enlarge.vue
+:::
+
+::: tips 注意事项
+1.该示例为做演示效果设置了,标准视图的不可缩放``` scalable ```为``` false ```
+
+2.演示效果中放大视图设置的放缩比例为放大 9 倍
+
+3.为防止误操作,示例在放大视图上方设置了透明的 div, 使事件不会传入到下方的的 canvas 中
+:::