Browse Source

优化高分屏画板错位问题

caner 3 years ago
parent
commit
e1a5eed92e
1 changed files with 5 additions and 3 deletions
  1. 5 3
      src/pages/views/index/index.vue

+ 5 - 3
src/pages/views/index/index.vue

@@ -78,9 +78,10 @@ const onPointerUp = (event: PointerEvent) => {
 
 const restColor = (i: number) => {
   recorder.color(i)
-  const w = canvas?.width
-  const h = canvas?.height
-  resetStyle.value = `width:${w}px;height:${h}px; cursor: url(/pen/${i}.cur) 0 17, crosshair;`
+  const w = canvas?.width || 0
+  const h = canvas?.height || 0
+  const r = window.devicePixelRatio
+  resetStyle.value = `width:${w / r}px;height:${h / r}px; cursor: url(/pen/${i}.cur) 0 17, crosshair;`
 }
 
 // socket init
@@ -143,6 +144,7 @@ onUnmounted(() => {
   font-family: sans-serif;
   margin: 0;
   overflow: hidden;
+
   #canvas {
     display: block;
     cursor: url('/pen/0.cur') 0 17, crosshair;