@leafer-ui/image 1.9.12 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/image",
-  "version": "1.9.12",
+  "version": "1.10.0",
   "description": "@leafer-ui/image",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,11 +22,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.9.12",
-    "@leafer-ui/draw": "1.9.12"
+    "@leafer/core": "1.10.0",
+    "@leafer-ui/draw": "1.10.0"
   },
   "devDependencies": {
-    "@leafer/interface": "1.9.12",
-    "@leafer-ui/interface": "1.9.12"
+    "@leafer/interface": "1.10.0",
+    "@leafer-ui/interface": "1.10.0"
   }
 }

package/src/check.ts

@@ -1,66 +1,70 @@
-import { ILeaferCanvas } from '@leafer/interface'
-import { ImageManager, Platform, ResizeEvent } from '@leafer/core'
+import { ILeaferCanvas, IRenderOptions, IScaleData } from '@leafer/interface'
+import { Platform, ResizeEvent } from '@leafer/core'
 
-import { IUI, ILeafPaint, ILeafPaintPatternData } from '@leafer-ui/interface'
-import { Export } from '@leafer-ui/draw'
+import { IUI, ILeafPaint } from '@leafer-ui/interface'
+import { PaintImage } from "@leafer-ui/draw"
 
-import { createPattern } from './pattern'
 
+export function checkImage(paint: ILeafPaint, drawImage: boolean, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): boolean {
+    const { scaleX, scaleY } = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions)
+    const { image, data } = paint, { exporting } = renderOptions
 
