@leafer-ui/hit 1.0.0-rc.19 → 1.0.0-rc.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/hit",
-  "version": "1.0.0-rc.19",
+  "version": "1.0.0-rc.20",
   "description": "@leafer-ui/hit",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,11 +22,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-rc.19",
-    "@leafer-ui/draw": "1.0.0-rc.19"
+    "@leafer/core": "1.0.0-rc.20",
+    "@leafer-ui/draw": "1.0.0-rc.20"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-rc.19",
-    "@leafer-ui/interface": "1.0.0-rc.19"
+    "@leafer/interface": "1.0.0-rc.20",
+    "@leafer-ui/interface": "1.0.0-rc.20"
   }
 }

package/src/LeafHit.ts

@@ -1,16 +1,13 @@
-import { IRadiusPointData } from '@leafer/interface'
+import { IRadiusPointData, ILeaferCanvas } from '@leafer/interface'
 import { Leaf, PointHelper, BoundsHelper } from '@leafer/core'
 
 
 const { toInnerRadiusPointOf, copy, setRadius } = PointHelper
 const inner = {} as IRadiusPointData
 
-Leaf.prototype.__hitWorld = function (point: IRadiusPointData): boolean {
-    if (this.__layout.hitCanvasChanged || !this.__hitCanvas) {
-        this.__updateHitCanvas()
-        if (!this.__layout.boundsChanged) this.__layout.hitCanvasChanged = false
-    }
+const leaf = Leaf.prototype
 
+leaf.__hitWorld = function (point: IRadiusPointData): boolean {
     if (this.__.hitRadius) {
         copy(inner, point), point = inner
         setRadius(point, this.__.hitRadius)
@@ -18,9 +15,26 @@ Leaf.prototype.__hitWorld = function (point: IRadiusPointData): boolean {
 
     toInnerRadiusPointOf(point, this.__world, inner)
 
-    if (this.__.hitBox) {
+    const { width, height } = this.__world
+    const isSmall = width < 10 && height < 10
+
+    if (this.__.hitBox || isSmall) {
         if (BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner)) return true
+        if (isSmall) return false
+    }
+
+    if (this.__layout.hitCanvasChanged || !this.__hitCanvas) {
+        this.__updateHitCanvas()
+        if (!this.__layout.boundsChanged) this.__layout.hitCanvasChanged = false
     }
 
     return this.__hit(inner)
-}
+}
+
+leaf.__hitFill = function (inner: IRadiusPointData): boolean { return this.__hitCanvas?.hitFill(inner, this.__.windingRule) }
+
+leaf.__hitStroke = function (inner: IRadiusPointData, strokeWidth: number): boolean { return this.__hitCanvas?.hitStroke(inner, strokeWidth) }
+
+leaf.__hitPixel = function (inner: IRadiusPointData): boolean { return this.__hitCanvas?.hitPixel(inner, this.__layout.renderBounds, this.__hitCanvas.hitScale) }
+
+leaf.__drawHitPath = function (canvas: ILeaferCanvas): void { if (canvas) this.__drawRenderPath(canvas) }

package/src/RectHit.ts

@@ -11,6 +11,6 @@ Rect.prototype.__updateHitCanvas = function () {
     if (this.stroke || this.cornerRadius) ui.__updateHitCanvas.call(this)
 }
 
-Rect.prototype.__hitFill = function (inner: IRadiusPointData, windingRule?: string): boolean {
-    return this.__hitCanvas ? ui.__hitFill.call(this, inner, windingRule) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner)
+Rect.prototype.__hitFill = function (inner: IRadiusPointData): boolean {
+    return this.__hitCanvas ? ui.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner)
 }

package/src/UIHit.ts

@@ -1,34 +1,71 @@
 import { IRadiusPointData } from '@leafer/interface'
-import { Platform } from '@leafer/core'
-import { UI } from '@leafer-ui/draw'
+import { Platform, Matrix, tempBounds } from '@leafer/core'
+import { UI, ImageManager } from '@leafer-ui/draw'
 
 
-UI.prototype.__updateHitCanvas = function (): void {
-    if (!this.__hitCanvas) this.__hitCanvas = this.leafer.hitCanvasManager.getPathType(this)
+const matrix = new Matrix()
+const ui = UI.prototype
+
+ui.__updateHitCanvas = function (): void {
+    const data = this.__, { hitCanvasManager } = this.leafer
+
+    const isHitPixelFill = data.__pixelFill && data.hitFill === 'pixel'
+    const isHitPixelStroke = data.__pixelStroke && data.hitStroke === 'pixel'
+    const isHitPixel = isHitPixelFill || isHitPixelStroke
+
+    if (!this.__hitCanvas) this.__hitCanvas = isHitPixel ? hitCanvasManager.getPixelType(this, { contextSettings: { willReadFrequently: true } }) : hitCanvasManager.getPathType(this)
+
     const h = this.__hitCanvas
+
+    if (isHitPixel) {
+        const { renderBounds } = this.__layout
+        const size = Platform.image.hitCanvasSize
+        const scale = h.hitScale = tempBounds.set(0, 0, size, size).getFitMatrix(renderBounds, 0.5).a
+        const { x, y, width, height } = tempBounds.set(renderBounds).scale(scale)
+        h.resize({ width, height, pixelRatio: 1 })
+        h.clear()
+
+        ImageManager.patternLocked = true
+        this.__renderShape(h, { matrix: matrix.setWith(this.__world).scaleWith(1 / scale).invertWith().translate(-x, -y) }, !isHitPixelFill, !isHitPixelStroke) // 矩阵
+        ImageManager.patternLocked = false
+        h.resetTransform()
+
+        data.__isHitPixel = true
+    } else {
+        data.__isHitPixel && (data.__isHitPixel = false)
+    }
+
     this.__drawHitPath(h)
-    h.setStrokeOptions(this.__)
+    h.setStrokeOptions(data)
+
 }
 
-UI.prototype.__hit = function (inner: IRadiusPointData): boolean {
+ui.__hit = function (inner: IRadiusPointData): boolean {
     if (Platform.name === 'miniapp') this.__drawHitPath(this.__hitCanvas) // fix: 小程序需要实时更新
 
-    const { fill, hitFill, windingRule } = this.__
-    const needHitFill = (fill && hitFill === 'path') || hitFill === 'all'
-    const isHitFill = this.__hitFill(inner, windingRule)
-    if (needHitFill && isHitFill) return true
+    // hit pixel
 
-    const { stroke, hitStroke, __strokeWidth, strokeAlign } = this.__
-    const needHitStroke = (stroke && hitStroke === 'path') || hitStroke === 'all'
-    const radiusWidth = inner.radiusX * 2
+    const data = this.__
+    if (data.__isHitPixel && this.__hitPixel(inner)) return true
+
+    // hit path
 
+    const { hitFill } = data
+    const needHitFillPath = ((data.fill && hitFill == 'path') || hitFill === 'all')
+    if (needHitFillPath && this.__hitFill(inner)) return true
+
+    const { hitStroke, __strokeWidth } = data
+    const needHitStrokePath = ((data.stroke && hitStroke == 'path') || hitStroke === 'all')
+    if (!needHitFillPath && !needHitStrokePath) return false
+
+    const radiusWidth = inner.radiusX * 2
     let hitWidth = radiusWidth
 
-    if (needHitStroke) {
-        switch (strokeAlign) {
+    if (needHitStrokePath) {
+        switch (data.strokeAlign) {
             case 'inside':
                 hitWidth += __strokeWidth * 2
-                if (!needHitFill && (isHitFill && this.__hitStroke(inner, hitWidth))) return true
+                if (!needHitFillPath && this.__hitFill(inner) && this.__hitStroke(inner, hitWidth)) return true
                 hitWidth = radiusWidth
                 break
             case 'center':
@@ -36,8 +73,8 @@ UI.prototype.__hit = function (inner: IRadiusPointData): boolean {
                 break
             case 'outside':
                 hitWidth += __strokeWidth * 2
-                if (!needHitFill) {
-                    if (!isHitFill && this.__hitStroke(inner, hitWidth)) return true
+                if (!needHitFillPath) {
+                    if (!this.__hitFill(inner) && this.__hitStroke(inner, hitWidth)) return true
                     hitWidth = radiusWidth
                 }
                 break
@@ -45,4 +82,4 @@ UI.prototype.__hit = function (inner: IRadiusPointData): boolean {
     }
 
     return hitWidth ? this.__hitStroke(inner, hitWidth) : false
-}
+}