chore: small changes

src/painter/index.ts

@@ -237,8 +237,8 @@ export default class Painter extends Component<IOptions> {
 
     this.resizeSensor.addListener(this.onResize)
 
-    this.zoom.on('change', () => {
-      this.currentTool.onZoom()
+    this.zoom.on('change', (ratio) => {
+      this.currentTool.onZoom(ratio)
       this.resetViewport()
     })
   }

src/painter/tools/Brush.ts

@@ -109,7 +109,8 @@ export default class Brush extends Tool {
       this.commitDraw(this.ctx)
     }
   }
-  onZoom() {
+  onZoom(ratio: number) {
+    super.onZoom(ratio)
     this.cursorCircle.render()
   }
   private draw(x: number, y: number) {
@@ -120,8 +121,8 @@ export default class Brush extends Tool {
       return
     }
 
-    const startX = size > 1 ? Math.round(x - size / 2) : x
-    const startY = size > 1 ? Math.round(y - size / 2) : y
+    const startX = size > 1 ? x - Math.floor((size - 1) / 2) : x
+    const startY = size > 1 ? y - Math.round((size - 1) / 2) : y
     drawCtx.drawImage(this.brushCavnas, startX, startY)
     this.painter.renderCanvas()
   }

src/painter/tools/Eraser.ts

@@ -40,7 +40,8 @@ export default class Eraser extends Tool {
   onAfterRenderLayer(layer: Layer) {
     this.getTool().onAfterRenderLayer(layer)
   }
-  onZoom() {
+  onZoom(ratio: number) {
+    super.onZoom(ratio)
     this.cursorCircle.render()
   }
   private getTool(): Brush | Pencil {

src/painter/tools/Pencil.ts

@@ -100,7 +100,8 @@ export default class Pencil extends Tool {
       this.commitDraw(this.ctx)
     }
   }
-  onZoom() {
+  onZoom(ratio: number) {
+    super.onZoom(ratio)
     this.cursorCircle.render()
   }
   protected renderToolbar() {
@@ -129,8 +130,8 @@ export default class Pencil extends Tool {
 
     const { size, color } = this.drawOptions
     drawCtx.fillStyle = color === 'transparent' ? 'black' : color
-    const startX = size > 1 ? Math.round(x - size / 2) : x
-    const startY = size > 1 ? Math.round(y - size / 2) : y
+    const startX = size > 1 ? x - Math.floor((size - 1) / 2) : x
+    const startY = size > 1 ? y - Math.round((size - 1) / 2) : y
     drawCtx.fillRect(startX, startY, size, size)
     this.painter.renderCanvas()
   }

src/painter/tools/Tool.ts

@@ -24,6 +24,7 @@ export default class Tool extends Emitter {
   protected toolbar: LunaToolbar
   protected options: types.PlainObj<any> = {}
   protected isUsing = false
+  private zoomRatio = 1
   constructor(painter: Painter) {
     super()
     this.painter = painter
@@ -102,6 +103,9 @@ export default class Tool extends Emitter {
       })
     }
   }
+  onZoom(ratio: number) {
+    this.zoomRatio = ratio
+  }
   /* eslint-disable @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars */
   onMouseEnter(e: any) {
     this.$cursor.css({
@@ -114,18 +118,18 @@ export default class Tool extends Emitter {
     })
   }
   onAfterRenderLayer(layer: Layer) {}
-  onZoom() {}
   protected renderToolbar() {
     this.toolbar.clear()
   }
   private getXY(e: any) {
-    const { canvas, $canvas } = this
+    const { $canvas } = this
     const offset = $canvas.offset()
     const pageX = eventPage('x', e)
     const pageY = eventPage('y', e)
 
-    const x = Math.round(((pageX - offset.left) / offset.width) * canvas.width)
-    const y = Math.round(((pageY - offset.top) / offset.height) * canvas.height)
+    const ratio = this.zoomRatio
+    const x = Math.floor((pageX - offset.left) / ratio)
+    const y = Math.floor((pageY - offset.top) / ratio)
 
     this.lastX = this.x
     this.x = x

src/painter/tools/Zoom.ts

@@ -109,7 +109,7 @@ export default class Zoom extends Tool {
         })
         viewport.scrollLeft = target.scrollLeft
         viewport.scrollTop = target.scrollTop
-        this.emit('change')
+        this.emit('change', this.ratio)
       })
       .on('end', () => {
         this.isZooming = false