-export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, allowDraw?: boolean): boolean {
-    const { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed)
-    const { pixelRatio } = canvas, { data } = paint
-
-    if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
+    if (!data || (paint.patternId === scaleX + '-' + scaleY && !exporting)) {
         return false // 生成图案中
     } else {
 
-        if (allowDraw) {
+        if (drawImage) {
             if (data.repeat) {
-                allowDraw = false
-            } else if (!(paint.changeful || (Platform.name === 'miniapp' && ResizeEvent.isResizing(ui)) || Export.running)) { //  小程序resize过程中直接绘制原图（绕过垃圾回收bug)
-                let { width, height } = data
-                width *= scaleX * pixelRatio
-                height *= scaleY * pixelRatio
-                if (data.scaleX) {
-                    width *= data.scaleX
-                    height *= data.scaleY
-                }
-                allowDraw = (width * height > Platform.image.maxCacheSize)
+                drawImage = false
+            } else if (!(paint.changeful || (Platform.name === 'miniapp' && ResizeEvent.isResizing(ui)) || exporting)) { //  小程序resize过程中直接绘制原图（绕过垃圾回收bug)
+                drawImage = Platform.image.isLarge(image, scaleX, scaleY)
             }
         }
 
-        if (allowDraw) {
+        if (drawImage) {
             if (ui.__.__isFastShadow) { // fix: 快速阴影时，直接 drawImage 会无阴影，需fill一下
                 canvas.fillStyle = paint.style || '#000'
                 canvas.fill()
             }
-            drawImage(ui, canvas, paint, data) // 直接绘制图像，不生成图案
+            PaintImage.drawImage(paint, scaleX, scaleY, ui, canvas, renderOptions) // 直接绘制图像，不生成图案
             return true
         } else {
-            if (!paint.style || paint.sync || Export.running) {
-                createPattern(ui, paint, pixelRatio)
-            } else {
-                if (!paint.patternTask) {
-                    paint.patternTask = ImageManager.patternTasker.add(async () => {
-                        paint.patternTask = null
-                        if (canvas.bounds.hit(ui.__nowWorld)) createPattern(ui, paint, pixelRatio)
-                        ui.forceUpdate('surface')
-                    }, 300)
-                }
-            }
+            if (!paint.style || paint.sync || exporting) PaintImage.createPattern(paint, ui, canvas, renderOptions)
+            else PaintImage.createPatternTask(paint, ui, canvas, renderOptions)
             return false
         }
     }
 }
 
+export function drawImage(paint: ILeafPaint, _imageScaleX: number, _imageScaleY: number, ui: IUI, canvas: ILeaferCanvas, _renderOptions: IRenderOptions): void {
+    const { data, image, blendMode } = paint, { opacity, transform } = data, view = image.getFull(data.filters), u = ui.__
+    let { width, height } = image, clipUI: any
+
+    if ((transform && !transform.onlyScale) || (clipUI = u.path || u.cornerRadius) || opacity || blendMode) {
+        canvas.save()
+        clipUI && canvas.clipUI(ui)
+        blendMode && (canvas.blendMode = blendMode)
+        opacity && (canvas.opacity *= opacity)
+        transform && canvas.transform(transform)
+        canvas.drawImage(view, 0, 0, width, height) // svg need size
+        canvas.restore()
+    } else { // 简单矩形
+        if (data.scaleX) width *= data.scaleX, height *= data.scaleY
+        canvas.drawImage(view, 0, 0, width, height)
+    }
+
+}
 
-function drawImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, data: ILeafPaintPatternData): void { // 后续可优化
-    canvas.save()
-    canvas.clipUI(ui)
-    if (paint.blendMode) canvas.blendMode = paint.blendMode
-    if (data.opacity) canvas.opacity *= data.opacity
-    if (data.transform) canvas.transform(data.transform)
-    canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height)
-    canvas.restore()
+export function getImageRenderScaleData(paint: ILeafPaint, ui: IUI, canvas?: ILeaferCanvas, _renderOptions?: IRenderOptions): IScaleData {
+    const scaleData = ui.getRenderScaleData(true, paint.scaleFixed), { data } = paint
+    if (canvas) {
+        const { pixelRatio } = canvas
+        scaleData.scaleX *= pixelRatio
+        scaleData.scaleY *= pixelRatio
+    }
+    if (data && data.scaleX) {
+        scaleData.scaleX *= Math.abs(data.scaleX)
+        scaleData.scaleY *= Math.abs(data.scaleY)
+    }
+    return scaleData
 }

package/src/data.ts

@@ -2,8 +2,7 @@ import { IBoundsData, IGap, ILeaferImage, IPointData, IPointGap, IScaleData } fr
 import { MatrixHelper, MathHelper, Bounds, AlignHelper, BoundsHelper, PointHelper, isObject, isString } from '@leafer/core'
 
 import { IImagePaint, ILeafPaint, ILeafPaintPatternData } from '@leafer-ui/interface'
-
-import { clipMode, fillOrFitMode, repeatMode, stretchMode } from './mode'
+import { PaintImage } from "@leafer-ui/draw"
 
 
 const { get, translate } = MatrixHelper
@@ -16,14 +15,14 @@ export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: II
     if (changeful) leafPaint.changeful = changeful
     if (sync) leafPaint.sync = sync
     if (scaleFixed) leafPaint.scaleFixed = scaleFixed
-    leafPaint.data = getPatternData(paint, box, image)
+    leafPaint.data = PaintImage.getPatternData(paint, box, image)
 }
 
 export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILeaferImage): ILeafPaintPatternData {
     if (paint.padding) box = tempBox.set(box).shrink(paint.padding)
     if (paint.mode === 'strench' as string) paint.mode = 'stretch' // 兼容代码，后续可移除
 
-    let { width, height } = image
+    const { width, height } = image
     const { opacity, mode, align, offset, scale, size, rotation, skew, clipSize, repeat, gap, filters } = paint
     const sameBox = box.width === width && box.height === height
 
@@ -58,20 +57,20 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
         case 'stretch':
             if (!sameBox) {
                 scaleX = box.width / width, scaleY = box.height / height
-                stretchMode(data, box, scaleX, scaleY)
-            }
+                PaintImage.stretchMode(data, box, scaleX, scaleY)
+            } else if (scaleX) scaleX = scaleY = undefined
             break
         case 'normal':
         case 'clip':
             if (tempImage.x || tempImage.y || scaleX || clipSize || rotation || skew) {
                 let clipScaleX: number, clipScaleY: number
                 if (clipSize) clipScaleX = box.width / clipSize.width, clipScaleY = box.height / clipSize.height
-                clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, clipScaleX, clipScaleY)
+                PaintImage.clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, clipScaleX, clipScaleY)
                 if (clipScaleX) scaleX = scaleX ? scaleX * clipScaleX : clipScaleX, scaleY = scaleY ? scaleY * clipScaleY : clipScaleY
             }
             break
         case 'repeat':
-            if (!sameBox || scaleX || rotation || skew) repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, align, paint.freeTransform)
+            if (!sameBox || scaleX || rotation || skew) PaintImage.repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, align, paint.freeTransform)
             if (!repeat) data.repeat = 'repeat'
             const count = isObject(repeat)
             if (gap || count) data.gap = getGapData(gap, count && repeat, tempImage.width, tempImage.height, box)
