@leafer-ui/image 2.0.0 → 2.0.2

package/package.json

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

package/src/check.ts

@@ -6,18 +6,18 @@ import { PaintImage } from "@leafer-ui/draw"
 
 
 export function checkImage(paint: ILeafPaint, drawImage: boolean, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): boolean {
-    const { scaleX, scaleY } = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions)
+    const { scaleX, scaleY } = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + '-' + scaleY
     const { image, data, originPaint } = paint, { exporting, snapshot } = renderOptions
 
-    if (!data || (paint.patternId === scaleX + '-' + scaleY && !exporting) || snapshot) {
+    if (!data || (paint.patternId === id && !exporting) || snapshot) {
         return false // 生成图案中
     } else {
 
         if (drawImage) {
             if (data.repeat) {
                 drawImage = false
-            } else if (!((originPaint as IImagePaint).changeful || (Platform.name === 'miniapp' && ResizeEvent.isResizing(ui)) || exporting)) { //  小程序resize过程中直接绘制原图（绕过垃圾回收bug)
-                drawImage = Platform.image.isLarge(image, scaleX, scaleY) || image.width * scaleX > 8096 || image.height * scaleY > 8096 // 大长图单边超过8096生成pattern会有问题
+            } else if (!((originPaint as IImagePaint).changeful || paint.film || (Platform.name === 'miniapp' && ResizeEvent.isResizing(ui)) || exporting)) { //  小程序resize过程中直接绘制原图（绕过垃圾回收bug)
+                drawImage = Platform.image.isLarge(image, scaleX, scaleY) || image.width * scaleX > 8096 || image.height * scaleY > 8096 // 非image类型的尽量绘制原图，大长图单边超过8096生成pattern会有问题
             }
         }
 
@@ -36,23 +36,28 @@ export function checkImage(paint: ILeafPaint, drawImage: boolean, ui: IUI, canva
     }
 }
 
-export function drawImage(paint: ILeafPaint, _imageScaleX: number, _imageScaleY: number, ui: IUI, canvas: ILeaferCanvas, _renderOptions: IRenderOptions): void {
-    const { data, image } = paint, { blendMode } = paint.originPaint as IImagePaint, { opacity, transform } = data, view = image.getFull(data.filters), u = ui.__
-    let { width, height } = image, clipUI: any
+export function drawImage(paint: ILeafPaint, imageScaleX: number, imageScaleY: number, ui: IUI, canvas: ILeaferCanvas, _renderOptions: IRenderOptions): void {
+    const { data, image, complex } = paint
+    let { width, height } = image
 
-    if ((clipUI = (transform && !transform.onlyScale) || u.path || u.cornerRadius) || opacity || blendMode) {
-        canvas.save()
-        clipUI && canvas.clipUI(ui)
+    if (complex) {
+
+        const { blendMode, opacity } = paint.originPaint as IImagePaint, { transform } = data
+        canvas.save();
+        (complex === 2) && 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
+        image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY) // svg need size
         canvas.restore()
-    } else { // 简单矩形
+
+    } else {
+
+        // 简单矩形
         if (data.scaleX) width *= data.scaleX, height *= data.scaleY
-        canvas.drawImage(view, 0, 0, width, height)
-    }
+        image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY)
 
+    }
 }
 
 export function getImageRenderScaleData(paint: ILeafPaint, ui: IUI, canvas?: ILeaferCanvas, _renderOptions?: IRenderOptions): IScaleData {

package/src/data.ts

@@ -19,7 +19,7 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
     if (paint.mode === 'strench' as string) paint.mode = 'stretch' // 兼容代码，后续可移除
 
     const { width, height } = image
-    const { opacity, mode, align, offset, scale, size, rotation, skew, clipSize, repeat, gap, filters, interlace } = paint
+    const { mode, align, offset, scale, size, rotation, skew, clipSize, repeat, gap, interlace } = paint
     const sameBox = box.width === width && box.height === height
 
     const data: ILeafPaintPatternData = { mode }
@@ -86,8 +86,6 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
         data.scaleY = scaleY
     }
 
-    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'
     if (interlace) data.interlace = (isNumber(interlace) || interlace.type === 'percent') ? { type: 'x', offset: interlace } : interlace
     return data

package/src/image.ts

