fix: 画布优化

2026-04-23 00:00:12 +08:00 · 2022-12-16 19:08:34 +08:00
parent 924a7b5863
commit f64cd4dcf1
8 changed files with 289 additions and 81 deletions
@@ -0,0 +1,193 @@
+<template>
+    <div :style="{ position: 'relative', overflow: 'hidden', width: '100%', height: '100%' }">
+        <sketch-rule :thick="thick" :scale="scale" :width="canvasBox().width" :height="canvasBox().height"
+            :startX="startX" :startY="startY" :lines="lines"
+            :palette="{ bgColor: '#18181c', longfgColor: '#4d4d4d', shortfgColor: '#4d4d4d', fontColor: '#4d4d4d', shadowColor: '#18181c', borderColor: '#18181c', cornerActiveColor: '#18181c' }">
+        </sketch-rule>
+        <div ref="$app" class="screens" @scroll="handleScroll">
+            <div ref="$container" class="screenContainer" :style="{ width: screenContainerWidth + 'px' }">
+                <div id="refcanvasBox" ref="refcanvasBox" class="canvas" @mousedown="dragCanvas"
+                    :style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }">
+                    <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
+                        <slot></slot>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from 'vue'
+import { listen } from "dom-helpers"
+
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+const chartEditStore = useChartEditStore()
+
+const thick = 20
+const screenContainerWidth = 5000
+var prevMoveXVallue = [0, 0]
+var prevMoveYVallue = [0, 0]
+
+const $app = ref()
+const refcanvasBox = ref()
+const $container = ref()
+
+const scale = computed(() => {
+    return chartEditStore.getEditCanvas.scale
+})
+const startX = ref(0)
+const startY = ref(0)
+const lines = reactive({ h: [], v: [] })
+
+const handleWheel = (e: any) => {
+    e.preventDefault()
+    if (e.ctrlKey || e.metaKey) {
+        // const nextScale = parseFloat(Math.max(.2, scale.value - e.deltaY / canvasBox().height).toFixed(2))
+        // chartEditStore.setScale(nextScale)
+
+        chartEditStore.setScale(e.wheelDelta >= 120 ? scale.value + 0.01 : e.wheelDelta <= 120 ? scale.value - 0.01 : scale.value)
+    }
+}
+
+const isPressSpace = ref(false)
+const cursorStyle = ref('auto')
+
+window.onKeySpacePressHold = (isHold: boolean) => {
+    isPressSpace.value = isHold
+}
+watch(
+    () => isPressSpace.value,
+    newValue => {
+        cursorStyle.value = newValue ? 'grab' : 'auto'
+    }
+)
+
+onMounted(() => {
+    $app.value.addEventListener('wheel', handleWheel, { passive: false })
+    // 滚动居中
+    $app.value.scrollLeft = $container.value.getBoundingClientRect().width / 2 - canvasBox().width / 2
+
+})
+
+const handleScroll = () => {
+    const screensRect = $app.value.getBoundingClientRect()
+    const canvasRect = refcanvasBox.value.getBoundingClientRect()
+
+    // 标尺开始的刻度
+    startX.value = (screensRect.left + thick - canvasRect.left) / scale.value
+    startY.value = (screensRect.top + thick - canvasRect.top) / scale.value
+}
+// 处理标尺重制大小
+watch(
+    () => scale.value,
+    (newValue, oldValue) => {
+        if (oldValue !== newValue) {
+            handleScroll()
+            chartEditStore.setScale(newValue)
+        }
+    }
+)
+
+onUnmounted(() => {
+    $app.value.removeEventListener('wheel', handleWheel)
+})
+
+const dragCanvas = (e: any) => {
+    if (!window.$KeyboardActive?.space) return
+
+    // @ts-ignore
+    document.activeElement?.blur()
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    const startX = e.pageX
+    const startY = e.pageY
+
+    const un1 = listen(window, "mousemove", (e: any) => {
+
+        const nx = e.pageX - startX
+        const ny = e.pageY - startY
+
+        const [prevMoveX1, prevMoveX2] = prevMoveXVallue
+        const [prevMoveY1, prevMoveY2] = prevMoveYVallue
+
+        prevMoveXVallue = [prevMoveX2, nx]
+        prevMoveYVallue = [prevMoveY2, ny]
+
+        $app.value.scrollLeft -= prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)
+        $app.value.scrollTop -= prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1)
+    })
+    const un2 = listen(window, "mouseup", () => {
+        un1()
+        un2()
+        prevMoveXVallue = [0, 0]
+        prevMoveYVallue = [0, 0]
+    })
+}
+
+const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
+
+const canvasBox = () => {
+    const layoutDom = document.getElementById('go-chart-edit-layout')
+    if (layoutDom) {
+        return {
+            height: layoutDom.clientHeight - 40 - 44,
+            width: layoutDom.clientWidth
+        }
+    }
+    return {
+        width: width.value,
+        height: height.value
+    }
+}
+</script>
+<style lang="scss" scoped>
+.screens {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    user-select: none;
+
+    /* firefox */
+    scrollbar-color: rgba(144, 146, 152, .3) transparent;
+    scrollbar-width: thin;
+
+    /* chrome */
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-track-piece {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar {
+        width: 7px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background-color: rgba(144, 146, 152, .3);
+    }
+}
+
+.screenContainer {
+    position: absolute;
+    height: 3000px;
+}
+
+.canvas {
+    position: absolute;
+    top: 80px;
+    left: 50%;
+    transform-origin: 50% 0;
+
+    &:hover {
+        cursor: v-bind('cursorStyle');
+    }
+
+    &:active {
+        cursor: crosshair;
+    }
+}
+</style>