ImageFill.md

ImageFill

Kind: class

ImageFill represents a bitmap (raster) image that can be used as the fill property of any shape node (but not Artboards). The supported image encodings are: PNG, JPEG, and GIF.

Example

// User picks an image file
const storage = require("uxp").storage;
const fs = storage.localFileSystem;
let imageFile = await fs.getFileForOpening({ types: storage.fileTypes.images });

// Create ImageFill for this image
const ImageFill = require("scenegraph").ImageFill;
let fill = new ImageFill(imageFile);

// Set fill of first selected item
selection.items[0].fill = fill;

• ImageFill
  • new ImageFill(fileOrDataURI)
  • .clone() ⇒ !ImageFill
  • .assetId : string
  • .scaleBehavior : string
  • .naturalWidth : number
  • .naturalHeight : number
  • .mimeType : string
  • .isLinkedContent : boolean

ImageFill()

Param	Type	Description
fileOrDataURI	!uxp.storage.File or string	File object pointing to an image file; or a string containing a data: URI with a base-64 encoded image.

---

imageFill.clone() ⇒ !ImageFill

Returns a new copy of this ImageFill.

Kind: instance method of ImageFill Returns: !ImageFill

---

imageFill.assetId : string

Since: XD 29

A unique identifier for the image asset used by this ImageFill. May be shared by other ImageFills, including those with different cropping, size, rotation, or mirroring. If identical images are imported into XD from separate sources, they may have different assetIds however.

Kind: instance property of ImageFill

---

imageFill.scaleBehavior : string

Default: SCALE_COVER

How the image is scaled when the aspect ratio of the shape does not match the aspect ratio of the image:

• ImageFill.SCALE_COVER - The image's aspect ratio is preserved and it is scaled to completely cover the area of the shape. This means on one axis the image's edges line up exactly with the edges of the shape, and on the other axis the image extends beyond the shape's bounds and is cropped. (Similar to object-fit: cover in CSS).
• ImageFill.SCALE_STRETCH - The image is stretched (distorting its aspect ratio) so its edges line up exactly with the edges of the shape. (Similar to object-fit: fill in CSS).

Image size and scaling are also affected by cropping settings, but these are not yet exposed to plugins.

Kind: instance property of ImageFill

---

imageFill.naturalWidth : number

Pixel dimensions of the underlying bitmap image data.

Kind: instance property of ImageFill Read only: true

---

imageFill.naturalHeight : number

Pixel dimensions of the underlying bitmap image data.

Kind: instance property of ImageFill Read only: true

---

imageFill.mimeType : string

Format the image data was originally encoded in, such as image/gif or image/jpeg.

Kind: instance property of ImageFill Read only: true

---

imageFill.isLinkedContent : boolean

True if the image comes from a link to an external resource, such as Creative Cloud Libraries.

Kind: instance property of ImageFill Read only: true