@leafer-ui/paint 1.0.0-alpha.23 → 1.0.0-alpha.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/paint",
-  "version": "1.0.0-alpha.23",
+  "version": "1.0.0-alpha.31",
   "description": "@leafer-ui/paint",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,7 +19,7 @@
     "leaferjs"
   ],
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.23",
-    "@leafer-ui/interface": "1.0.0-alpha.23"
+    "@leafer/interface": "1.0.0-alpha.31",
+    "@leafer-ui/interface": "1.0.0-alpha.31"
   }
 }

package/src/Compute.ts

@@ -1,5 +1,5 @@
-import { IUI, IPaint, ILeafPaint } from '@leafer-ui/interface'
-import { stringColor } from '@leafer-ui/color'
+import { IUI, IPaint, ILeafPaint, IRGB } from '@leafer-ui/interface'
+import { ColorConvert } from '@leafer-ui/color'
 
 import { image } from "./paint/image"
 import { linearGradient } from './paint/linear'
@@ -16,33 +16,36 @@ export function computeStroke(ui: IUI): void {
 }
 
 function compute(ui: IUI, attrName: string): void {
-    const paint: IPaint[] = ui.__.__input[attrName] as IPaint[]
-    if (typeof paint === 'object') {
-        let item: ILeafPaint
-        const value: ILeafPaint[] = []
-        for (let i = 0, len = paint.length; i < len; i++) {
-            item = getLeafPaint(ui, paint[i], attrName)
-            if (item) value.push(item)
-        }
-        ui.__['_' + attrName] = value.length ? value : undefined
+    let paints = ui.__.__input[attrName] as IPaint[]
+
+    let item: ILeafPaint
+    const value: ILeafPaint[] = []
+    if (!(paints instanceof Array)) paints = [paints]
+
+    for (let i = 0, len = paints.length; i < len; i++) {
+        item = getLeafPaint(ui, paints[i], attrName)
+        if (item) value.push(item)
     }
+    ui.__['_' + attrName] = value.length ? value : undefined
 }
 
 function getLeafPaint(ui: IUI, paint: IPaint, attrName: string): ILeafPaint {
-    if (paint.visible === false || paint.opacity === 0) return undefined
+    if (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0) return undefined
+    const { boxBounds } = ui.__layout
 
-    const { width, height } = ui.__layout.boxBounds
     switch (paint.type) {
         case 'solid':
-            let { type, blendMode, color } = paint
-            return { type, blendMode, style: stringColor(color) }
+            let { type, blendMode, color, opacity } = paint
+            return { type, blendMode, style: ColorConvert.string(color, opacity) }
         case 'image':
-            return image(ui, attrName, paint, width, height)
+            return image(ui, attrName, paint, boxBounds)
         case 'linear':
-            return linearGradient(paint, width, height)
+            return linearGradient(paint, boxBounds)
         case 'radial':
-            return radialGradient(paint, width, height)
+            return radialGradient(paint, boxBounds)
         case 'angular':
-            return conicGradient(paint, width, height)
+            return conicGradient(paint, boxBounds)
+        default:
+            return (paint as IRGB).r ? { type: 'solid', style: ColorConvert.string(paint) } : undefined
     }
 }

package/src/Fill.ts

@@ -1,17 +1,17 @@
 import { ILeaferCanvas } from '@leafer/interface'
 
 import { ILeafPaint, IUI } from '@leafer-ui/interface'
+import { drawText } from './FillText'
 
 
 export function fill(ui: IUI, canvas: ILeaferCanvas, fill: string | object): void {
     canvas.fillStyle = fill
-    canvas.fill(ui.__.windingRule)
-
+    ui.__.__font ? drawText(ui, canvas) : canvas.fill(ui.__.windingRule)
 }
 
 export function fills(ui: IUI, canvas: ILeaferCanvas, fills: ILeafPaint[]): void {
     let item: ILeafPaint
-    const { windingRule } = ui.__
+    const { windingRule, __font } = ui.__
     for (let i = 0, len = fills.length; i < len; i++) {
         item = fills[i]
         canvas.fillStyle = item.style
@@ -23,16 +23,21 @@ export function fills(ui: IUI, canvas: ILeaferCanvas, fills: ILeafPaint[]): void
             canvas.transform(a, b, c, d, e, f)
 
             if (item.blendMode) canvas.blendMode = item.blendMode
-            canvas.fill(windingRule)
+
+            __font ? drawText(ui, canvas) : canvas.fill(windingRule)
 
             canvas.restore()
         } else {
             if (item.blendMode) {
                 canvas.saveBlendMode(item.blendMode)
-                canvas.fill(windingRule)
+
+                __font ? drawText(ui, canvas) : canvas.fill(windingRule)
+
                 canvas.restoreBlendMode()
             } else {
-                canvas.fill(windingRule)
+
+                __font ? drawText(ui, canvas) : canvas.fill(windingRule)
+
             }
         }
     }

package/src/FillText.ts

@@ -0,0 +1,25 @@
+import { ILeaferCanvas } from '@leafer/interface'
+
+import { IUI, ITextRowData } from '@leafer-ui/interface'
+
+
+export function drawText(ui: IUI, canvas: ILeaferCanvas): void {
+
+    let row: ITextRowData
+    const { rows, decorationY, decorationHeight } = ui.__.__textDrawData
+
+    for (let i = 0, len = rows.length; i < len; i++) {
+        row = rows[i]
+
+        if (row.text) {
+            canvas.fillText(row.text, row.x, row.y)
+        } else if (row.data) {
+            row.data.forEach(charData => {
+                canvas.fillText(charData.char, charData.x, row.y)
+            })
+        }
+
+        if (decorationY) canvas.fillRect(row.x, row.y + decorationY, row.width, decorationHeight)
+    }
+
+}

package/src/Shape.ts

@@ -3,6 +3,7 @@ import { BoundsHelper } from '@leafer/math'
 
 import { IUI, ICachedShape } from '@leafer-ui/interface'
 
+const { getSpread, getOuterOf, getByMove, getIntersectData } = BoundsHelper
 
 export function shape(ui: IUI, current: ILeaferCanvas, options: IRenderOptions): ICachedShape {
     const canvas = current.getSameCanvas()
@@ -15,8 +16,8 @@ export function shape(ui: IUI, current: ILeaferCanvas, options: IRenderOptions):
 
     if (!current.bounds.includes(__world, options.matrix)) {
 
-        const { renderBoundsSpreadWidth } = ui.__layout
-        const worldClipBounds = BoundsHelper.getIntersectData(renderBoundsSpreadWidth ? BoundsHelper.getSpread(current.bounds, renderBoundsSpreadWidth * __world.a) : current.bounds, __world, options.matrix)
+        const { shapeRenderSpreadWidth: spreadWidth } = ui.__layout
+        const worldClipBounds = getIntersectData(spreadWidth ? getSpread(current.bounds, spreadWidth * scaleX) : current.bounds, __world, options.matrix)
         matrix = current.bounds.getFitMatrix(worldClipBounds)
 
         if (matrix.a < 1) {
@@ -27,8 +28,8 @@ export function shape(ui: IUI, current: ILeaferCanvas, options: IRenderOptions):
             scaleY *= matrix.d
         }
 
-        shapeBounds = BoundsHelper.getOuterOf(__world, matrix)
-        bounds = BoundsHelper.getByMove(shapeBounds, -matrix.e, -matrix.f)
+        shapeBounds = getOuterOf(__world, matrix)
+        bounds = getByMove(shapeBounds, -matrix.e, -matrix.f)
 
         if (options.matrix) matrix.multiply(options.matrix)
         options = { ...options, matrix }

package/src/Stroke.ts

@@ -1,87 +1,105 @@
 import { ILeaferCanvas } from '@leafer/interface'
 
 import { IUI, ILeafStrokePaint, ILeafPaint } from '@leafer-ui/interface'
+import { strokeText, strokesText } from './StrokeText'
 
 
 export function stroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | object): void {
     const options = ui.__
-    const { strokeWidth, strokeAlign } = options
+    const { strokeWidth, strokeAlign, __font } = options
 
-    switch (strokeAlign) {
+    if (__font) {
 
-        case 'center':
-            canvas.setStroke(undefined, strokeWidth, options)
-            canvas.strokeStyle = stroke
-            canvas.stroke()
-            break
+        strokeText(ui, canvas, stroke)
 
-        case 'inside':
-            canvas.save()
-            canvas.setStroke(undefined, strokeWidth * 2, options)
-            canvas.clip(options.windingRule)
+    } else {
 
-            canvas.strokeStyle = stroke
-            canvas.stroke()
+        switch (strokeAlign) {
 
-            canvas.restore()
-            break
+            case 'center':
 
-        case 'outside':
-            const out = canvas.getSameCanvas(true)
-            ui.__drawRenderPath(out)
+                canvas.setStroke(stroke, strokeWidth, options)
+                canvas.stroke()
+                break
 
-            out.setStroke(undefined, strokeWidth * 2, ui.__)
+            case 'inside':
 
-            out.strokeStyle = stroke
-            out.stroke()
+                canvas.save()
+                canvas.setStroke(stroke, strokeWidth * 2, options)
 
-            out.clip(options.windingRule)
-            out.clearWorld(ui.__layout.renderBounds)
+                canvas.clip(options.windingRule)
+                canvas.stroke()
 
-            canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds)
-            out.recycle()
-            break
-    }
+                canvas.restore()
+
+                break
+
+            case 'outside':
+                const out = canvas.getSameCanvas(true)
+                out.setStroke(stroke, strokeWidth * 2, ui.__)
 
+                ui.__drawRenderPath(out)
+
+                out.stroke()
+
+                out.clip(options.windingRule)
+                out.clearWorld(ui.__layout.renderBounds)
+
+                canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds)
+                out.recycle()
+
+                break
+        }
+
+    }
 }
 
 export function strokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]): void {
     const options = ui.__
-    const { strokeWidth, strokeAlign } = options
+    const { strokeWidth, strokeAlign, __font } = options
+
+    if (__font) {
+
+        strokesText(ui, canvas, strokes)
+
+    } else {
 
-    switch (strokeAlign) {
+        switch (strokeAlign) {
 
-        case 'center':
-            canvas.setStroke(undefined, strokeWidth, options)
-            drawStrokesStyle(strokes, canvas)
-            break
+            case 'center':
+                canvas.setStroke(undefined, strokeWidth, options)
+                drawStrokesStyle(strokes, canvas)
+                break
 
-        case 'inside':
-            canvas.save()
-            canvas.setStroke(undefined, strokeWidth * 2, options)
-            canvas.clip(options.windingRule)
+            case 'inside':
+                canvas.save()
+                canvas.setStroke(undefined, strokeWidth * 2, options)
+                canvas.clip(options.windingRule)
 
-            drawStrokesStyle(strokes, canvas)
+                drawStrokesStyle(strokes, canvas)
 
-            canvas.restore()
-            break
+                canvas.restore()
+                break
 
-        case 'outside':
-            const { renderBounds } = ui.__layout
-            const out = canvas.getSameCanvas(true)
-            ui.__drawRenderPath(out)
+            case 'outside':
+                const { renderBounds } = ui.__layout
+                const out = canvas.getSameCanvas(true)
+                ui.__drawRenderPath(out)
 
-            out.setStroke(undefined, strokeWidth * 2, ui.__)
+                out.setStroke(undefined, strokeWidth * 2, ui.__)
 
-            drawStrokesStyle(strokes, out)
+                drawStrokesStyle(strokes, out)
 
-            out.clip(options.windingRule)
-            out.clearWorld(renderBounds)
+                out.clip(options.windingRule)
+                out.clearWorld(renderBounds)
+
+                canvas.copyWorldToInner(out, ui.__world, renderBounds)
+                out.recycle()
+                break
+        }
 
-            canvas.copyWorldToInner(out, ui.__world, renderBounds)
-            out.recycle()
-            break
     }
+
 }
 
 function drawStrokesStyle(strokes: ILeafStrokePaint[], canvas: ILeaferCanvas): void {
@@ -96,6 +114,7 @@ function drawStrokesStyle(strokes: ILeafStrokePaint[], canvas: ILeaferCanvas): v
         //     canvas.stroke()
         //     canvas.restore()
         // } else {
+
         if (item.blendMode) {
             canvas.saveBlendMode(item.blendMode)
             canvas.stroke()

package/src/StrokeText.ts

@@ -0,0 +1,118 @@
+import { ILeaferCanvas } from '@leafer/interface'
+
+import { IUI, ITextRowData, ILeafStrokePaint, ILeafPaint, IStrokeAlign } from '@leafer-ui/interface'
+import { drawText } from './FillText'
+
+
+export function strokeText(ui: IUI, canvas: ILeaferCanvas, stroke: string | object): void {
+    const { strokeAlign } = ui.__
+    switch (strokeAlign) {
+        case 'center':
+            canvas.setStroke(stroke, ui.__.strokeWidth, ui.__)
+            drawTextStroke(ui, canvas)
+            break
+        case 'inside':
+            drawAlignStroke(ui, canvas, stroke, 'inside')
+            break
+        case 'outside':
+            drawAlignStroke(ui, canvas, stroke, 'outside')
+            break
+    }
+}
+
+function drawAlignStroke(ui: IUI, canvas: ILeaferCanvas, stroke: string | object, align: IStrokeAlign): void {
+    const { strokeWidth, __font } = ui.__
+
+    const out = canvas.getSameCanvas(true)
+    out.setStroke(stroke, strokeWidth * 2, ui.__)
+
+    out.font = __font
+    drawTextStroke(ui, out)
+
+    out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in'
+    drawText(ui, out)
+    out.blendMode = 'normal'
+
+    canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds)
+    out.recycle()
+}
+
+export function strokesText(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]): void {
+    const { strokeAlign } = ui.__
+    switch (strokeAlign) {
+        case 'center':
+            canvas.setStroke(undefined, ui.__.strokeWidth, ui.__)
+            drawStrokesStyle(ui, strokes, canvas)
+            break
+        case 'inside':
+            drawAlignStroke(ui, canvas, strokes, 'inside')
+            break
+        case 'outside':
+            drawAlignStrokes(ui, canvas, strokes, 'outside')
+            break
+    }
+}
+
+
+function drawAlignStrokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[], align: IStrokeAlign): void {
+    const { strokeWidth, __font } = ui.__
+
+    const out = canvas.getSameCanvas(true)
+    out.setStroke(undefined, strokeWidth * 2, ui.__)
+
+    out.font = __font
+    drawStrokesStyle(ui, strokes, out)
+
+    out.blendMode = align === 'outside' ? 'destination - out' : 'destination -in '
+    drawText(ui, out)
+    out.blendMode = 'normal'
+
+    canvas.copyWorldToInner(out, ui.__world, ui.__layout.renderBounds)
+    out.recycle()
+}
+
+
+function drawStrokesStyle(ui: IUI, strokes: ILeafStrokePaint[], canvas: ILeaferCanvas): void {
+    strokes.forEach((item: ILeafStrokePaint) => {
+        canvas.strokeStyle = item.style
+
+        // if (item.transform) {
+        //     canvas.save()
+        //     if (item.blendMode) canvas.blendMode = item.blendMode
+        //     const { a, b, c, d, e, f } = item.transform
+        //     canvas.transform(a, b, c, d, e, f)
+        //     canvas.stroke()
+        //     canvas.restore()
+        // } else {
+
+        if (item.blendMode) {
+            canvas.saveBlendMode(item.blendMode)
+            drawTextStroke(ui, canvas)
+            canvas.restoreBlendMode()
+        } else {
+            drawTextStroke(ui, canvas)
+        }
+        //}
+    })
+}
+
+export function drawTextStroke(ui: IUI, canvas: ILeaferCanvas): void {
+
+    let row: ITextRowData
+    const { rows, decorationY, decorationHeight } = ui.__.__textDrawData
+
+    for (let i = 0, len = rows.length; i < len; i++) {
+        row = rows[i]
+
+        if (row.text) {
+            canvas.strokeText(row.text, row.x, row.y)
+        } else if (row.data) {
+            row.data.forEach(charData => {
+                canvas.strokeText(charData.char, charData.x, row.y)
+            })
+        }
+
+        if (decorationY) canvas.strokeRect(row.x, row.y + decorationY, row.width, decorationHeight)
+    }
+
+}