@@ -79,22 +78,19 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
         case 'fit':
         case 'cover':
         default:
-            if (scaleX) fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation)
+            if (scaleX) PaintImage.fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation)
     }
 
     if (!data.transform) {
         if (box.x || box.y) translate(data.transform = get(), box.x, box.y)
     }
 
-    data.width = width
-    data.height = height
-
     if (scaleX) {
         data.scaleX = scaleX
         data.scaleY = scaleY
     }
 
-    if (opacity) data.opacity = opacity
+    if (opacity && opacity < 1) data.opacity = opacity
     if (filters) data.filters = filters
     if (repeat) data.repeat = isString(repeat) ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat'
     return data

package/src/image.ts

@@ -2,8 +2,7 @@ import { IBoundsData, IImageEvent, ILeaferImage, IObject } from '@leafer/interfa
 import { Bounds, BoundsHelper, ImageEvent, ImageManager } from '@leafer/core'
 
 import { IUI, IImagePaint, ILeafPaint } from '@leafer-ui/interface'
-
-import { createData } from './data'
+import { PaintImage } from "@leafer-ui/draw"
 
 
 interface IImagePaintCache {
@@ -102,7 +101,7 @@ function checkSizeAndCreateData(ui: IUI, attrName: string, paint: IImagePaint, i
         }
     }
 
-    if (!leafPaint.data) createData(leafPaint, image, paint, boxBounds)
+    if (!leafPaint.data) PaintImage.createData(leafPaint, image, paint, boxBounds)
     return true
 }
 

package/src/index.ts

@@ -3,17 +3,23 @@ import { IPaintImageModule } from '@leafer-ui/interface'
 import { image } from './image'
 import { createData, getPatternData } from './data'
 import { fillOrFitMode, clipMode, repeatMode, stretchMode } from './mode'
