UserRuler.vue

<template>
    <div class="wrapper" id="wrapper">
        <SketchRule
            :lang="lang"
            :thick="thick"
            :scale="scale"
            :width="width"
            :height="height"
            :startX="startX"
            :startY="startY"
            :shadow="shadow"
            :horLineArr="lines.h"
            :verLineArr="lines.v"
            :cornerActive="true"
            @handleLine="handleLine"
            @onCornerClick="handleCornerClick"
        >
        </SketchRule>
        <div
            ref='screensRef'
            id="screens"
            @wheel="handleWheel"
            @scroll="handleScroll"
        >
            <div ref="containerRef" class="screen-container">
                <div id="canvas" :style="canvasStyle" />
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import SketchRule from "vue-sketch-ruler";
const rectWidth = 960;
const rectHeight = 720;
export default Vue.extend({
    data() {
        return {
            scale: 1, //658813476562495, //1,
            startX: 0,
            startY: 0,
            lines: {
                h: [100, 200],
                v: [100, 200]
            },
            thick: 20,
            width: 500,
            height: 400,
            lang: "zh-CN", // 中英文
            isShowRuler: true, // 显示标尺
            isShowReferLine: true // 显示参考线
        }
    },
    components: {
        SketchRule
    },
    computed: {
        shadow() {
            return {
                x: 0,
                y: 0,
                width: rectWidth,
                height: rectHeight
            }
        },
        canvasStyle() {
            return {
                width: rectWidth + 'px',
                height: rectHeight + 'px',
                transform: `scale(${this.scale})`
            }
        }
    },
    methods: {
        handleLine(lines) {
            this.lines = lines;
        },
        handleCornerClick() {
            return;
        },
        handleScroll() {
            const screensRect = document
                .querySelector("#screens")
                .getBoundingClientRect();
            const canvasRect = document
                .querySelector("#canvas")
                .getBoundingClientRect();

            // 标尺开始的刻度
            const startX = (screensRect.left + this.thick - canvasRect.left) / this.scale;
            const startY = (screensRect.top + this.thick - canvasRect.top) / this.scale;

            this.startX = startX >> 0;
            this.startY = startY >> 0;
        },
        // 控制缩放值
        handleWheel(e) {
            if (e.ctrlKey || e.metaKey) {
                e.preventDefault();
                const nextScale = parseFloat(
                    Math.max(0.2, this.scale - e.deltaY / 500).toFixed(2)
                );
                this.scale = nextScale;
            }
            this.$nextTick(() => {
                this.handleScroll();
            });
        },
        initSize() {
            const wrapperRect = document
                .querySelector("#wrapper")
                .getBoundingClientRect();
            const borderWidth = 1;
            this.width = wrapperRect.width - this.thick - borderWidth;
            this.height = wrapperRect.height - this.thick - borderWidth;
        }
    },
    mounted() {
        // 滚动居中
        this.$refs.screensRef.scrollLeft =
        this.$refs.containerRef.getBoundingClientRect().width / 2 - 300; // 300 = #screens.width / 2
        this.$nextTick(() => {
            this.initSize();
        });
    }
});
</script>
<style>
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overflow: hidden; }

body * {
  box-sizing: border-box;
  user-select: none; }

.wrapper {
  background-color: #f5f5f5;
  position: absolute;
  top: 100px;
  left: 100px;
  width: 900px;
  height: 700px;
  border: 1px solid #DADADC; }

#screens {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto; }

.screen-container {
  position: absolute;
  width: 5000px;
  height: 3000px; }

.scale-value {
  position: absolute;
  left: 0;
  bottom: 100%; }

.button {
  position: absolute;
  left: 100px;
  bottom: 100%; }

.button-ch {
  position: absolute;
  left: 200px;
  bottom: 100%; }
.button-en {
  position: absolute;
  left: 230px;
  bottom: 100%; }

#canvas {
  position: absolute;
  top: 80px;
  left: 50%;
  margin-left: -80px;
  width: 160px;
  height: 200px;
  background: lightblue;
  transform-origin: 50% 0; }
</style>