generators.md

Generators

• Setting the size of generated image

---

• Color
• TextImage

---

• LinearGradient
• RadialGradient
• SweepGradient
• EllipticalGradient
• RectangularGradient
• QuadGradient

---

• CircleShape
• OvalShape
• PathShape
• RegularPolygonShape

---

Setting the size of generated image

Three options available:

• setting the size via style prop

  <LinearGradient style={{ width: 320, height: 320 }} />

• setting the size directly for placeholder image

  <LinearGradient
    image={
      <ImageBackgroundPlaceholder style={{ width: 320, height: 320 }} />
    }
  />

• when used inside blend or composition, size can be specified by resizeCanvasTo prop

  <PlusBlend
    resizeCanvasTo={'dstImage'}
    dstImage={<Image source={require('./parrot.png')} />}
    srcImage={<LinearGradient />}
  />

---

Color

prop	type	default	desc
image	Filterable	<ImagePlaceholder />	usually ImagePlaceholder or ImageBackgroundPlaceholder
color	string	-

---

TextImage

prop	type	default	desc
image	Filterable	<ImagePlaceholder />	usually ImagePlaceholder or ImageBackgroundPlaceholder
text	string	-	required
fontName	string	-
fontSize	number	16
color	string	'black'

---

LinearGradient

prop	type	default	desc
image	Filterable	<ImagePlaceholder />	usually ImagePlaceholder or ImageBackgroundPlaceholder
colors	string[]	['red', 'blue']	up to 10 colors
stops	number[]	[0, 1]
start	Position	{ x: 0, y: '0h' }
end	Position	{ x: '100w', y: '0h' }
mixStep	MixStep	'CLAMP'

---

RadialGradient

prop	type	default	desc
image	Filterable	<ImagePlaceholder />	usually ImagePlaceholder or ImageBackgroundPlaceholder
colors	string[]	['red', 'blue']	up to 10 colors
stops	number[]	[0, 1]
center	Position	{ x: '50w', y: '50h' }
radius	Distance	'50min'
mixStep	MixStep	'CLAMP'

---

SweepGradient

prop	type	default	desc
image	Filterable	<ImagePlaceholder />	usually ImagePlaceholder or ImageBackgroundPlaceholder
colors	string[]	['red', 'blue']	up to 10 colors
stops	number[]	[0, 1]
center	Position	{ x: '50w', y: '50h' }
mixStep	MixStep	'CLAMP'

---

EllipticalGradient

prop	type	default	desc
image	Filterable	<ImagePlaceholder />	usually ImagePlaceholder or ImageBackgroundPlaceholder
colors	string[]	['red', 'blue']	up to 10 colors
stops	number[]	[0, 1]
center	Position	{ x: '50w', y: '50h' }
radiusX	Distance	'50w'
radiusY	Distance	'50h'
mixStep	MixStep	'CLAMP'

---

RectangularGradient

prop	type	default	desc
image	Filterable	<ImagePlaceholder />	usually ImagePlaceholder or ImageBackgroundPlaceholder
colors	string[]	['red', 'blue']	up to 10 colors
stops	number[]	[0, 1]
center	Position	{ x: '50w', y: '50h' }
halfWidth	Distance	'50w'
halfHeight	Distance	'50h'
mixStep	MixStep	'CLAMP'

---

QuadGradient

prop	type	default	desc
image	Filterable	<ImagePlaceholder />	usually ImagePlaceholder or ImageBackgroundPlaceholder
bottomLeftColor	string	-	required
bottomRightColor	string	-	required
topLeftColor	string	-	required
topRightColor	string	-	required

---

CircleShape

prop	type	default	desc
image	Filterable	<ImagePlaceholder />	usually ImagePlaceholder or ImageBackgroundPlaceholder
radius	Distance	'50min'
color	string	'black'

---

OvalShape

prop	type	default	desc
image	Filterable	<ImagePlaceholder />	usually ImagePlaceholder or ImageBackgroundPlaceholder
radiusX	Distance	'50w'
radiusY	Distance	'25h'
color	string	'black'

---

PathShape

prop	type	default	desc
image	Filterable	<ImagePlaceholder />	usually ImagePlaceholder or ImageBackgroundPlaceholder
path	PathStep[]	-	required
color	string	'black'

---

RegularPolygonShape

prop	type	default	desc
image	Filterable	<ImagePlaceholder />	usually ImagePlaceholder or ImageBackgroundPlaceholder
circumradius	Distance	'50min'
borderRadiuses	Distance[]	[0, 0, 0]	borderRadiuses.length specifies the number of vertices; e.g. Array(6).fill(0) - hexagon with edgy corners, [25, '10min', 50] - triangle with differently smoothed corners
color	string	'black'