fix: 修复标尺工具文本因分辨率产生的问题

src/renderer/src/views/designer/workspace/stage/utils.ts

@@ -35,11 +35,12 @@ export function drawScaleplate({
   const ctx = canvas.getContext('2d')
   if (!ctx) return
 
-  ctx.clearRect(0, 0, canvas.width, canvas.height)
   // 计算出清晰canvas的原始宽度 = 样式宽度 * 屏幕倍率
   const drp = window.devicePixelRatio || 1
-  const width = (canvas.width = canvasStyleWidth * drp)
-  const height = (canvas.height = canvasStyleHeight * drp)
+  canvas.width = canvasStyleWidth * drp
+  canvas.height = canvasStyleHeight * drp
+  ctx.setTransform(drp, 0, 0, drp, 0, 0)
+  ctx.clearRect(0, 0, canvasStyleWidth, canvasStyleHeight)
 
   // 起始位置
   const hStartNum = (scrollX - originX) / scale
@@ -53,15 +54,15 @@ export function drawScaleplate({
   // 小刻度数
   const minTickNum = maxTickNum / 10
   // 计算最小刻度的距离
-  const minTickSpacing = (maxTickNum / 10) * scale * drp
+  const minTickSpacing = (maxTickNum / 10) * scale
 
-  const maxLength = direcotion === 'horizontal' ? width : height
+  const maxLength = direcotion === 'horizontal' ? canvasStyleWidth : canvasStyleHeight
   // 记录起始刻度值
   let startNum = Math.round(direcotion === 'horizontal' ? hStartNum : vStartNum)
   // 计算起始刻度偏移量
   let startTickOffset = 0
   if (startNum % minTickNum !== 0) {
-    startTickOffset += Math.abs(startNum % minTickNum) * scale * drp
+    startTickOffset += Math.abs(startNum % minTickNum) * scale
     startNum -= startNum % minTickNum
   }
 
@@ -97,40 +98,27 @@ function drawMaxTick(
   num: number,
   direcotion: 'horizontal' | 'vertical'
 ) {
-  const drp = window.devicePixelRatio || 1
   ctx.beginPath()
   if (direcotion === 'horizontal') {
-    ctx.moveTo(x + 1, 2)
-    ctx.lineTo(x + 1, y + 20 * drp)
+    ctx.moveTo(x + 0.5, 0)
+    ctx.lineTo(x + 0.5, 20)
   } else {
-    ctx.moveTo(x + 1, y)
-    ctx.lineTo(x + 20 * drp, y)
+    ctx.moveTo(0, y + 0.5)
+    ctx.lineTo(20, y + 0.5)
   }
   ctx.strokeStyle = '#666'
-  ctx.lineWidth = 1 * drp
+  ctx.lineWidth = 1
   ctx.stroke()
   ctx.fillStyle = '#eee'
-  ctx.font = '16px Arial'
+  ctx.font = '12px Arial'
+  ctx.textBaseline = 'top'
   if (direcotion === 'horizontal') {
-    ctx.fillText(num.toString(), x + 5, 10 * drp)
+    ctx.fillText(num.toString(), x + 5, 1)
   } else {
     ctx.save()
-    if (num / 10 >= 100) {
-      // >=1000
-      ctx.translate(8, y + 25 * drp)
-    } else if (num / 10 >= 10) {
-      // >=100
-      ctx.translate(8, y + 20 * drp)
-    } else if (num / 10 >= 1) {
-      // >=10
-      ctx.translate(8, y + 20 * drp)
-    } else if (num / 10 < 0) {
-      ctx.translate(8, y + 25 * drp)
-    } else {
-      ctx.translate(8, y + 10 * drp)
-    }
+    ctx.translate(1, y + 5)
     ctx.rotate(-Math.PI / 2)
-    ctx.fillText(num.toString(), 0, 10)
+    ctx.fillText(num.toString(), 0, 0)
     ctx.restore()
   }
 }
@@ -142,16 +130,15 @@ function drawMinTick(
   y: number,
   direcotion: 'horizontal' | 'vertical'
 ) {
-  const drp = window.devicePixelRatio || 1
   ctx.beginPath()
   if (direcotion === 'horizontal') {
-    ctx.moveTo(x + 1, 12 * drp)
-    ctx.lineTo(x + 1, y + 20 * drp)
+    ctx.moveTo(x + 0.5, 12)
+    ctx.lineTo(x + 0.5, 20)
   } else {
-    ctx.moveTo(12 * drp, y)
-    ctx.lineTo(x + 20 * drp, y)
+    ctx.moveTo(12, y + 0.5)
+    ctx.lineTo(20, y + 0.5)
   }
   ctx.strokeStyle = '#666'
-  ctx.lineWidth = 1 * drp
+  ctx.lineWidth = 1
   ctx.stroke()
 }