@@ -16,7 +16,7 @@ const { isSame } = BoundsHelper
 
 export function image(ui: IUI, attrName: string, paint: IImagePaint, boxBounds: IBoundsData, firstUse: boolean): ILeafPaint {
     let leafPaint: ILeafPaint, event: IImageEvent
-    const image = ImageManager.get(paint)
+    const image = ImageManager.get(paint, paint.type)
 
     if (cache && paint === cache.paint && isSame(boxBounds, cache.boxBounds)) {
         leafPaint = cache.leafPaint
@@ -86,8 +86,9 @@ export function image(ui: IUI, attrName: string, paint: IImagePaint, boxBounds:
 
 
 function checkSizeAndCreateData(ui: IUI, attrName: string, paint: IImagePaint, image: ILeaferImage, leafPaint: ILeafPaint, boxBounds: IBoundsData): boolean {
-    if (attrName === 'fill' && !ui.__.__naturalWidth) {
-        const data = ui.__
+    const data = ui.__
+
+    if (attrName === 'fill' && !data.__naturalWidth) {
         data.__naturalWidth = image.width / data.pixelRatio
         data.__naturalHeight = image.height / data.pixelRatio
         if (data.__autoSide) {
@@ -100,7 +101,13 @@ function checkSizeAndCreateData(ui: IUI, attrName: string, paint: IImagePaint, i
         }
     }
 
-    if (!leafPaint.data) PaintImage.createData(leafPaint, image, paint, boxBounds)
+    if (!leafPaint.data) {
+        PaintImage.createData(leafPaint, image, paint, boxBounds)
+
+        const { transform } = leafPaint.data, { opacity, blendMode } = paint
+        const clip = (transform && !transform.onlyScale) || data.path || data.cornerRadius
+        if (clip || (opacity && opacity < 1) || blendMode) leafPaint.complex = clip ? 2 : true
+    }
     return true
 }
 

package/src/mode.ts

@@ -10,7 +10,7 @@ const { get, set, rotateOfOuter, translate, scaleOfOuter, multiplyParent, scale:
 export function stretchMode(data: ILeafPaintPatternData, box: IBoundsData, scaleX: number, scaleY: number): void {
     const transform: IMatrixData = get(), { x, y } = box
     if (x || y) translate(transform, x, y)
-    else transform.onlyScale = true
+    else if (scaleX > 0 && scaleY > 0) transform.onlyScale = true
     scaleHelper(transform, scaleX, scaleY)
     data.transform = transform
 }

package/src/pattern.ts

@@ -1,7 +1,7 @@
 import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
 import { Platform, MatrixHelper, MathHelper, ImageManager } from '@leafer/core'
 
-import { IUI, ILeafPaint, IMatrixData } from '@leafer-ui/interface'
+import { IUI, ILeafPaint, IMatrixData, IImagePaint } from '@leafer-ui/interface'
 import { PaintImage } from "@leafer-ui/draw"
 
 
@@ -21,12 +21,12 @@ export function createPatternTask(paint: ILeafPaint, ui: IUI, canvas: ILeaferCan
 }
 
 export function createPattern(paint: ILeafPaint, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
-    let { scaleX, scaleY } = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = scaleX + '-' + scaleY
+    let { scaleX, scaleY } = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + '-' + scaleY
 
     if (paint.patternId !== id && !ui.destroyed) {
         if (!(Platform.image.isLarge(paint.image, scaleX, scaleY) && !paint.data.repeat)) {
 
-            const { image, data } = paint, { transform, gap } = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY)
+            const { image, data } = paint, { opacity, filters } = paint.originPaint as IImagePaint, { transform, gap } = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY)
             let imageMatrix: IMatrixData, xGap: number, yGap: number, { width, height } = image
 
             if (fixScale) scaleX *= fixScale, scaleY *= fixScale
@@ -49,7 +49,7 @@ export function createPattern(paint: ILeafPaint, ui: IUI, canvas: ILeaferCanvas,
                 scale(imageMatrix, 1 / scaleX, 1 / scaleY)
             }
 
-            const imageCanvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace)
+            const imageCanvas = image.getCanvas(width, height, opacity, filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace)
             const pattern = image.getPattern(imageCanvas, data.repeat || (Platform.origin.noRepeat || 'no-repeat'), imageMatrix, paint)
 
             paint.style = pattern