-import { createPattern } from './pattern'
-import { checkImage } from './check'
+import { createPatternTask, createPattern, getPatternFixScale } from './pattern'
+import { checkImage, drawImage, getImageRenderScaleData } from './check'
 import { recycleImage } from './recycle'
 
 
 export const PaintImageModule: IPaintImageModule = {
     image,
+
     checkImage,
-    createPattern,
+    drawImage,
+    getImageRenderScaleData,
     recycleImage,
 
+    createPatternTask,
+    createPattern,
+    getPatternFixScale,
+
     createData,
     getPatternData,
 

package/src/mode.ts

@@ -8,9 +8,10 @@ let origin = {} as IPointData, tempMatrix = getMatrixData()
 const { get, set, rotateOfOuter, translate, scaleOfOuter, multiplyParent, scale: scaleHelper, rotate, skew: skewHelper } = MatrixHelper
 
 export function stretchMode(data: ILeafPaintPatternData, box: IBoundsData, scaleX: number, scaleY: number): void {
-    const transform: IMatrixData = get()
-    translate(transform, box.x, box.y)
-    if (scaleX) scaleHelper(transform, scaleX, scaleY)
+    const transform: IMatrixData = get(), { x, y } = box
+    if (x || y) translate(transform, x, y)
+    else transform.onlyScale = true
+    scaleHelper(transform, scaleX, scaleY)
     data.transform = transform
 }
 

package/src/pattern.ts

@@ -1,99 +1,72 @@
-import { Platform, MatrixHelper } from '@leafer/core'
+import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
+import { Platform, MatrixHelper, MathHelper, ImageManager } from '@leafer/core'
 
 import { IUI, ILeafPaint, IMatrixData } from '@leafer-ui/interface'
+import { PaintImage } from "@leafer-ui/draw"
 
 
 const { get, scale, copy } = MatrixHelper
-const { floor, ceil, max, abs } = Math
+const { getFloorScale } = MathHelper, { abs } = Math
+
+export function createPatternTask(paint: ILeafPaint, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
+    if (!paint.patternTask) {
+        paint.patternTask = ImageManager.patternTasker.add(async () => {
+            paint.patternTask = null
+            if (canvas.bounds.hit(ui.__nowWorld)) PaintImage.createPattern(paint, ui, canvas, renderOptions)
+            ui.forceUpdate('surface')
+        }, 300)
+    }
+}
 
-export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): boolean {
-    let { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed)
-    const id = scaleX + '-' + scaleY + '-' + pixelRatio
+export function createPattern(paint: ILeafPaint, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
+    let { scaleX, scaleY } = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = scaleX + '-' + scaleY
 
     if (paint.patternId !== id && !ui.destroyed) {
+        if (!(Platform.image.isLarge(paint.image, scaleX, scaleY) && !paint.data.repeat)) {
 
-        const { image, data } = paint
-        let imageScale: number, imageMatrix: IMatrixData, { width, height, scaleX: sx, scaleY: sy, transform, repeat, gap } = data
-
-        scaleX *= pixelRatio
-        scaleY *= pixelRatio
-
-        if (sx) {
-            sx = abs(sx) // maybe -1
-            sy = abs(sy)
-            imageMatrix = get()
-            copy(imageMatrix, transform)
-            scale(imageMatrix, 1 / sx, 1 / sy)
-            scaleX *= sx
-            scaleY *= sy
-        }
-
-        width *= scaleX
-        height *= scaleY
-
-        const size = width * height
-
-        if (!repeat) {
-            if (size > Platform.image.maxCacheSize) return false // same as check()
-        }
-
-        let maxSize = Platform.image.maxPatternSize
-
-        if (image.isSVG) {
-            const ws = width / image.width
-            if (ws > 1) imageScale = ws / ceil(ws) // fix: svg按整数倍放大，避免产生加深线条
-        } else {
-            const imageSize = image.width * image.height
-            if (maxSize > imageSize) maxSize = imageSize
-        }
-
-        if (size > maxSize) imageScale = Math.sqrt(size / maxSize)
-
-        if (imageScale) {
-            scaleX /= imageScale
-            scaleY /= imageScale
-            width /= imageScale
-            height /= imageScale
-        }
+            const { image, data } = paint, { transform, gap } = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY)
+            let imageMatrix: IMatrixData, xGap: number, yGap: number, { width, height } = image
 
-        if (sx) {
-            scaleX /= sx
-            scaleY /= sy
-        }
+            if (fixScale) scaleX *= fixScale, scaleY *= fixScale
 
-        // 间距
-        const xGap = gap && (gap.x * scaleX)
-        const yGap = gap && (gap.y * scaleY)
+            width *= scaleX
+            height *= scaleY
 
-        if (transform || scaleX !== 1 || scaleY !== 1) {
+            // 平铺间距
+            if (gap) {
+                xGap = gap.x * scaleX / abs(data.scaleX || 1)
+                yGap = gap.y * scaleY / abs(data.scaleY || 1)
+            }
 
-            // 缩放至floor画布宽高的状态
-            const canvasWidth = width + (xGap || 0)
-            const canvasHeight = height + (yGap || 0)
-            scaleX /= canvasWidth / max(floor(canvasWidth), 1)
-            scaleY /= canvasHeight / max(floor(canvasHeight), 1)
+            if (transform || scaleX !== 1 || scaleY !== 1) {
+                scaleX *= getFloorScale(width + (xGap || 0)) // 缩放至floor画布宽高的状态
+                scaleY *= getFloorScale(height + (yGap || 0))
 
-            if (!imageMatrix) {
                 imageMatrix = get()
                 if (transform) copy(imageMatrix, transform)
+                scale(imageMatrix, 1 / scaleX, 1 / scaleY)
             }
 
-            scale(imageMatrix, 1 / scaleX, 1 / scaleY)
+            const imageCanvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth)
+            const pattern = image.getPattern(imageCanvas, data.repeat || (Platform.origin.noRepeat || 'no-repeat'), imageMatrix, paint)
 
-        }
+            paint.style = pattern
+            paint.patternId = id
 
-        const canvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth)
-        const pattern = image.getPattern(canvas, repeat || (Platform.origin.noRepeat || 'no-repeat'), imageMatrix, paint)
-
-        paint.style = pattern
-        paint.patternId = id
+        }
+    }
+}
 
-        return true
+export function getPatternFixScale(paint: ILeafPaint, imageScaleX: number, imageScaleY: number): number {
+    const { image } = paint
+    let fixScale: number, maxSize = Platform.image.maxPatternSize, imageSize = image.width * image.height
 
+    if (image.isSVG) {
+        if (imageScaleX > 1) fixScale = Math.ceil(imageScaleX) / imageScaleX // fix: svg按整数倍放大，避免产生加深线条
     } else {
-
-        return false
-
+        if (maxSize > imageSize) maxSize = imageSize // 防止大于元素自身宽高
     }
 
+    if ((imageSize *= imageScaleX * imageScaleY) > maxSize) fixScale = Math.sqrt(maxSize / imageSize)
+    return fixScale
 }