@leafer-ui/paint 1.0.0-alpha.9 → 1.0.0-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/paint",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.0-beta",
   "description": "@leafer-ui/paint",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -18,8 +18,12 @@
     "leafer-ui",
     "leaferjs"
   ],
+  "dependencies": {
+    "@leafer/core": "1.0.0-beta",
+    "@leafer-ui/color": "1.0.0-beta"
+  },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.9",
-    "@leafer-ui/interface": "1.0.0-alpha.9"
+    "@leafer/interface": "1.0.0-beta",
+    "@leafer-ui/interface": "1.0.0-beta"
   }
 }

package/src/Compute.ts

@@ -0,0 +1,51 @@
+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'
+import { radialGradient } from "./paint/radial"
+import { conicGradient } from "./paint/conic"
+
+
+export function computeFill(ui: IUI): void {
+    compute(ui, 'fill')
+}
+
+export function computeStroke(ui: IUI): void {
+    compute(ui, 'stroke')
+}
+
+function compute(ui: IUI, attrName: string): void {
+    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 (typeof paint !== 'object' || paint.visible === false || paint.opacity === 0) return undefined
+    const { boxBounds } = ui.__layout
+
+    switch (paint.type) {
+        case 'solid':
+            let { type, blendMode, color, opacity } = paint
+            return { type, blendMode, style: ColorConvert.string(color, opacity) }
+        case 'image':
+            return image(ui, attrName, paint, boxBounds)
+        case 'linear':
+            return linearGradient(paint, boxBounds)
+        case 'radial':
+            return radialGradient(paint, boxBounds)
+        case 'angular':
+            return conicGradient(paint, boxBounds)
+        default:
+            return (paint as IRGB).r ? { type: 'solid', style: ColorConvert.string(paint) } : undefined
+    }
+}

package/src/Fill.ts

@@ -2,19 +2,44 @@ 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
-        canvas.fill(windingRule)
+
+        if (item.transform) {
+            canvas.save()
+
+            const { a, b, c, d, e, f } = item.transform
+            canvas.transform(a, b, c, d, e, f)
+
+            if (item.blendMode) canvas.blendMode = item.blendMode
+
+            __font ? drawText(ui, canvas) : canvas.fill(windingRule)
+
+            canvas.restore()
+        } else {
+            if (item.blendMode) {
+                canvas.saveBlendMode(item.blendMode)
+
+                __font ? drawText(ui, canvas) : canvas.fill(windingRule)
+
+                canvas.restoreBlendMode()
+            } else {
+
+                __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

@@ -0,0 +1,50 @@
+import { IBoundsData, ILeaferCanvas, IRenderOptions, IMatrix } from '@leafer/interface'
+import { BoundsHelper } from '@leafer/core'
+
+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()
+
+    let bounds: IBoundsData, matrix: IMatrix, shapeBounds: IBoundsData
+    let worldCanvas: ILeaferCanvas
+
+    const { __world } = ui
+    let { a: scaleX, d: scaleY } = __world
+
+    if (!current.bounds.includes(__world, options.matrix)) {
+
+        const { renderShapeSpread: spread } = ui.__layout
+        const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, spread * scaleX) : current.bounds, __world, options.matrix)
+        matrix = current.bounds.getFitMatrix(worldClipBounds)
+
+        if (matrix.a < 1) {
+            worldCanvas = current.getSameCanvas()
+            ui.__renderShape(worldCanvas, options)
+
+            scaleX *= matrix.a
+            scaleY *= matrix.d
+        }
+
+        shapeBounds = getOuterOf(__world, matrix)
+        bounds = getByMove(shapeBounds, -matrix.e, -matrix.f)
+
+        if (options.matrix) matrix.multiply(options.matrix)
+        options = { ...options, matrix }
+
+    } else {
+
+        bounds = shapeBounds = __world
+        worldCanvas = canvas
+    }
+
+    ui.__renderShape(canvas, options)
+
+    return {
+        canvas, matrix, bounds,
+        worldCanvas, shapeBounds, scaleX, scaleY
+    }
+}

package/src/Stroke.ts

@@ -2,85 +2,103 @@ 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.clearBounds(ui.__layout.renderBounds)
+                canvas.clip(options.windingRule)
+                canvas.stroke()
 
-            canvas.copyWorldToLocal(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.clearBounds(renderBounds)
+                out.clip(options.windingRule)
+                out.clearWorld(renderBounds)
+
+                canvas.copyWorldToInner(out, ui.__world, renderBounds)
+                out.recycle()
+                break
+        }
 
-            canvas.copyWorldToLocal(out, ui.__world, renderBounds)
-            out.recycle()
-            break
     }
 
 }
@@ -88,6 +106,14 @@ export function strokes(ui: IUI, canvas: ILeaferCanvas, strokes: ILeafPaint[]):
 function drawStrokesStyle(strokes: ILeafStrokePaint[], canvas: ILeaferCanvas): void {
     strokes.forEach((item: ILeafStrokePaint) => {
         canvas.strokeStyle = item.style
-        canvas.stroke()
+
+        if (item.blendMode) {
+            canvas.saveBlendMode(item.blendMode)
+            canvas.stroke()
+            canvas.restoreBlendMode()
+        } else {
+            canvas.stroke()
+        }
+
     })
 }

package/src/StrokeText.ts

@@ -0,0 +1,110 @@
+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.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,3 +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'

package/src/paint/conic.ts

