@leafer-ui/effect 1.0.0-alpha.7 → 1.0.0-bate
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/Blur.ts +10 -0
- package/src/InnerShadow.ts +56 -0
- package/src/Shadow.ts +90 -0
- package/src/index.ts +3 -0
package/package.json
CHANGED
package/src/Blur.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ILeaferCanvas } from '@leafer/interface'
|
|
2
|
+
|
|
3
|
+
import { IUI } from '@leafer-ui/interface'
|
|
4
|
+
|
|
5
|
+
export function blur(ui: IUI, current: ILeaferCanvas, origin: ILeaferCanvas): void {
|
|
6
|
+
const { blur } = ui.__
|
|
7
|
+
origin.setWorldBlur(blur * ui.__world.a)
|
|
8
|
+
origin.copyWorldToInner(current, ui.__world, ui.__layout.renderBounds)
|
|
9
|
+
origin.filter = 'none'
|
|
10
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { IBoundsData, ILeaferCanvas, IMatrixWithBoundsData, IOffsetBoundsData } from '@leafer/interface'
|
|
2
|
+
import { BoundsHelper } from '@leafer/core'
|
|
3
|
+
|
|
4
|
+
import { IUI, ICachedShape } from '@leafer-ui/interface'
|
|
5
|
+
import { drawWorldShadow } from './Shadow'
|
|
6
|
+
|
|
7
|
+
const { toOffsetOutBounds } = BoundsHelper
|
|
8
|
+
const offsetOutBounds = {} as IOffsetBoundsData
|
|
9
|
+
|
|
10
|
+
export function innerShadow(ui: IUI, current: ILeaferCanvas, shape: ICachedShape): void {
|
|
11
|
+
|
|
12
|
+
let copyBounds: IBoundsData, spreadScale: number
|
|
13
|
+
|
|
14
|
+
const { __world, __layout: __layout } = ui
|
|
15
|
+
const { innerShadow } = ui.__
|
|
16
|
+
const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape
|
|
17
|
+
|
|
18
|
+
const other = current.getSameCanvas()
|
|
19
|
+
const end = innerShadow.length - 1
|
|
20
|
+
|
|
21
|
+
toOffsetOutBounds(bounds, offsetOutBounds)
|
|
22
|
+
|
|
23
|
+
innerShadow.forEach((item, index) => {
|
|
24
|
+
|
|
25
|
+
other.save()
|
|
26
|
+
|
|
27
|
+
other.setWorldShadow((offsetOutBounds.offsetX + item.x * scaleX), (offsetOutBounds.offsetY + item.y * scaleY), item.blur * scaleX)
|
|
28
|
+
|
|
29
|
+
spreadScale = item.spread ? 1 - item.spread * 2 / (__layout.boxBounds.width + (__layout.shapeStrokeSpread || 0) * 2) : 0
|
|
30
|
+
|
|
31
|
+
drawWorldShadow(other, offsetOutBounds, spreadScale, shape)
|
|
32
|
+
|
|
33
|
+
other.restore()
|
|
34
|
+
|
|
35
|
+
if (worldCanvas) {
|
|
36
|
+
other.copyWorld(other, bounds, __world, 'copy')
|
|
37
|
+
other.copyWorld(worldCanvas, __world, __world, 'source-out')
|
|
38
|
+
copyBounds = __world
|
|
39
|
+
} else {
|
|
40
|
+
other.copyWorld(shape.canvas, shapeBounds, bounds, 'source-out')
|
|
41
|
+
copyBounds = bounds
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
other.fillWorld(copyBounds, item.color, 'source-in')
|
|
45
|
+
|
|
46
|
+
current.copyWorldToInner(other, copyBounds as IMatrixWithBoundsData, __layout.renderBounds, item.blendMode)
|
|
47
|
+
|
|
48
|
+
if (end && index < end) other.clear()
|
|
49
|
+
|
|
50
|
+
})
|
|
51
|
+
|
|
52
|
+
other.recycle()
|
|
53
|
+
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
|
package/src/Shadow.ts
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { IBoundsData, ILeaferCanvas, IMatrixWithBoundsData, IOffsetBoundsData } from '@leafer/interface'
|
|
2
|
+
import { BoundsHelper, Platform } from '@leafer/core'
|
|
3
|
+
|
|
4
|
+
import { IUI, ICachedShape } from '@leafer-ui/interface'
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
const { copy, toOffsetOutBounds } = BoundsHelper
|
|
8
|
+
const tempBounds = {} as IBoundsData
|
|
9
|
+
const offsetOutBounds = {} as IOffsetBoundsData
|
|
10
|
+
|
|
11
|
+
export function shadow(ui: IUI, current: ILeaferCanvas, shape: ICachedShape): void {
|
|
12
|
+
|
|
13
|
+
let copyBounds: IBoundsData, spreadScale: number
|
|
14
|
+
|
|
15
|
+
const { __world, __layout } = ui
|
|
16
|
+
const { shadow } = ui.__
|
|
17
|
+
const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape
|
|
18
|
+
|
|
19
|
+
const other = current.getSameCanvas()
|
|
20
|
+
const end = shadow.length - 1
|
|
21
|
+
|
|
22
|
+
toOffsetOutBounds(bounds, offsetOutBounds)
|
|
23
|
+
|
|
24
|
+
shadow.forEach((item, index) => {
|
|
25
|
+
|
|
26
|
+
other.setWorldShadow((offsetOutBounds.offsetX + item.x * scaleX), (offsetOutBounds.offsetY + item.y * scaleY), item.blur * scaleX, item.color)
|
|
27
|
+
|
|
28
|
+
spreadScale = item.spread ? 1 + item.spread * 2 / (__layout.boxBounds.width + (__layout.shapeStrokeSpread || 0) * 2) : 0
|
|
29
|
+
|
|
30
|
+
drawWorldShadow(other, offsetOutBounds, spreadScale, shape)
|
|
31
|
+
|
|
32
|
+
copyBounds = bounds
|
|
33
|
+
|
|
34
|
+
if (item.box) {
|
|
35
|
+
|
|
36
|
+
other.restore()
|
|
37
|
+
other.save()
|
|
38
|
+
|
|
39
|
+
if (worldCanvas) {
|
|
40
|
+
other.copyWorld(other, bounds, __world, 'copy')
|
|
41
|
+
copyBounds = __world
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
worldCanvas ? other.copyWorld(worldCanvas, __world, __world, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out')
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
current.copyWorldToInner(other, copyBounds as IMatrixWithBoundsData, __layout.renderBounds, item.blendMode)
|
|
48
|
+
|
|
49
|
+
if (end && index < end) other.clear()
|
|
50
|
+
})
|
|
51
|
+
|
|
52
|
+
other.recycle()
|
|
53
|
+
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
export function drawWorldShadow(canvas: ILeaferCanvas, outBounds: IBoundsData, spreadScale: number, shape: ICachedShape,): void {
|
|
58
|
+
|
|
59
|
+
const { bounds, shapeBounds } = shape
|
|
60
|
+
|
|
61
|
+
if (Platform.fullImageShadow) { // Safari
|
|
62
|
+
|
|
63
|
+
copy(tempBounds, canvas.bounds)
|
|
64
|
+
tempBounds.x += (outBounds.x - shapeBounds.x)
|
|
65
|
+
tempBounds.y += (outBounds.y - shapeBounds.y)
|
|
66
|
+
|
|
67
|
+
if (spreadScale) {
|
|
68
|
+
const { matrix } = shape
|
|
69
|
+
tempBounds.x -= (bounds.x + (matrix ? matrix.e : 0) + bounds.width / 2) * (spreadScale - 1)
|
|
70
|
+
tempBounds.y -= (bounds.y + (matrix ? matrix.f : 0) + bounds.height / 2) * (spreadScale - 1)
|
|
71
|
+
tempBounds.width *= spreadScale
|
|
72
|
+
tempBounds.height *= spreadScale
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
canvas.copyWorld(shape.canvas, canvas.bounds, tempBounds)
|
|
76
|
+
|
|
77
|
+
} else {
|
|
78
|
+
|
|
79
|
+
if (spreadScale) {
|
|
80
|
+
copy(tempBounds, outBounds)
|
|
81
|
+
tempBounds.x -= (outBounds.width / 2) * (spreadScale - 1)
|
|
82
|
+
tempBounds.y -= (outBounds.height / 2) * (spreadScale - 1)
|
|
83
|
+
tempBounds.width *= spreadScale
|
|
84
|
+
tempBounds.height *= spreadScale
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
canvas.copyWorld(shape.canvas, shapeBounds, spreadScale ? tempBounds : outBounds)
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
}
|
package/src/index.ts
CHANGED