/
RadialGradientElement.ts
74 lines (61 loc) · 2.14 KB
/
RadialGradientElement.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import { RenderingContext2D } from '../types'
import { Document } from './Document'
import { PathElement } from './PathElement'
import { GradientElement } from './GradientElement'
export class RadialGradientElement extends GradientElement {
override type = 'radialGradient'
constructor(
document: Document,
node: HTMLElement,
captureTextNodes?: boolean
) {
super(document, node, captureTextNodes)
this.attributesToInherit.push(
'cx',
'cy',
'r',
'fx',
'fy',
'fr'
)
}
getGradient(ctx: RenderingContext2D, element: PathElement) {
const isBoundingBoxUnits = this.getGradientUnits() === 'objectBoundingBox'
const boundingBox = element.getBoundingBox(ctx)
if (isBoundingBoxUnits && !boundingBox) {
return null
}
if (!this.getAttribute('cx').hasValue()) {
this.getAttribute('cx', true).setValue('50%')
}
if (!this.getAttribute('cy').hasValue()) {
this.getAttribute('cy', true).setValue('50%')
}
if (!this.getAttribute('r').hasValue()) {
this.getAttribute('r', true).setValue('50%')
}
const cx = isBoundingBoxUnits
? boundingBox.x + boundingBox.width * this.getAttribute('cx').getNumber()
: this.getAttribute('cx').getPixels('x')
const cy = isBoundingBoxUnits
? boundingBox.y + boundingBox.height * this.getAttribute('cy').getNumber()
: this.getAttribute('cy').getPixels('y')
let fx = cx
let fy = cy
if (this.getAttribute('fx').hasValue()) {
fx = isBoundingBoxUnits
? boundingBox.x + boundingBox.width * this.getAttribute('fx').getNumber()
: this.getAttribute('fx').getPixels('x')
}
if (this.getAttribute('fy').hasValue()) {
fy = isBoundingBoxUnits
? boundingBox.y + boundingBox.height * this.getAttribute('fy').getNumber()
: this.getAttribute('fy').getPixels('y')
}
const r = isBoundingBoxUnits
? (boundingBox.width + boundingBox.height) / 2.0 * this.getAttribute('r').getNumber()
: this.getAttribute('r').getPixels()
const fr = this.getAttribute('fr').getPixels()
return ctx.createRadialGradient(fx, fy, fr, cx, cy, r)
}
}