@leafer-ui/image 2.1.0 → 2.1.2

package/package.json

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

package/src/check.ts

@@ -7,10 +7,12 @@ 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), id = paint.film ? paint.nowIndex : scaleX + '-' + scaleY
-    const { image, data, originPaint } = paint, { exporting, snapshot } = renderOptions
+    const { image, brush, data, originPaint } = paint, { exporting, snapshot } = renderOptions
 
     if (!data || (paint.patternId === id && !exporting) || snapshot) {
-        return false // 生成图案中
+
+        if (!(brush && paint.style)) return false // 生成图案中
+
     } else {
 
         if (drawImage) {
@@ -26,19 +28,22 @@ export function checkImage(paint: ILeafPaint, drawImage: boolean, ui: IUI, canva
                 canvas.fillStyle = paint.style || '#000'
                 canvas.fill()
             }
-            PaintImage.drawImage(paint, scaleX, scaleY, ui, canvas, renderOptions) // 直接绘制图像，不生成图案
-            return true
         } else {
             if (!paint.style || (originPaint as IImagePaint).sync || exporting) PaintImage.createPattern(paint, ui, canvas, renderOptions)
             else PaintImage.createPatternTask(paint, ui, canvas, renderOptions)
-            return false
+
+            if (!(brush && paint.style)) return false
+
         }
     }
+
+    PaintImage.drawImage(paint, scaleX, scaleY, ui, canvas, renderOptions) // 直接绘制图像，不生成图案
+    return true
 }
 
 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
+    const { data, image, brush, complex } = paint
+    let { width, height } = image, view = brush || image
 
     if (complex) {
 
@@ -48,20 +53,21 @@ export function drawImage(paint: ILeafPaint, imageScaleX: number, imageScaleY: n
         blendMode && (canvas.blendMode = blendMode)
         opacity && (canvas.opacity *= opacity)
         transform && canvas.transform(transform)
-        image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY) // svg need size
+        view.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY) // svg need size
         canvas.restore()
 
     } else {
 
         // 简单矩形
         if (data.scaleX) width *= data.scaleX, height *= data.scaleY
-        image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY)
+        view.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY)
 
     }
 }
 
 export function getImageRenderScaleData(paint: ILeafPaint, ui: IUI, canvas?: ILeaferCanvas, _renderOptions?: IRenderOptions): IScaleData {
     const scaleData = ui.getRenderScaleData(true, paint.originPaint.scaleFixed), { data } = paint
+    if (paint.brush) PaintImage.addBrushScale(scaleData, paint, ui)
     if (canvas) {
         const { pixelRatio } = canvas
         scaleData.scaleX *= pixelRatio

package/src/data.ts

@@ -66,6 +66,7 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
             }
             break
         case 'repeat':
+        case 'brush':
             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)

package/src/image.ts

@@ -103,12 +103,14 @@ function checkSizeAndCreateData(ui: IUI, attrName: string, paint: IImagePaint, i
         }
     }
 
+    if (paint.mode === 'brush') PaintImage.brush(leafPaint)
+
     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
+        const { transform } = leafPaint.data, { opacity } = paint
+        const clip = ((transform && !transform.onlyScale) || data.path || data.cornerRadius) && !leafPaint.brush
+        if (clip || (opacity && opacity < 1) || paint.blendMode) leafPaint.complex = clip ? 2 : true
     }
 
     if (paint.filter) PaintImage.applyFilter(leafPaint, image, paint.filter, ui)

package/src/pattern.ts

@@ -26,7 +26,7 @@ export function createPattern(paint: ILeafPaint, ui: IUI, canvas: ILeaferCanvas,
     if (paint.patternId !== id && !ui.destroyed) {
         if (!(Platform.image.isLarge(paint.image, scaleX, scaleY) && !paint.data.repeat)) {
 
-            const { image, data } = paint, { opacity } = paint.originPaint as IImagePaint, { transform, gap } = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY)
+            const { image, brush, data } = paint, { opacity } = 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
@@ -38,6 +38,10 @@ export function createPattern(paint: ILeafPaint, ui: IUI, canvas: ILeaferCanvas,
             if (gap) {
                 xGap = gap.x * scaleX / abs(data.scaleX || 1)
                 yGap = gap.y * scaleY / abs(data.scaleY || 1)
+                if (brush) {
+                    const brushScale = PaintImage.getBrushScale(paint, ui)
+                    xGap /= brushScale, yGap /= brushScale
+                }
             }
 
             if (transform || scaleX !== 1 || scaleY !== 1) {
@@ -50,7 +54,7 @@ export function createPattern(paint: ILeafPaint, ui: IUI, canvas: ILeaferCanvas,
             }
 
             const imageCanvas = image.getCanvas(width, height, opacity, undefined, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace)
-            const pattern = image.getPattern(imageCanvas, data.repeat || (Platform.origin.noRepeat || 'no-repeat'), imageMatrix, paint)
+            const pattern = brush ? imageCanvas : image.getPattern(imageCanvas, data.repeat || (Platform.origin.noRepeat || 'no-repeat'), imageMatrix, paint)
 
             paint.style = pattern
             paint.patternId = id

package/src/recycle.ts

@@ -11,6 +11,7 @@ export function recycleImage(attrName: IPaintAttr, data: IUIData): IBooleanMap {
     if (isArray(paints)) {
 
         let paint: ILeafPaint, image: ILeaferImage, recycleMap: IBooleanMap, input: IImagePaint[], url: string
+        const ui = data.__leaf as IUI
 
         for (let i = 0, len = paints.length; i < len; i++) {
 
@@ -22,7 +23,8 @@ export function recycleImage(attrName: IPaintAttr, data: IUIData): IBooleanMap {
                 if (!recycleMap) recycleMap = {}
                 recycleMap[url] = true
                 ImageManager.recyclePaint(paint)
-                if (data.__willDestroy && image.parent) PaintImage.recycleFilter(image, data.__leaf as IUI)
+                if (paint.brush) PaintImage.recycleBrush(paint, ui)
+                if (data.__willDestroy && image.parent) PaintImage.recycleFilter(image, ui)
 
                 // stop load
                 if (image.loading) {