@leafer-ui/image 1.9.9 → 1.9.10

package/package.json

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

package/src/data.ts

@@ -3,7 +3,7 @@ import { MatrixHelper, MathHelper, Bounds, AlignHelper, BoundsHelper, PointHelpe
 
 import { IImagePaint, ILeafPaint, ILeafPaintPatternData } from '@leafer-ui/interface'
 
-import { clipMode, fillOrFitMode, repeatMode } from './mode'
+import { clipMode, fillOrFitMode, repeatMode, stretchMode } from './mode'
 
 
 const { get, translate } = MatrixHelper
@@ -56,7 +56,10 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
 
     switch (mode) {
         case 'stretch':
-            if (!sameBox) width = box.width, height = box.height
+            if (!sameBox) {
+                scaleX = box.width / width, scaleY = box.height / height
+                stretchMode(data, box, scaleX, scaleY)
+            }
             break
         case 'normal':
         case 'clip':
@@ -64,7 +67,7 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
                 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)
-                if (clipScaleX) scaleX = scaleX ? scaleX * clipScaleX : scaleX, scaleY = scaleY ? scaleY * clipScaleY : clipScaleY
+                if (clipScaleX) scaleX = scaleX ? scaleX * clipScaleX : clipScaleX, scaleY = scaleY ? scaleY * clipScaleY : clipScaleY
             }
             break
         case 'repeat':
@@ -80,19 +83,17 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
     }
 
     if (!data.transform) {
-        if (box.x || box.y) {
-            data.transform = get()
-            translate(data.transform, box.x, box.y)
-        }
+        if (box.x || box.y) translate(data.transform = get(), box.x, box.y)
     }
 
-    if (scaleX && mode !== 'stretch') {
+    data.width = width
+    data.height = height
+
+    if (scaleX) {
         data.scaleX = scaleX
         data.scaleY = scaleY
     }
 
-    data.width = width
-    data.height = height
     if (opacity) data.opacity = opacity
     if (filters) data.filters = filters
     if (repeat) data.repeat = isString(repeat) ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat'

package/src/index.ts

@@ -2,7 +2,7 @@ import { IPaintImageModule } from '@leafer-ui/interface'
 
 import { image } from './image'
 import { createData, getPatternData } from './data'
-import { fillOrFitMode, clipMode, repeatMode } from './mode'
+import { fillOrFitMode, clipMode, repeatMode, stretchMode } from './mode'
 import { createPattern } from './pattern'
 import { checkImage } from './check'
 import { recycleImage } from './recycle'
@@ -16,6 +16,8 @@ export const PaintImageModule: IPaintImageModule = {
 
     createData,
     getPatternData,
+
+    stretchMode,
     fillOrFitMode,
     clipMode,
     repeatMode

package/src/mode.ts

@@ -5,7 +5,14 @@ import { ILeafPaintPatternData } from '@leafer-ui/interface'
 
 
 let origin = {} as IPointData, tempMatrix = getMatrixData()
-const { get, rotateOfOuter, translate, scaleOfOuter, multiplyParent, scale: scaleHelper, rotate, skew: skewHelper } = MatrixHelper
+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)
+    data.transform = transform
+}
 
 export function fillOrFitMode(data: ILeafPaintPatternData, box: IBoundsData, x: number, y: number, scaleX: number, scaleY: number, rotation: number): void {
     const transform: IMatrixData = get()
@@ -19,8 +26,11 @@ export function clipMode(data: ILeafPaintPatternData, box: IBoundsData, x: numbe
     const transform: IMatrixData = get()
     layout(transform, box, x, y, scaleX, scaleY, rotation, skew)
     if (clipScaleX) {
-        tempMatrix.a = clipScaleX, tempMatrix.d = clipScaleY
-        multiplyParent(transform, tempMatrix)
+        if (rotation || skew) {
+            set(tempMatrix)
+            scaleOfOuter(tempMatrix, box, clipScaleX, clipScaleY)
+            multiplyParent(transform, tempMatrix)
+        } else scaleOfOuter(transform, box, clipScaleX, clipScaleY)
     }
     data.transform = transform
 }