Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ImageFill<TProps>

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 of ImageBitmap | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement.

ImageFill Usage:

Use ImageFill with:

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:

Index

Constructors

constructor

  • 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.

    Parameters

    Returns ImageFill

Properties

Readonly type

type : "fillstyle"

Methods

[Symbol.iterator]

  • [Symbol.iterator](): IterableIterator<[keyof TProps, TProps[keyof TProps]]>
  • Returns IterableIterator<[keyof TProps, TProps[keyof TProps]]>

asImmutable

  • asImmutable(): this
  • see

    Map#asImmutable

    Returns this

asMutable

  • asMutable(): this
  • see

    Map#asMutable

    Returns this

clear

  • clear(): this
  • Returns a new instance of this Record type with all values set to their default values.

    Returns this

delete

  • delete(key: K): this
  • Returns a new instance of this Record type with the value for the specific key set to its default value.

    alias

    remove

    Type parameters

    • K: keyof TProps

    Parameters

    • key: K

    Returns this

deleteIn

  • deleteIn(keyPath: Iterable<any>): this
  • alias

    removeIn

    Parameters

    • keyPath: Iterable<any>

    Returns this

equals

  • equals(other: any): boolean
  • Parameters

    • other: any

    Returns boolean

get

  • get(key: K, notSetValue?: any): TProps[K]
  • get(key: string, notSetValue: T): T
  • 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.

    Type parameters

    • K: keyof TProps

    Parameters

    • key: K
    • notSetValue: any

    Returns TProps[K]

  • Type parameters

    • T

    Parameters

    • key: string
    • notSetValue: T

    Returns T

getDefaultHighlightStyle

  • getDefaultHighlightStyle(): this

getFitMode

getIn

  • getIn(keyPath: Iterable<any>): any
  • Parameters

    • keyPath: Iterable<any>

    Returns any

getSource

getSourceMissingColor

  • getSourceMissingColor(): Color
  • Get source missing color of ImageFill.

    Returns Color

    Color object

getSurroundingColor

  • getSurroundingColor(): Color
  • Get color of ImageFill.

    Returns Color

    Color object

has

  • has(key: string): key
  • Parameters

    • key: string

    Returns key

hasIn

  • hasIn(keyPath: Iterable<any>): boolean
  • Parameters

    • keyPath: Iterable<any>

    Returns boolean

hashCode

  • hashCode(): number
  • Returns number

merge

  • merge(...collections: Array<Partial<TProps> | Iterable<[string, any]>>): this
  • Parameters

    • ...collections: Array<Partial<TProps> | Iterable<[string, any]>>

    Returns this

mergeDeep

  • mergeDeep(...collections: Array<Partial<TProps> | Iterable<[string, any]>>): this
  • Parameters

    • ...collections: Array<Partial<TProps> | Iterable<[string, any]>>

    Returns this

mergeDeepIn

  • mergeDeepIn(keyPath: Iterable<any>, ...collections: Array<any>): this
  • Parameters

    • keyPath: Iterable<any>
    • ...collections: Array<any>

    Returns this

mergeDeepWith

  • mergeDeepWith(merger: function, ...collections: Array<Partial<TProps> | Iterable<[string, any]>>): this
  • Parameters

    • merger: function
        • Parameters

          • oldVal: any
          • newVal: any
          • key: any

          Returns any

    • ...collections: Array<Partial<TProps> | Iterable<[string, any]>>

    Returns this

mergeIn

  • mergeIn(keyPath: Iterable<any>, ...collections: Array<any>): this
  • Parameters

    • keyPath: Iterable<any>
    • ...collections: Array<any>

    Returns this

mergeWith

  • mergeWith(merger: function, ...collections: Array<Partial<TProps> | Iterable<[string, any]>>): this
  • Parameters

    • merger: function
        • Parameters

          • oldVal: any
          • newVal: any
          • key: keyof TProps

          Returns any

    • ...collections: Array<Partial<TProps> | Iterable<[string, any]>>

    Returns this

remove

  • remove(key: K): this
  • Type parameters

    • K: keyof TProps

    Parameters

    • key: K

    Returns this

removeIn

  • removeIn(keyPath: Iterable<any>): this
  • Parameters

    • keyPath: Iterable<any>

    Returns this

set

  • set(key: K, value: TProps[K]): this
  • Type parameters

    • K: keyof TProps

    Parameters

    • key: K
    • value: TProps[K]

    Returns this

setFitMode

  • Set new image fit mode.

    Parameters

    Returns this

setIn

  • setIn(keyPath: Iterable<any>, value: any): this
  • Parameters

    • keyPath: Iterable<any>
    • value: any

    Returns this

setSource

  • 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)
    

    Parameters

    Returns this

    New ImageFill object

setSourceMissingColor

  • 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) )
    

    Parameters

    • value: Color | ImmutableMutator<Color>

      Either a Color object or a function, which will be used to create a new Color based on current value.

    Returns this

    New ImageFill object

setSurroundingColor

  • 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) )
    

    Parameters

    • value: Color | ImmutableMutator<Color>

      Either a Color object or a function, which will be used to create a new Color based on current value.

    Returns this

    New ImageFill object

toJS

  • toJS(): 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.

    Returns object

toJSON

  • toJSON(): TProps
  • Shallowly converts this Record to equivalent native JavaScript Object.

    Returns TProps

toObject

  • toObject(): TProps
  • Shallowly converts this Record to equivalent JavaScript Object.

    Returns TProps

toSeq

  • toSeq(): Keyed<keyof TProps, TProps[keyof TProps]>
  • Returns Keyed<keyof TProps, TProps[keyof TProps]>

update

  • update(key: K, updater: function): this
  • Type parameters

    • K: keyof TProps

    Parameters

    • key: K
    • updater: function
        • Parameters

          • value: TProps[K]

          Returns TProps[K]

    Returns this

updateIn

  • updateIn(keyPath: Iterable<any>, updater: function): this
  • Parameters

    • keyPath: Iterable<any>
    • updater: function
        • Parameters

          • value: any

          Returns any

    Returns this

wasAltered

  • wasAltered(): boolean
  • see

    Map#wasAltered

    Returns boolean

withMutations

  • withMutations(mutator: function): this
  • Note: Not all methods can be used on a mutable collection or within withMutations! Only set may be used mutatively.

    see

    Map#withMutations

    Parameters

    • mutator: function
        • Parameters

          • mutable: this

          Returns any

    Returns this

Static Factory

  • Factory(values?: Partial<TProps> | Iterable<[string, any]>): Record<TProps> & Readonly<TProps>
  • Type parameters

    • TProps: Object

    Parameters

    • values: Partial<TProps> | Iterable<[string, any]>

    Returns Record<TProps> & Readonly<TProps>

Static Record

  • Record(defaultValues: TProps, name?: undefined | string): Factory<TProps>
  • 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.

    Type parameters

    • TProps

    Parameters

    • defaultValues: TProps
    • name: undefined | string

    Returns Factory<TProps>

Static getDescriptiveName

  • getDescriptiveName(record: Record<any>): string
  • 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"
    

    Parameters

    Returns string

Static isRecord

  • isRecord(maybeRecord: any): maybeRecord
  • True if maybeRecord is an instance of a Record.

    Parameters

    • maybeRecord: any

    Returns maybeRecord