package/src/index.ts

@@ -1,5 +1,6 @@
 export { fill, fills } from './Fill'
+export { drawText } from './FillText'
 export { stroke, strokes } from './Stroke'
+export { strokeText, strokesText, drawTextStroke } from './StrokeText'
 export { shape } from './Shape'
-export { computeFill, computeStroke } from './Compute'
-
+export { computeFill, computeStroke } from './Compute'

package/src/paint/conic.ts

@@ -1,9 +1,10 @@
-import { IGradientPaint, ILeafPaint, IMatrixData, IPointData } from '@leafer-ui/interface'
+import { IMatrixData, IPointData, IBoundsData } from '@leafer/interface'
+import { IGradientPaint, ILeafPaint } from '@leafer-ui/interface'
 import { Platform, PointHelper, MatrixHelper } from '@leafer/core'
 import { applyStops } from './linear'
 
 
-const { set, getAngle } = PointHelper
+const { set, getAngle, getDistance } = PointHelper
 const { get, rotateOf, scaleOf } = MatrixHelper
 
 const defaultFrom = { x: 0.5, y: 0.5 }
@@ -12,15 +13,17 @@ const defaultTo = { x: 0.5, y: 1 }
 const realFrom = {} as IPointData
 const realTo = {} as IPointData
 
