An image field will hold a graphical element. The source can be a media item which is uploaded by the user or a clipart item which is part of the product setup. Depending on that, the behaviour will change.

  • Clipart items will be immutable and cannot be used as a drop target
  • Clipart items will by default be shown 100% without cropping
  • Media items will by default show with cropping (configurable)
  • Media items can be used as drop targets (configurable)
  • Media items can optionally also hold clipart items (configurable)

Hierarchy

Properties

area: {
    flipX: boolean;
    flipY: boolean;
    h: number;
    hidden: boolean;
    page: number;
    rotation: number;
    subPage: number;
    w: number;
    x: number;
    y: number;
    zIndex: number;
}

The area of the field on the canvas as defined by the parameter. If the actual position is required, have a look at FieldBoundingBox and GetBoundingBox.

Type declaration

  • flipX: boolean

    Flag to control if the field is visible or hidden. Flipped fields will be mirrored horizontally.

  • flipY: boolean

    Flag to control if the field is vertically flipped or not. Flipped fields will be mirrored vertically.

  • h: number

    The height of the field on the canvas. Value in points.

  • hidden: boolean

    Flag to control if the field is visible or hidden. Hidden fields will not show in the UI and not on the output.

  • Readonly page: number

    The index of the page this field is on. The index is zero based.

  • rotation: number

    The rotation of the field on the canvas. Value in degrees. The rotation center is the top left coordinate.

  • Readonly subPage: number

    For spread setups only this is the index of the sub page. The index is zero based.

    • 0: left page
    • 1: right page
  • w: number

    The width of the field on the canvas. Value in points.

  • x: number

    The x coordinate of the field on the canvas. Value in points.

  • y: number

    The y coordinate of the field on the canvas. Value in points.

  • Readonly zIndex: number

    The z-index of the field on the page. The z-index defines the order of the fields on the page. The higher the z-index, the more on top the field is.

border: FieldBorder

The border object defines the field border settings - which includes not only the border itself but also the background fill of the field. This is available for all field types except path fields.

id: string

The id of the field (GUID) as a unique identifier.

image: {
    data: MediaItem;
    effects: {
        brightness: boolean;
        brightnessValue: number;
        contrast: boolean;
        contrastValue: number;
        effect: ImageEffect;
        gamma: boolean;
        gammaValue: number;
        invert: boolean;
        opacity: number;
        pixelate: boolean;
        pixelateValue: number;
        sharpness: ImageSharpnessOption;
        tint: boolean;
        tintColor: string;
        tintValue: number;
    };
    isClipArt: boolean;
    mask: MaskItem;
    totalRotationAngle: number;
    transform: {
        alignment: ImageAlignmentMode;
        angle: number;
        blendMode: ImageBlendMode;
        flippedH: boolean;
        flippedV: boolean;
        isAutoScaling: boolean;
        isAutoTranslatingX: boolean;
        isAutoTranslatingY: boolean;
        scale: number;
        translateX: number;
        translateY: number;
    };
}

The image data object holds information for all image specific settings

Type declaration

  • data: MediaItem

    The media item set for the field. This can be null if no media item is set.

  • Readonly effects: {
        brightness: boolean;
        brightnessValue: number;
        contrast: boolean;
        contrastValue: number;
        effect: ImageEffect;
        gamma: boolean;
        gammaValue: number;
        invert: boolean;
        opacity: number;
        pixelate: boolean;
        pixelateValue: number;
        sharpness: ImageSharpnessOption;
        tint: boolean;
        tintColor: string;
        tintValue: number;
    }

    The effect options applied to the image.

    • brightness: boolean

      Flag to control if the brightness should be adjusted.

    • brightnessValue: number

      The brightness value to use for adjustment.

    • contrast: boolean

      Flag to control if the contrast should be adjusted.

    • contrastValue: number

      The contrast value to use for adjustment.

    • effect: ImageEffect

      The effect to apply to the image.

    • gamma: boolean

      Flag to control if the gamma should be adjusted.

    • gammaValue: number

      The gamma value to use for adjustment.

    • invert: boolean

      Flag to control if the image color values should be inverted.

    • opacity: number

      The opacity of the image.

    • pixelate: boolean

      Flag to control if the image should be pixelated.

    • pixelateValue: number

      The pixelation value to use (controlling the size of the pixelation).

    • sharpness: ImageSharpnessOption

      The sharpness adjustment to apply to the image.

    • tint: boolean

      Flag to control if the image should be tinted by a color.

    • tintColor: string

      The color to use for tinting. This can be any RGB value.

    • tintValue: number

      The tint value to use (controlling the amount of tinting).

  • Readonly isClipArt: boolean

    Flag to control if this image field acts as a clipart or as a media item.

  • mask: MaskItem

    The optional mask item to use for this image.

  • totalRotationAngle: number

    The image field can rotate the image in addition to the transformation angle by 90° steps.

  • Readonly transform: {
        alignment: ImageAlignmentMode;
        angle: number;
        blendMode: ImageBlendMode;
        flippedH: boolean;
        flippedV: boolean;
        isAutoScaling: boolean;
        isAutoTranslatingX: boolean;
        isAutoTranslatingY: boolean;
        scale: number;
        translateX: number;
        translateY: number;
    }

    The transformation of the image being displayed within the field. This will define how the pixel data of the image are transformed to the field outline.

    • alignment: ImageAlignmentMode

      The alignment mode used for the image when it is auto-positioned.

    • angle: number

      The rotation angle of the image in degrees.

    • blendMode: ImageBlendMode

      The image blend mode to use

    • flippedH: boolean

      Flag to control if the image is flipped horizontally.

    • flippedV: boolean

      Flag to control if the image is flipped vertically.

    • isAutoScaling: boolean

      Flag to control if the image is scaled automatically to fit the field. This is used when the field gets resized it will adjust the scale factor automatically.

    • isAutoTranslatingX: boolean

      Flag to control if the image is translated horizontally automatically. This is used when the field gets resized.

    • isAutoTranslatingY: boolean

      Flag to control if the image is translated vertically automatically. This is used when the field gets resized.

    • scale: number

      The scale of the image

    • translateX: number

      The horizontal shift of the image.

    • translateY: number

      The vertical shift of the image.

