From e6584cf606dfe1d86a341af5fc3c01796486e5a5 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Fri, 16 Apr 2021 17:01:31 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E7=BD=91=E6=A0=BC=E7=BA=BF=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=EF=BC=88=E7=BD=AE=E9=A1=B6=E5=B1=82=E3=80=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E4=B8=8E=E8=83=8C=E6=99=AF=E7=9A=84=E5=AF=B9=E6=AF=94?=
 =?UTF-8?q?=E5=BA=A6=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Editor/Canvas/GridLines.vue | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/views/Editor/Canvas/GridLines.vue b/src/views/Editor/Canvas/GridLines.vue
index 3e80f36b..75c9db26 100644
--- a/src/views/Editor/Canvas/GridLines.vue
+++ b/src/views/Editor/Canvas/GridLines.vue
@@ -30,16 +30,9 @@ export default defineComponent({
 
     // 计算网格线的颜色，避免与背景的颜色太接近
     const gridColor = computed(() => {
-      if (!background.value || background.value.type === 'image') return 'rgba(100, 100, 100, 0.5)'
-      const color = background.value.color
-      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 bgColor = background.value?.color || '#fff'
+      const colorList = ['#000', '#fff']
+      return tinycolor.mostReadable(bgColor, colorList, { includeFallbackColors: true }).setAlpha(.5).toRgbString()
     })
 
     const gridSize = 50
@@ -80,5 +73,7 @@ export default defineComponent({
   bottom: 0;
   right: 0;
   overflow: visible;
+  z-index: 999;
+  pointer-events: none;
 }
 </style>
\ No newline at end of file