@leafer-ui/paint 1.9.12 → 1.10.0
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 +5 -5
- package/src/Fill.ts +12 -14
- package/src/FillText.ts +2 -2
- package/src/Stroke.ts +16 -18
- package/src/StrokeText.ts +17 -19
- package/src/index.ts +5 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leafer-ui/paint",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.0",
|
|
4
4
|
"description": "@leafer-ui/paint",
|
|
5
5
|
"author": "Chao (Leafer) Wan",
|
|
6
6
|
"license": "MIT",
|
|
@@ -22,11 +22,11 @@
|
|
|
22
22
|
"leaferjs"
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@leafer/core": "1.
|
|
26
|
-
"@leafer-ui/draw": "1.
|
|
25
|
+
"@leafer/core": "1.10.0",
|
|
26
|
+
"@leafer-ui/draw": "1.10.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@leafer/interface": "1.
|
|
30
|
-
"@leafer-ui/interface": "1.
|
|
29
|
+
"@leafer/interface": "1.10.0",
|
|
30
|
+
"@leafer-ui/interface": "1.10.0"
|
|
31
31
|
}
|
|
32
32
|
}
|
package/src/Fill.ts
CHANGED
|
@@ -1,28 +1,26 @@
|
|
|
1
|
-
import { ILeaferCanvas } from '@leafer/interface'
|
|
1
|
+
import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
|
|
2
2
|
|
|
3
3
|
import { ILeafPaint, IUI } from '@leafer-ui/interface'
|
|
4
|
-
import { PaintImage } from "@leafer-ui/draw"
|
|
4
|
+
import { PaintImage, Paint } from "@leafer-ui/draw"
|
|
5
5
|
|
|
6
|
-
import { fillText } from './FillText'
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
export function fill(fill: string, ui: IUI, canvas: ILeaferCanvas): void {
|
|
7
|
+
export function fill(fill: string, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
|
|
10
8
|
canvas.fillStyle = fill
|
|
11
|
-
fillPathOrText(ui, canvas)
|
|
9
|
+
fillPathOrText(ui, canvas, renderOptions)
|
|
12
10
|
}
|
|
13
11
|
|
|
14
12
|
|
|
15
|
-
export function fills(fills: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void {
|
|
13
|
+
export function fills(fills: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
|
|
16
14
|
let item: ILeafPaint
|
|
17
15
|
for (let i = 0, len = fills.length; i < len; i++) {
|
|
18
16
|
item = fills[i]
|
|
19
17
|
|
|
20
18
|
if (item.image) {
|
|
21
19
|
|
|
22
|
-
if (PaintImage.checkImage(
|
|
20
|
+
if (PaintImage.checkImage(item, !ui.__.__font, ui, canvas, renderOptions)) continue
|
|
23
21
|
|
|
24
22
|
if (!item.style) {
|
|
25
|
-
if (!i && item.image.isPlacehold) ui.drawImagePlaceholder(canvas,
|
|
23
|
+
if (!i && item.image.isPlacehold) ui.drawImagePlaceholder(item.image, canvas, renderOptions) // 图片加载中或加载失败
|
|
26
24
|
continue
|
|
27
25
|
}
|
|
28
26
|
|
|
@@ -39,7 +37,7 @@ export function fills(fills: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void
|
|
|
39
37
|
if (item.scaleFixed === true || (item.scaleFixed === 'zoom-in' && scaleX > 1 && scaleY > 1)) canvas.scale(1 / scaleX, 1 / scaleY)
|
|
40
38
|
}
|
|
41
39
|
if (item.blendMode) canvas.blendMode = item.blendMode
|
|
42
|
-
fillPathOrText(ui, canvas)
|
|
40
|
+
fillPathOrText(ui, canvas, renderOptions)
|
|
43
41
|
canvas.restore()
|
|
44
42
|
|
|
45
43
|
} else {
|
|
@@ -47,10 +45,10 @@ export function fills(fills: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void
|
|
|
47
45
|
if (item.blendMode) {
|
|
48
46
|
|
|
49
47
|
canvas.saveBlendMode(item.blendMode)
|
|
50
|
-
fillPathOrText(ui, canvas)
|
|
48
|
+
fillPathOrText(ui, canvas, renderOptions)
|
|
51
49
|
canvas.restoreBlendMode()
|
|
52
50
|
|
|
53
|
-
} else fillPathOrText(ui, canvas)
|
|
51
|
+
} else fillPathOrText(ui, canvas, renderOptions)
|
|
54
52
|
|
|
55
53
|
}
|
|
56
54
|
|
|
@@ -58,6 +56,6 @@ export function fills(fills: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void
|
|
|
58
56
|
}
|
|
59
57
|
|
|
60
58
|
|
|
61
|
-
export function fillPathOrText(ui: IUI, canvas: ILeaferCanvas): void {
|
|
62
|
-
ui.__.__font ? fillText(ui, canvas) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill())
|
|
59
|
+
export function fillPathOrText(ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
|
|
60
|
+
ui.__.__font ? Paint.fillText(ui, canvas, renderOptions) : (ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill())
|
|
63
61
|
}
|
package/src/FillText.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { ILeaferCanvas } from '@leafer/interface'
|
|
1
|
+
import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
|
|
2
2
|
|
|
3
3
|
import { ITextRowData, IText } from '@leafer-ui/interface'
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
export function fillText(ui: IText, canvas: ILeaferCanvas): void {
|
|
6
|
+
export function fillText(ui: IText, canvas: ILeaferCanvas, _renderOptions: IRenderOptions): void {
|
|
7
7
|
|
|
8
8
|
const data = ui.__, { rows, decorationY } = data.__textDrawData
|
|
9
9
|
if (data.__isPlacehold && data.placeholderColor) canvas.fillStyle = data.placeholderColor
|
package/src/Stroke.ts
CHANGED
|
@@ -1,31 +1,29 @@
|
|
|
1
|
-
import { ILeaferCanvas } from '@leafer/interface'
|
|
1
|
+
import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
|
|
2
2
|
import { LeafHelper, isObject } from "@leafer/core"
|
|
3
3
|
|
|
4
4
|
import { IUI, ILeafPaint } from '@leafer-ui/interface'
|
|
5
5
|
import { Paint } from '@leafer-ui/draw'
|
|
6
6
|
|
|
7
|
-
import { strokeText, drawStrokesStyle } from './StrokeText'
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
export function stroke(stroke: string, ui: IUI, canvas: ILeaferCanvas): void {
|
|
8
|
+
export function stroke(stroke: string, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
|
|
11
9
|
const data = ui.__
|
|
12
10
|
if (!data.__strokeWidth) return
|
|
13
11
|
|
|
14
12
|
if (data.__font) {
|
|
15
13
|
|
|
16
|
-
strokeText(stroke, ui, canvas)
|
|
14
|
+
Paint.strokeText(stroke, ui, canvas, renderOptions)
|
|
17
15
|
|
|
18
16
|
} else {
|
|
19
17
|
|
|
20
18
|
switch (data.strokeAlign) {
|
|
21
19
|
case 'center':
|
|
22
|
-
drawCenter(stroke, 1, ui, canvas)
|
|
20
|
+
drawCenter(stroke, 1, ui, canvas, renderOptions)
|
|
23
21
|
break
|
|
24
22
|
case 'inside':
|
|
25
|
-
drawInside(stroke, ui, canvas)
|
|
23
|
+
drawInside(stroke, ui, canvas, renderOptions)
|
|
26
24
|
break
|
|
27
25
|
case 'outside':
|
|
28
|
-
drawOutside(stroke, ui, canvas)
|
|
26
|
+
drawOutside(stroke, ui, canvas, renderOptions)
|
|
29
27
|
break
|
|
30
28
|
}
|
|
31
29
|
|
|
@@ -33,43 +31,43 @@ export function stroke(stroke: string, ui: IUI, canvas: ILeaferCanvas): void {
|
|
|
33
31
|
}
|
|
34
32
|
|
|
35
33
|
|
|
36
|
-
export function strokes(strokes: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void {
|
|
37
|
-
stroke(strokes as any, ui, canvas)
|
|
34
|
+
export function strokes(strokes: ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
|
|
35
|
+
Paint.stroke(strokes as any, ui, canvas, renderOptions)
|
|
38
36
|
}
|
|
39
37
|
|
|
40
38
|
|
|
41
|
-
function drawCenter(stroke: string | ILeafPaint[], strokeWidthScale: number, ui: IUI, canvas: ILeaferCanvas) {
|
|
39
|
+
function drawCenter(stroke: string | ILeafPaint[], strokeWidthScale: number, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions) {
|
|
42
40
|
const data = ui.__
|
|
43
41
|
if (isObject(stroke)) {
|
|
44
|
-
drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas)
|
|
42
|
+
Paint.drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas, renderOptions)
|
|
45
43
|
} else {
|
|
46
44
|
canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data)
|
|
47
45
|
canvas.stroke()
|
|
48
46
|
}
|
|
49
47
|
|
|
50
|
-
if (data.__useArrow) Paint.strokeArrow(stroke, ui, canvas)
|
|
48
|
+
if (data.__useArrow) Paint.strokeArrow(stroke, ui, canvas, renderOptions)
|
|
51
49
|
}
|
|
52
50
|
|
|
53
|
-
function drawInside(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas) {
|
|
51
|
+
function drawInside(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions) {
|
|
54
52
|
canvas.save()
|
|
55
53
|
canvas.clipUI(ui)
|
|
56
54
|
|
|
57
|
-
drawCenter(stroke, 2, ui, canvas)
|
|
55
|
+
drawCenter(stroke, 2, ui, canvas, renderOptions)
|
|
58
56
|
canvas.restore()
|
|
59
57
|
}
|
|
60
58
|
|
|
61
|
-
function drawOutside(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas) {
|
|
59
|
+
function drawOutside(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions) {
|
|
62
60
|
const data = ui.__
|
|
63
61
|
if (data.__fillAfterStroke) {
|
|
64
62
|
|
|
65
|
-
drawCenter(stroke, 2, ui, canvas)
|
|
63
|
+
drawCenter(stroke, 2, ui, canvas, renderOptions)
|
|
66
64
|
|
|
67
65
|
} else {
|
|
68
66
|
const { renderBounds } = ui.__layout
|
|
69
67
|
const out = canvas.getSameCanvas(true, true)
|
|
70
68
|
ui.__drawRenderPath(out)
|
|
71
69
|
|
|
72
|
-
drawCenter(stroke, 2, ui, out)
|
|
70
|
+
drawCenter(stroke, 2, ui, out, renderOptions)
|
|
73
71
|
|
|
74
72
|
out.clipUI(data)
|
|
75
73
|
out.clearWorld(renderBounds)
|
package/src/StrokeText.ts
CHANGED
|
@@ -1,43 +1,41 @@
|
|
|
1
|
-
import { ILeaferCanvas } from '@leafer/interface'
|
|
1
|
+
import { ILeaferCanvas, IRenderOptions } from '@leafer/interface'
|
|
2
2
|
import { LeafHelper, isObject } from "@leafer/core"
|
|
3
3
|
|
|
4
4
|
import { IUI, ITextRowData, ILeafPaint, IStrokeAlign, ILeafStrokePaint } from '@leafer-ui/interface'
|
|
5
|
-
import { PaintImage } from "@leafer-ui/draw"
|
|
5
|
+
import { PaintImage, Paint } from "@leafer-ui/draw"
|
|
6
6
|
|
|
7
|
-
import { fillText } from './FillText'
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
export function strokeText(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas): void {
|
|
8
|
+
export function strokeText(stroke: string | ILeafPaint[], ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
|
|
11
9
|
switch (ui.__.strokeAlign) {
|
|
12
10
|
case 'center':
|
|
13
|
-
drawCenter(stroke, 1, ui, canvas)
|
|
11
|
+
drawCenter(stroke, 1, ui, canvas, renderOptions)
|
|
14
12
|
break
|
|
15
13
|
case 'inside':
|
|
16
|
-
drawAlign(stroke, 'inside', ui, canvas)
|
|
14
|
+
drawAlign(stroke, 'inside', ui, canvas, renderOptions)
|
|
17
15
|
break
|
|
18
16
|
case 'outside':
|
|
19
|
-
ui.__.__fillAfterStroke ? drawCenter(stroke, 2, ui, canvas) : drawAlign(stroke, 'outside', ui, canvas)
|
|
17
|
+
ui.__.__fillAfterStroke ? drawCenter(stroke, 2, ui, canvas, renderOptions) : drawAlign(stroke, 'outside', ui, canvas, renderOptions)
|
|
20
18
|
break
|
|
21
19
|
}
|
|
22
20
|
}
|
|
23
21
|
|
|
24
|
-
function drawCenter(stroke: string | ILeafPaint[], strokeWidthScale: number, ui: IUI, canvas: ILeaferCanvas): void {
|
|
22
|
+
function drawCenter(stroke: string | ILeafPaint[], strokeWidthScale: number, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
|
|
25
23
|
const data = ui.__
|
|
26
24
|
if (isObject(stroke)) {
|
|
27
|
-
drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas)
|
|
25
|
+
Paint.drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas, renderOptions)
|
|
28
26
|
} else {
|
|
29
27
|
canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data)
|
|
30
|
-
drawTextStroke(ui, canvas)
|
|
28
|
+
Paint.drawTextStroke(ui, canvas, renderOptions)
|
|
31
29
|
}
|
|
32
30
|
}
|
|
33
31
|
|
|
34
|
-
function drawAlign(stroke: string | ILeafPaint[], align: IStrokeAlign, ui: IUI, canvas: ILeaferCanvas): void {
|
|
32
|
+
function drawAlign(stroke: string | ILeafPaint[], align: IStrokeAlign, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
|
|
35
33
|
const out = canvas.getSameCanvas(true, true)
|
|
36
34
|
out.font = ui.__.__font
|
|
37
|
-
drawCenter(stroke, 2, ui, out)
|
|
35
|
+
drawCenter(stroke, 2, ui, out, renderOptions)
|
|
38
36
|
|
|
39
37
|
out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in'
|
|
40
|
-
fillText(ui, out)
|
|
38
|
+
Paint.fillText(ui, out, renderOptions)
|
|
41
39
|
out.blendMode = 'normal'
|
|
42
40
|
|
|
43
41
|
LeafHelper.copyCanvasByWorld(ui, canvas, out)
|
|
@@ -46,7 +44,7 @@ function drawAlign(stroke: string | ILeafPaint[], align: IStrokeAlign, ui: IUI,
|
|
|
46
44
|
}
|
|
47
45
|
|
|
48
46
|
|
|
49
|
-
export function drawTextStroke(ui: IUI, canvas: ILeaferCanvas): void {
|
|
47
|
+
export function drawTextStroke(ui: IUI, canvas: ILeaferCanvas, _renderOptions: IRenderOptions): void {
|
|
50
48
|
|
|
51
49
|
let row: ITextRowData, data = ui.__.__textDrawData
|
|
52
50
|
const { rows, decorationY } = data
|
|
@@ -65,7 +63,7 @@ export function drawTextStroke(ui: IUI, canvas: ILeaferCanvas): void {
|
|
|
65
63
|
|
|
66
64
|
}
|
|
67
65
|
|
|
68
|
-
export function drawStrokesStyle(strokes: ILeafStrokePaint[], strokeWidthScale: number, isText: boolean, ui: IUI, canvas: ILeaferCanvas): void {
|
|
66
|
+
export function drawStrokesStyle(strokes: ILeafStrokePaint[], strokeWidthScale: number, isText: boolean, ui: IUI, canvas: ILeaferCanvas, renderOptions: IRenderOptions): void {
|
|
69
67
|
let item: ILeafStrokePaint
|
|
70
68
|
const data = ui.__, { __hasMultiStrokeStyle } = data
|
|
71
69
|
__hasMultiStrokeStyle || canvas.setStroke(undefined, data.__strokeWidth * strokeWidthScale, data)
|
|
@@ -73,7 +71,7 @@ export function drawStrokesStyle(strokes: ILeafStrokePaint[], strokeWidthScale:
|
|
|
73
71
|
for (let i = 0, len = strokes.length; i < len; i++) {
|
|
74
72
|
item = strokes[i]
|
|
75
73
|
|
|
76
|
-
if (item.image && PaintImage.checkImage(ui, canvas,
|
|
74
|
+
if (item.image && PaintImage.checkImage(item, false, ui, canvas, renderOptions)) continue
|
|
77
75
|
|
|
78
76
|
if (item.style) {
|
|
79
77
|
if (__hasMultiStrokeStyle) {
|
|
@@ -83,10 +81,10 @@ export function drawStrokesStyle(strokes: ILeafStrokePaint[], strokeWidthScale:
|
|
|
83
81
|
|
|
84
82
|
if (item.blendMode) {
|
|
85
83
|
canvas.saveBlendMode(item.blendMode)
|
|
86
|
-
isText ? drawTextStroke(ui, canvas) : canvas.stroke()
|
|
84
|
+
isText ? Paint.drawTextStroke(ui, canvas, renderOptions) : canvas.stroke()
|
|
87
85
|
canvas.restoreBlendMode()
|
|
88
86
|
} else {
|
|
89
|
-
isText ? drawTextStroke(ui, canvas) : canvas.stroke()
|
|
87
|
+
isText ? Paint.drawTextStroke(ui, canvas, renderOptions) : canvas.stroke()
|
|
90
88
|
}
|
|
91
89
|
}
|
|
92
90
|
}
|
package/src/index.ts
CHANGED
|
@@ -3,20 +3,24 @@ import { IPaintModule } from '@leafer-ui/interface'
|
|
|
3
3
|
import { fill, fills, fillPathOrText } from './Fill'
|
|
4
4
|
import { fillText } from './FillText'
|
|
5
5
|
import { stroke, strokes } from './Stroke'
|
|
6
|
-
import { strokeText, drawTextStroke } from './StrokeText'
|
|
6
|
+
import { strokeText, drawTextStroke, drawStrokesStyle } from './StrokeText'
|
|
7
7
|
import { shape } from './Shape'
|
|
8
8
|
import { compute } from './Compute'
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
export const PaintModule: IPaintModule = {
|
|
12
12
|
compute,
|
|
13
|
+
|
|
13
14
|
fill,
|
|
14
15
|
fills,
|
|
15
16
|
fillPathOrText,
|
|
16
17
|
fillText,
|
|
18
|
+
|
|
17
19
|
stroke,
|
|
18
20
|
strokes,
|
|
19
21
|
strokeText,
|
|
20
22
|
drawTextStroke,
|
|
23
|
+
drawStrokesStyle,
|
|
24
|
+
|
|
21
25
|
shape
|
|
22
26
|
}
|