优化画笔偏移

Signed-off-by: Caner <5658514@qq.com>

src/pages/views/index/index.vue

@@ -44,6 +44,7 @@ const colors = [ '⚫️', '🔵', '🟢', '🟣', '🔴', '🟤', '🟠', '🟡
 let canvas: HTMLCanvasElement | null = null
 let context: CanvasRenderingContext2D | null = null
 const resetStyle = ref('')
+
 // canvas fn
 const onPointerMove = (event: PointerEvent) => {
   if (event.isPrimary) {
@@ -77,7 +78,9 @@ const onPointerUp = (event: PointerEvent) => {
 
 const restColor = (i: number) => {
   recorder.color(i)
-  resetStyle.value = `cursor: url(/pen/${i}.cur) 0 17, crosshair;`
+  const w = canvas?.width
+  const h = canvas?.height
+  resetStyle.value = `width:${w}px;height:${h}px; cursor: url(/pen/${i}.cur) 0 17, crosshair;`
 }
 
 // socket init
@@ -103,8 +106,8 @@ socket.on('connect_error', () => {
   status.value = colors[4]
 })
 
-onMounted(() => {
-  // init canvas
+//  init canvas
+const intCanvas = () => {
   canvas = document.getElementById('canvas') as HTMLCanvasElement
   canvas.width = window.innerWidth * window.devicePixelRatio
   canvas.height = window.innerHeight * window.devicePixelRatio
@@ -114,19 +117,20 @@ onMounted(() => {
   context.lineWidth = 0.7 * window.devicePixelRatio
   context.fillStyle = 'rgb(238, 238, 238)'
   context.fillRect(0, 0, canvas.width, canvas.height)
+}
+
+onMounted(() => {
+  intCanvas()
   nextTick(() => {
     socket.connect()
   })
-  const isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
-  const isAndroid = navigator.userAgent.includes('Android') || navigator.userAgent.includes('Linux') // g
-  if (isIOS || isAndroid) {
-    alert('建议用电脑打开')
-  }
+  window.addEventListener('resize', intCanvas)
 })
 
 onUnmounted(() => {
   if (!socket) return
   socket.disconnect()
+  window.removeEventListener('resize', intCanvas)
   context = null
   canvas = null
   recorder = null
@@ -139,7 +143,6 @@ onUnmounted(() => {
   font-family: sans-serif;
   margin: 0;
   overflow: hidden;
-
   #canvas {
     display: block;
     cursor: url('/pen/0.cur') 0 17, crosshair;
@@ -171,9 +174,11 @@ onUnmounted(() => {
     border-radius: 25px;
     user-select: none;
     pointer-events: auto;
-    &:last-child{
+
+    &:last-child {
       margin-left: 5px;
     }
+
     &>span {
       span {
         margin: 0 3px;