info: {
    customData: string;
    name: string;
    sequence: number;
    tags: string[];
}

The info or meta data details of the field.

Type declaration

  • customData: string

    The custom data is an arbitrary object which can be used to store additional information against the field. This is for scripting usage only. Note that there is only a single custom data object per field. So multiple scripts would have to consider a merge or overwrite strategy.

  • name: string

    The name of the field. By default empty, this can be used to provide semantic information to the field and will be used for logging, errors and debugging, but can also be helpful for field retrieval. The name of a field doesn't have to be unique and duplicates can happen.

  • sequence: number

    The sequence is used for auto mapping values when applying layouts. In order to determine which field of the new layout should be populated with the value of which field in the old layout the sequence is used. This is independent of creation order or z-index and allows to semantically control this. When generating fields the sequence is automatically set as an incrementing number.

  • tags: string[]

    The list of tags. Tags can be also used to retrieve fields and store additional meta data against the field. Note that a tag cannot contain the '|' character.

The issues for this image field.

The restrictions set for this image field.

shadow: FieldShadow

The shadow object defines the field shadow settings. This is available for all field types except path fields.

The type of the field. This is always 'ImageField'.

The UI options for this image field.

Methods

  • This function will reposition, scale and rotate the current field so that two points of the current image match two points of the target image.

    Parameters

    • target: ImageField

      The target image field to align to

    • targetPoints: Point[]

      The target points to align too. Must have exactly two points.

    • sourcePoints: Point[]

      The source points to use for alignment. Must have exactly two points.

    Returns boolean

    True if the alignment was successful, false otherwise.

  • Repositions the current field so that the defined pixel location of the target matches the pixel location of the source.

    Parameters

    • target: ImageField

      The target image field to align to

    • targetPoint: Point

      The pixel location on the target image field to align to.

    • sourcePoint: Point

      The pixel location of the source image to use for alignment.

    Returns boolean

    True if the alignment was successful, false otherwise.

  • Convert a pixel value to a relative field position. This can then be further used for ConvertRelativeFieldPositionToGlobalLocation to understand where in the canvas a certain pixel would sit. Note: this does not work if image angle is used or if the image is flipped.

    This can be used to position elements at pixels within the image field.

    Parameters

    • point: Point

      The pixel position to convert.

    Returns Point

    The relative position of the pxel within the field.

  • Converts a relative field position (a position within the field from the top/left corner of the field without the rotation applied) to a global location on the canvas.

    Parameters

    • point: Point

      The point as the relative position.

    Returns Point

    The converted point as the global location.

  • Little helper to calculate the field bounding box - this includes also information about the location of all 4 corner points of the field on teh canvas.

    Returns FieldBoundingBox

    The bounding box of the field. This is the area the field occupies on the canvas.

  • Rearranges the field on the canvas by adjusting the z-index in relation to the other fields. Updates the field properties.

    Parameters

    Returns void

  • Refreshes the field with the latest parameters as used within the editor. As the script instance is decoupled, changes to the field object are not automatically reflected in the script instance. Use the refresh method to ensure the field object is up to date.

    Returns void

  • Save the changes of the script object back into the editor. This will update the field with the latest changes, but not every change will be reflected directly in the UI. Some changes would require reinitialization.

    Note that not all properties can be saved with this function:

    • page: currently cannot be changed, but fields can be copied to a new location and then the original can be deleted
    • z-index: use the rearrange function to change the z-index

    Returns void

  • Saves the changes of the script back into the editor, while allowing to control certain actions via a save options object. For further information of what can be saved Save

    Parameters

    • options: boolean | SaveOptions

      The save options to use for this operation. If the parameter is a boolean, the value is used for the 'addUndo' flag of SaveOptions.

    Returns void

Generated using TypeDoc