Construct a new ImageFill object, specifying any amount of its properties.
Example 1: Creating a new ImageFill object with an image as the source.
const myImage = new Image()
myImage.src = 'https://example.com/myImage.png'
const imageFill = new ImageFill({
source: myImage,
fitMode: ImageFitModes.Stretch
})
Example 2: Creating a new ImageFill object with a video as the source.
const myVideo = document.createElement('video')
myVideo.autoplay = true
myVideo.muted = true
myVideo.loop = true
myVideo.src = 'https://example.com/myVideo.mp4'
myVideo.play()
const imageFill = new ImageFill({
source: myVideo,
fitMode: ImageFitModes.Fit
})
When a HTMLVideoElement is specified as the source the chart will be constantly rendered while the video is playing.
Optional props: Partial<ImageFillStyleProperties>Object containing any amount of ImageFill properties.
Readonly fitImage fitting mode.
Example:
const imageFill = new ImageFill({
fitMode: ImageFitMode.Stretch
})
Readonly sourceThe image source element to use.
Can be any of ImageFillSource.
Most commonly a HTMLImageElement.
Example:
const myImage = new Image()
myImage.src = 'https://example.com/myImage.png'
const imageFill = new ImageFill({
source: myImage
})
Readonly sourceThe color filling element when image is loading or image loading failed.
Readonly surroundingThe color filling the area of element not filled by the image.
Readonly typeGet fit mode of ImageFill.
Fit mode
Get image of ImageFill.
ImageTexture object
Set new image fit mode.
Image fit mode
Construct a new ImageFill object based on this one, but with different image source.
Example:
const myImg = new Image()
myImg.src = 'https://example.com/myImage.png'
imageFill.setSource(myImg)
New ImageFill object
TextureSource object
Construct a new ImageFill object based on this one, but with modified source missing color.
Source missing color is used in place of an image when the image has not been loaded yet or loading of the image has failed.
Example:
// specify new color
imageFill.setSourceMissingColor( ColorHEX('#F00') )
// change individual color properties
imageFill.setSourceMissingColor( color => color.setA(80) )
New ImageFill object
Either a Color object or a function, which will be used to create a new Color based on current value.
Construct a new ImageFill object based on this one, but with modified surrounding color.
Surrounding color is used to fill the remaining element when the image doesn't fill the element completely.
Example:
// specify new color
imageFill.setSurroundingColor( ColorHEX('#F00') )
// change individual color properties
imageFill.setSurroundingColor( color => color.setA(80) )
New ImageFill object
Either a Color object or a function, which will be used to create a new Color based on current value.
Style class for describing a image fill style.
Instances of ImageFill, like all LCJS style classes, are immutable, meaning that its setters don't modify the actual object, but instead return a completely new modified object.
Properties of ImageFill:
surroundingColor: Fill color for the area surrounding the image. Construct a LCJS color using one of the many available factories:sourceMissingColor: Fill color used in place of the image when image is loading or image loading has failed. Construct a LCJS color using one of the many available factories:fitMode: ImageFitMode that specifies how the image is placed inside of the element using the ImageFill.source: Image source object. Can be any ofImageBitmap | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement.ImageFill Usage:
Use ImageFill with:
setFillStylemethods:Example 1: Styling a rectangle figure with an image.
Example 2: Creating a new ImageFill object with a video as the source.
Related information:
For more fill styles, see: