persagy-web-doc/docs/.vuepress/components/scene/enlarge.vue

<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.view.scene = scene;
            this.view.fitItemToView([item]);

            this.viewCopy.scale = 3 * this.view.scale;

            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>