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.
Object containing any amount of ImageFill properties.
Returns a new instance of this Record type with all values set to their default values.
Returns a new instance of this Record type with the value for the specific key set to its default value.
Returns the value associated with the provided key, which may be the default value defined when creating the Record factory function.
If the requested key is not defined by this Record type, then notSetValue will be returned if provided. Note that this scenario would produce an error when using Flow or TypeScript.
Get automatically computed highlight style.
FillStyle object
Get fit mode of ImageFill.
Fit mode
Get image of ImageFill.
ImageTexture object
Get source missing color of ImageFill.
Color object
Get color of ImageFill.
Color 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)
TextureSource object
New ImageFill 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) )
Either a Color object or a function, which will be used to create a new Color based on current value.
New ImageFill object
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) )
Either a Color object or a function, which will be used to create a new Color based on current value.
New ImageFill object
Deeply converts this Record to equivalent native JavaScript Object.
Note: This method may not be overridden. Objects with custom serialization to plain JS may override toJSON() instead.
Shallowly converts this Record to equivalent native JavaScript Object.
Shallowly converts this Record to equivalent JavaScript Object.
Note: Not all methods can be used on a mutable collection or within
withMutations
! Only set
may be used mutatively.
Unlike other types in Immutable.js, the Record()
function creates a new
Record Factory, which is a function that creates Record instances.
See above for examples of using Record()
.
Note: Record
is a factory function and not a class, and does not use the
new
keyword during construction.
Records allow passing a second parameter to supply a descriptive name that appears when converting a Record to a string or in any error messages. A descriptive name for any record can be accessed by using this method. If one was not provided, the string "Record" is returned.
const { Record } = require('immutable')
const Person = Record({
name: null
}, 'Person')
var me = Person({ name: 'My Name' })
me.toString() // "Person { "name": "My Name" }"
Record.getDescriptiveName(me) // "Person"
True if maybeRecord
is an instance of a Record.
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:
setFillStyle
methods:Example 1: Styling a rectangle figure with an image.
const myImage = new Image() myImage.src = 'https://example.com/myImage.png' rectangleFigure.setFillStyle(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 })
Related information:
For more fill styles, see: