网格线优化

2021-01-19 23:21:26 +08:00 · 2021-01-19 23:21:26 +08:00 · c77dfb4c5a
parent a22463fa9c
commit c77dfb4c5a
5 changed files with 85 additions and 72 deletions
--- a/src/views/Editor/Canvas/GridLines.vue
+++ b/src/views/Editor/Canvas/GridLines.vue
@ -1,39 +1,69 @@
 <template>
-  <div 
-    class="grid-lines"
-    :style="style"
-  ></div>
+  <SvgWrapper class="grid-lines">
+    <path 
+      :style="{
+        transform: `scale(${canvasScale})`,
+      }" 
+      :d="path" 
+      fill="none" 
+      :stroke="gridColor" 
+      stroke-width="0.3" 
+      shape-rendering="crispEdges"
+      stroke-dasharray="5"
+    ></path>
+  </SvgWrapper>
 </template>

 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, Ref } from 'vue'
+import { useStore } from 'vuex'
+import tinycolor from 'tinycolor2'
+import { State } from '@/store'
+import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
+import { SlideBackground } from '@/types/slides'

 export default defineComponent({
  name: 'grid-lines',
-  props: {
-    gridSize: {
-      type: Number,
-      default: 20,
-    },
-    gridColor: {
-      type: String,
-      default: 'rgba(100, 100, 100, 0.1)',
-    },
-  },
  setup(props) {
-    const style = computed(() => {
-      const gridSize = props.gridSize + 'px'
-      const gridSpacing = props.gridSize - 1 + 'px'
-      const gridColor = props.gridColor
+    const store = useStore<State>()
+    const canvasScale = computed(() => store.state.canvasScale)
+    const background: Ref<SlideBackground | undefined> = computed(() => store.getters.currentSlide.background)

-      return {
-        backgroundImage: `linear-gradient(transparent ${gridSpacing}, ${gridColor} ${gridSpacing}, ${gridColor} ${gridSize}), linear-gradient(90deg, transparent ${gridSpacing}, ${gridColor} ${gridSpacing}, ${gridColor} ${gridSize})`,
-        backgroundSize: `${gridSize} ${gridSize}`,
+    const gridColor = computed(() => {
+      if(!background.value || background.value.type === 'image') return 'rgba(100, 100, 100, 0.5)'
+      const color = background.value.value
+      const rgba = tinycolor(color).toRgb()
+      const newRgba = {
+        r: rgba.r > 128 ? rgba.r - 128 : rgba.r + 127,
+        g: rgba.g > 128 ? rgba.g - 128 : rgba.g + 127,
+        b: rgba.b > 128 ? rgba.b - 128 : rgba.b + 127,
+        a: 0.5
      }
+      return `rgba(${[newRgba.r, newRgba.g, newRgba.b, newRgba.a].join(',')})`
    })

+    const gridSize = 50
+
+    const getPath = () => {
+      const maxX = VIEWPORT_SIZE
+      const maxY = VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO
+
+      let path = ''
+      for(let i = 0; i <= Math.floor(maxY / gridSize); i++) {
+        path += `M0 ${i * gridSize}, L${maxX} ${i * gridSize}`
+      }
+      for(let i = 0; i <= Math.floor(maxX / gridSize); i++) {
+        path += `M${i * gridSize} 0, L${i * gridSize} ${maxY}`
+      }
+      return path
+    }
+
    return {
-      style,
+      canvasScale,
+      gridColor,
+      width: VIEWPORT_SIZE,
+      height: VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO,
+      path: getPath(),
    }
  },
 })
@ -41,11 +71,13 @@ export default defineComponent({

 <style lang="scss" scoped>
 .grid-lines {
+  width: 100%;
+  height: 100%;
  position: absolute;
  top: 0;
-  bottom: 0;
  left: 0;
+  bottom: 0;
  right: 0;
-  background-position: 0 0;
+  overflow: visible;
 }
 </style>
--- a/src/views/Editor/Canvas/SlideBackground.vue
+++ b/src/views/Editor/Canvas/SlideBackground.vue
@ -3,10 +3,7 @@
    class="slide-background"
    :style="backgroundStyle"
  >
-    <template v-if="showGridLines">
-      <GridLines />
-      <GridLines :gridSize="100" gridColor="rgba(100, 100, 100, 0.35)" />
-    </template>
+    <GridLines v-if="showGridLines" />
  </div>
 </template>

--- a/src/views/Editor/Canvas/hooks/useDragElement.ts
+++ b/src/views/Editor/Canvas/hooks/useDragElement.ts
@ -29,7 +29,7 @@ export default (
    const originElementList: PPTElement[] = JSON.parse(JSON.stringify(elementList.value))
    const originActiveElementList = originElementList.filter(el => activeElementIdList.value.includes(el.id))

-    const sorptionRange = 3
+    const sorptionRange = 5
    const elOriginLeft = element.left
    const elOriginTop = element.top
    const elOriginWidth = element.width
@ -211,25 +211,19 @@ export default (
        const min = Math.min(...range, targetMinX, targetMaxX)
        const max = Math.max(...range, targetMinX, targetMaxX)
        
-        if(Math.abs(targetMinY - value) < sorptionRange) {
-          if(!isHorizontalAdsorbed) {
-            targetTop = targetTop - (targetMinY - value)
-            isHorizontalAdsorbed = true
-          }
+        if(Math.abs(targetMinY - value) < sorptionRange && !isHorizontalAdsorbed) {
+          targetTop = targetTop - (targetMinY - value)
+          isHorizontalAdsorbed = true
          _alignmentLines.push({type: 'horizontal', axis: {x: min - 50, y: value}, length: max - min + 100})
        }
-        if(Math.abs(targetMaxY - value) < sorptionRange) {
-          if(!isHorizontalAdsorbed) {
-            targetTop = targetTop - (targetMaxY - value)
-            isHorizontalAdsorbed = true
-          }
+        if(Math.abs(targetMaxY - value) < sorptionRange && !isHorizontalAdsorbed) {
+          targetTop = targetTop - (targetMaxY - value)
+          isHorizontalAdsorbed = true
          _alignmentLines.push({type: 'horizontal', axis: {x: min - 50, y: value}, length: max - min + 100})
        }
-        if(Math.abs(targetCenterY - value) < sorptionRange) {
-          if(!isHorizontalAdsorbed) {
-            targetTop = targetTop - (targetCenterY - value)
-            isHorizontalAdsorbed = true
-          }
+        if(Math.abs(targetCenterY - value) < sorptionRange && !isHorizontalAdsorbed) {
+          targetTop = targetTop - (targetCenterY - value)
+          isHorizontalAdsorbed = true
          _alignmentLines.push({type: 'horizontal', axis: {x: min - 50, y: value}, length: max - min + 100})
        }
      }
@ -238,25 +232,19 @@ export default (
        const min = Math.min(...range, targetMinY, targetMaxY)
        const max = Math.max(...range, targetMinY, targetMaxY)

-        if(Math.abs(targetMinX - value) < sorptionRange) {
-          if(!isVerticalAdsorbed) {
-            targetLeft = targetLeft - (targetMinX - value)
-            isVerticalAdsorbed = true
-          }
+        if(Math.abs(targetMinX - value) < sorptionRange && !isVerticalAdsorbed) {
+          targetLeft = targetLeft - (targetMinX - value)
+          isVerticalAdsorbed = true
          _alignmentLines.push({type: 'vertical', axis: {x: value, y: min - 50}, length: max - min + 100})
        }
-        if(Math.abs(targetMaxX - value) < sorptionRange) {
-          if(!isVerticalAdsorbed) {
-            targetLeft = targetLeft - (targetMaxX - value)
-            isVerticalAdsorbed = true
-          }
+        if(Math.abs(targetMaxX - value) < sorptionRange && !isVerticalAdsorbed) {
+          targetLeft = targetLeft - (targetMaxX - value)
+          isVerticalAdsorbed = true
          _alignmentLines.push({type: 'vertical', axis: {x: value, y: min - 50}, length: max - min + 100})
        }
-        if(Math.abs(targetCenterX - value) < sorptionRange) {
-          if(!isVerticalAdsorbed) {
-            targetLeft = targetLeft - (targetCenterX - value)
-            isVerticalAdsorbed = true
-          }
+        if(Math.abs(targetCenterX - value) < sorptionRange && !isVerticalAdsorbed) {
+          targetLeft = targetLeft - (targetCenterX - value)
+          isVerticalAdsorbed = true
          _alignmentLines.push({type: 'vertical', axis: {x: value, y: min - 50}, length: max - min + 100})
        }
      }
--- a/src/views/Editor/Canvas/hooks/useDragLineElement.ts
+++ b/src/views/Editor/Canvas/hooks/useDragLineElement.ts
@ -19,7 +19,7 @@ export default (elementList: Ref<PPTElement[]>) => {
  const dragLineElement = (e: MouseEvent, element: PPTLineElement, command: OperateLineHandler) => {
    let isMouseDown = true

-    const sorptionRange = 10
+    const sorptionRange = 8

    const startPageX = e.pageX
    const startPageY = e.pageY
--- a/src/views/Editor/Canvas/hooks/useScaleElement.ts
+++ b/src/views/Editor/Canvas/hooks/useScaleElement.ts
@ -175,7 +175,7 @@ export default (
    
    // 对齐吸附方法
    const alignedAdsorption = (currentX: number | null, currentY: number | null) => {
-      const sorptionRange = 3
+      const sorptionRange = 5

      const _alignmentLines: AlignmentLineProps[] = []
      let isVerticalAdsorbed = false
@ -188,11 +188,9 @@ export default (
          const min = Math.min(...range, currentX || 0)
          const max = Math.max(...range, currentX || 0)
          
-          if(Math.abs(currentY - value) < sorptionRange) {
-            if(!isHorizontalAdsorbed) {
-              correctionVal.offsetY = currentY - value
-              isHorizontalAdsorbed = true
-            }
+          if(Math.abs(currentY - value) < sorptionRange && !isHorizontalAdsorbed) {
+            correctionVal.offsetY = currentY - value
+            isHorizontalAdsorbed = true
            _alignmentLines.push({ type: 'horizontal', axis: {x: min - 50, y: value}, length: max - min + 100 })
          }
        }
@ -203,11 +201,9 @@ export default (
          const min = Math.min(...range, (currentY || 0))
          const max = Math.max(...range, (currentY || 0))

-          if(Math.abs(currentX - value) < sorptionRange) {
-            if(!isVerticalAdsorbed) {
-              correctionVal.offsetX = currentX - value
-              isVerticalAdsorbed = true
-            }
+          if(Math.abs(currentX - value) < sorptionRange && !isVerticalAdsorbed) {
+            correctionVal.offsetX = currentX - value
+            isVerticalAdsorbed = true
            _alignmentLines.push({ type: 'vertical', axis: {x: value, y: min - 50}, length: max - min + 100 })
          }
        }