-export function conicGradient(paint: IGradientPaint, width: number, height: number): ILeafPaint {
+export function conicGradient(paint: IGradientPaint, box: IBoundsData): ILeafPaint {
 
     let { from, to, type, opacity, blendMode, stretch } = paint
 
     from || (from = defaultFrom)
     to || (to = defaultTo)
 
-    set(realFrom, from.x * width, from.y * height)
-    set(realTo, to.x * width, to.y * height)
+    const { x, y, width, height } = box
+
+    set(realFrom, x + from.x * width, y + from.y * height)
+    set(realTo, x + to.x * width, y + to.y * height)
 
     const transform: IMatrixData = get()
     const angle = getAngle(realFrom, realTo)
@@ -33,7 +36,7 @@ export function conicGradient(paint: IGradientPaint, width: number, height: numb
         rotateOf(transform, realFrom, angle)
     }
 
-    const style = Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y)
+    const style = Platform.conicGradientSupport ? Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo))
     applyStops(style, paint.stops, opacity)
 
     return {

package/src/paint/image.ts

@@ -1,10 +1,11 @@
+import { IBoundsData } from '@leafer/interface'
 import { IUI, IImagePaint, ILeafPaint, IMatrixData, IImagePaintMode, IPointData } from '@leafer-ui/interface'
 import { Platform, MatrixHelper, ImageEvent } from '@leafer/core'
 
 
 const { get, rotateOf, translate, scaleOf, scale: scaleHelper, rotate } = MatrixHelper
 
-export function image(ui: IUI, attrName: string, paint: IImagePaint, boxWidth: number, boxHeight: number): ILeafPaint {
+export function image(ui: IUI, attrName: string, paint: IImagePaint, box: IBoundsData): ILeafPaint {
     let { type, blendMode } = paint
     let leaferPaint: ILeafPaint = {
         type,
@@ -19,22 +20,26 @@ export function image(ui: IUI, attrName: string, paint: IImagePaint, boxWidth: n
         let transform: IMatrixData
         let { opacity, mode, offset, scale, rotation } = paint
         let { width, height } = image
-        const sameBox = boxWidth === width && boxHeight === height
+        const sameBox = box.width === width && box.height === height
 
         switch (mode) {
             case 'strench':
-                if (!sameBox) width = boxWidth, height = boxHeight
+                if (!sameBox) width = box.width, height = box.height
+                if (box.x || box.y) {
+                    transform = get()
+                    translate(transform, box.x, box.y)
+                }
                 break
             case 'clip':
-                if (offset || scale || rotation) transform = getCropTransform(offset, scale, rotation)
+                if (offset || scale || rotation) transform = getClipTransform(box, offset, scale, rotation)
                 break
             case 'repeat':
-                if (!sameBox || scale || rotation) transform = getRepeatTransform(width, height, scale as number, rotation)
+                if (!sameBox || scale || rotation) transform = getRepeatTransform(box, width, height, scale as number, rotation)
                 break
             case 'fit':
             case 'cover':
             default:
-                if (!sameBox || rotation) transform = getFillOrFitTransform(mode, width, height, boxWidth, boxHeight, rotation)
+                if (!sameBox || rotation) transform = getFillOrFitTransform(mode, box, width, height, rotation)
         }
 
         leaferPaint.style = createPattern(image.getCanvas(width, height, opacity), transform, mode === 'repeat')
@@ -44,7 +49,7 @@ export function image(ui: IUI, attrName: string, paint: IImagePaint, boxWidth: n
         image.load(() => {
             if (!ui.__.__getInput('width')) ui.width = image.width
             if (!ui.__.__getInput('height')) ui.height = image.height
-            ui.__updateAttr('width')
+            ui.forceUpdate('width')
             ui.emitEvent(new ImageEvent(ImageEvent.LOADED, ui, image, attrName, paint))
         }, (error) => {
             ui.emitEvent(new ImageEvent(ImageEvent.ERROR, ui, image, attrName, paint, error))
@@ -55,49 +60,48 @@ export function image(ui: IUI, attrName: string, paint: IImagePaint, boxWidth: n
     return leaferPaint
 }
 
-function getCropTransform(offset: IPointData, scale: number | IPointData, rotation: number): IMatrixData {
-    const transform: IMatrixData = get()
-    if (offset) translate(transform, offset.x, offset.y)
-    if (scale) typeof scale === 'number' ? scaleHelper(transform, scale) : scaleHelper(transform, scale.x, scale.y)
-    if (rotation) rotate(transform, rotation)
-    return transform
-}
-
-function getFillOrFitTransform(mode: IImagePaintMode, imageWidth: number, imageHeight: number, boxWidth: number, boxHeight: number, rotation: number): IMatrixData {
+function getFillOrFitTransform(mode: IImagePaintMode, box: IBoundsData, width: number, height: number, rotation: number): IMatrixData {
     const transform: IMatrixData = get()
     const swap = rotation && rotation !== 180
-    const sw = boxWidth / (swap ? imageHeight : imageWidth)
-    const sh = boxHeight / (swap ? imageWidth : imageHeight)
+    const sw = box.width / (swap ? height : width)
+    const sh = box.height / (swap ? width : height)
     const scale = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh)
-    const x = (boxWidth - imageWidth * scale) / 2
-    const y = (boxHeight - imageHeight * scale) / 2
+    const x = box.x + (box.width - width * scale) / 2
+    const y = box.y + (box.height - height * scale) / 2
     translate(transform, x, y)
     scaleHelper(transform, scale)
-    if (rotation) {
-        const center = { x: boxWidth / 2, y: boxHeight / 2 }
-        rotateOf(transform, center, rotation)
-    }
+    if (rotation) rotateOf(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation)
     return transform
 }
 
+function getClipTransform(box: IBoundsData, offset: IPointData, scale: number | IPointData, rotation: number): IMatrixData {
+    const transform: IMatrixData = get()
+    translate(transform, box.x, box.y)
+    if (offset) translate(transform, offset.x, offset.y)
+    if (scale) typeof scale === 'number' ? scaleHelper(transform, scale) : scaleHelper(transform, scale.x, scale.y)
+    if (rotation) rotate(transform, rotation)
+    return transform
+}
 
-function getRepeatTransform(imageWidth: number, imageHeight: number, scale: number, rotation: number): IMatrixData {
+function getRepeatTransform(box: IBoundsData, width: number, height: number, scale: number, rotation: number): IMatrixData {
     const transform = get()
+
     if (rotation) {
         rotate(transform, rotation)
         switch (rotation) {
             case 90:
-                translate(transform, imageHeight, 0)
+                translate(transform, height, 0)
                 break
             case 180:
-                translate(transform, imageWidth, imageHeight)
+                translate(transform, width, height)
                 break
             case 270:
-                translate(transform, 0, imageWidth)
+                translate(transform, 0, width)
                 break
         }
     }
-    if (scale) scaleOf(transform, { x: 0, y: 0 }, scale)
+    translate(transform, box.x, box.y)
+    if (scale) scaleOf(transform, box, scale)
     return transform
 }
 

package/src/paint/linear.ts

@@ -1,21 +1,21 @@
-import { IObject } from '@leafer/interface'
+import { IObject, IBoundsData } from '@leafer/interface'
 import { Platform } from '@leafer/core'
 
 import { IGradientPaint, ILeafPaint, IColorStop } from '@leafer-ui/interface'
-import { stringColor } from '@leafer-ui/color'
+import { ColorConvert } from '@leafer-ui/color'
 
 
 const defaultFrom = { x: 0.5, y: 0 }
 const defaultTo = { x: 0.5, y: 1 }
 
-export function linearGradient(paint: IGradientPaint, width: number, height: number): ILeafPaint {
+export function linearGradient(paint: IGradientPaint, box: IBoundsData): ILeafPaint {
 
     let { from, to, type, blendMode, opacity } = paint
 
     from || (from = defaultFrom)
     to || (to = defaultTo)
 
-    const style = Platform.canvas.createLinearGradient(from.x * width, from.y * height, to.x * width, to.y * height)
+    const style = Platform.canvas.createLinearGradient(box.x + from.x * box.width, box.y + from.y * box.height, box.x + to.x * box.width, box.y + to.y * box.height)
     applyStops(style, paint.stops, opacity)
 
     return {
@@ -30,6 +30,6 @@ export function applyStops(gradient: IObject, stops: IColorStop[], opacity: numb
     let stop: IColorStop
     for (let i = 0, len = stops.length; i < len; i++) {
         stop = stops[i]
-        gradient.addColorStop(stop.offset, stringColor(stop.color, opacity))
+        gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity))
     }
 }

package/src/paint/radial.ts

@@ -1,5 +1,8 @@
-import { IGradientPaint, ILeafPaint, IMatrixData, IPointData } from '@leafer-ui/interface'
+import { IBoundsData } from '@leafer/interface'
 import { Platform, PointHelper, MatrixHelper } from '@leafer/core'
+
+import { IGradientPaint, ILeafPaint, IMatrixData, IPointData } from '@leafer-ui/interface'
+
 import { applyStops } from './linear'
 
 
@@ -12,17 +15,19 @@ const defaultTo = { x: 0.5, y: 1 }
 const realFrom = {} as IPointData
 const realTo = {} as IPointData
 
-export function radialGradient(paint: IGradientPaint, width: number, height: number): ILeafPaint {
+export function radialGradient(paint: IGradientPaint, box: IBoundsData): ILeafPaint {
 
     let { from, to, type, opacity, blendMode, stretch } = paint
 
     from || (from = defaultFrom)
     to || (to = defaultTo)
 
-    set(realFrom, from.x * width, from.y * height)
-    set(realTo, to.x * width, to.y * height)
+    const { x, y, width, height } = box
+    set(realFrom, x + from.x * width, y + from.y * height)
+    set(realTo, x + to.x * width, y + to.y * height)
 
     let transform: IMatrixData
+
     if (width !== height || stretch) {
         transform = get()
         scaleOf(transform, realFrom, width / height * (stretch || 1), 1)