|
@@ -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>
|