@@ -0,0 +1,51 @@
+import { IMatrixData, IPointData, IBoundsData } from '@leafer/interface'
+import { Platform, PointHelper, MatrixHelper } from '@leafer/core'
+
+import { IGradientPaint, ILeafPaint } from '@leafer-ui/interface'
+
+import { applyStops } from './linear'
+
+
+const { set, getAngle, getDistance } = PointHelper
+const { get, rotateOf, scaleOf } = MatrixHelper
+
+const defaultFrom = { x: 0.5, y: 0.5 }
+const defaultTo = { x: 0.5, y: 1 }
+
+const realFrom = {} as IPointData
+const realTo = {} as IPointData
+
+export function conicGradient(paint: IGradientPaint, box: IBoundsData): ILeafPaint {
+
+    let { from, to, type, opacity, blendMode, stretch } = paint
+
+    from || (from = defaultFrom)
+    to || (to = defaultTo)
+
+    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)
+
+    if (Platform.conicGradientRotate90) {
+        scaleOf(transform, realFrom, width / height * (stretch || 1), 1)
+        rotateOf(transform, realFrom, angle + 90)
+    } else {
+        scaleOf(transform, realFrom, 1, width / height * (stretch || 1))
+        rotateOf(transform, realFrom, angle)
+    }
+
+    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 {
+        type,
+        blendMode,
+        style,
+        transform
+    }
+
+}

package/src/paint/image.ts

@@ -0,0 +1,117 @@
+import { IBoundsData } from '@leafer/interface'
+import { Platform, MatrixHelper, ImageEvent } from '@leafer/core'
+
+import { IUI, IImagePaint, ILeafPaint, IMatrixData, IImagePaintMode, IPointData } from '@leafer-ui/interface'
+
+
+const { get, rotateOf, translate, scaleOf, scale: scaleHelper, rotate } = MatrixHelper
+
+export function image(ui: IUI, attrName: string, paint: IImagePaint, box: IBoundsData): ILeafPaint {
+    let { type, blendMode } = paint
+    let leaferPaint: ILeafPaint = {
+        type,
+        blendMode,
+        style: 'rgba(255,255,255,0)'
+    }
+
+    const image = ui.leafer.imageManager.get(paint)
+
+    if (image.ready) {
+
+        let transform: IMatrixData
+        let { opacity, mode, offset, scale, rotation } = paint
+        let { width, height } = image
+        const sameBox = box.width === width && box.height === height
+
+        switch (mode) {
+            case 'strench':
+                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 = getClipTransform(box, offset, scale, rotation)
+                break
+            case 'repeat':
+                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, box, width, height, rotation)
+        }
+
+        leaferPaint.style = createPattern(image.getCanvas(width, height, opacity), transform, mode === 'repeat')
+
+    } else {
+
+        image.load(() => {
+            if (!ui.__.__getInput('width')) ui.width = image.width
+            if (!ui.__.__getInput('height')) ui.height = image.height
+            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))
+        })
+
+    }
+
+    return leaferPaint
+}
+
+function getFillOrFitTransform(mode: IImagePaintMode, box: IBoundsData, width: number, height: number, rotation: number): IMatrixData {
+    const transform: IMatrixData = get()
+    const swap = rotation && rotation !== 180
+    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 = 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) 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(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, height, 0)
+                break
+            case 180:
+                translate(transform, width, height)
+                break
+            case 270:
+                translate(transform, 0, width)
+                break
+        }
+    }
+    translate(transform, box.x, box.y)
+    if (scale) scaleOf(transform, box, scale)
+    return transform
+}
+
+
+function createPattern(canvas: any, transform?: IMatrixData, repeat?: boolean,): CanvasPattern {
+    let style = Platform.canvas.createPattern(canvas, repeat ? 'repeat' : 'no-repeat')
+    if (transform) {
+        const { a, b, c, d, e, f } = transform
+        style.setTransform(new DOMMatrix([a, b, c, d, e, f]))
+    }
+    return style
+}

package/src/paint/linear.ts

@@ -0,0 +1,35 @@
+import { IObject, IBoundsData } from '@leafer/interface'
+import { Platform } from '@leafer/core'
+
+import { IGradientPaint, ILeafPaint, IColorStop } from '@leafer-ui/interface'
+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, box: IBoundsData): ILeafPaint {
+
+    let { from, to, type, blendMode, opacity } = paint
+
+    from || (from = defaultFrom)
+    to || (to = defaultTo)
+
+    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 {
+        type,
+        blendMode,
+        style
+    }
+
+}
+
+export function applyStops(gradient: IObject, stops: IColorStop[], opacity: number): void {
+    let stop: IColorStop
+    for (let i = 0, len = stops.length; i < len; i++) {
+        stop = stops[i]
+        gradient.addColorStop(stop.offset, ColorConvert.string(stop.color, opacity))
+    }
+}

package/src/paint/radial.ts

@@ -0,0 +1,47 @@
+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'
+
+
+const { set, getAngle, getDistance } = PointHelper
+const { get, rotateOf, scaleOf } = MatrixHelper
+
+const defaultFrom = { x: 0.5, y: 0.5 }
+const defaultTo = { x: 0.5, y: 1 }
+
+const realFrom = {} as IPointData
+const realTo = {} as IPointData
+
+export function radialGradient(paint: IGradientPaint, box: IBoundsData): ILeafPaint {
+
+    let { from, to, type, opacity, blendMode, stretch } = paint
+
+    from || (from = defaultFrom)
+    to || (to = defaultTo)
+
+    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)
+        rotateOf(transform, realFrom, getAngle(realFrom, realTo) + 90)
+    }
+
+    const style = Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo))
+    applyStops(style, paint.stops, opacity)
+
+    return {
+        type,
+        blendMode,
+        style,
+        transform
+    }
+
+}