Skip to main content

Image Node (INodeImage)

Image Node (INodeImage)​

INodeImage extends INodeRect and adds image-specific content API:

  • image source URL (src)
  • accessibility alt text (alt)
  • fit mode inside node bounds (ImageFit)
export interface INodeImage extends INodeRect {
  getSrc(): string;
  setSrc(value: string): void;

  getAlt(): string;
  setAlt(value: string): void;

  getFit(): ImageFit;
  setFit(value: ImageFit): void;
}

Live Preview​

Create Image Node in Code​

import {
  NodeImage,
  ImageFit,
  StrokeAlign,
} from '@flowscape-ui/core-sdk';

const imageNode = new NodeImage(1);
imageNode.setName('HeroImage');
imageNode.setPosition(0, 40);
imageNode.setSize(320, 220);
imageNode.setSrc('/img/cover-image.png');
imageNode.setAlt('Product hero preview');
imageNode.setFit(ImageFit.Cover);
imageNode.setStrokeFill('#38bdf8');
imageNode.setStrokeWidth({ t: 6, r: 6, b: 6, l: 6 });
imageNode.setStrokeAlign(StrokeAlign.Inside);

layerWorld.addNode(imageNode);
scene.invalidate();

ImageFit Modes​

ValueBehavior
ImageFit.FillStretch image to node size (aspect ratio may distort).
ImageFit.ContainKeep aspect ratio, fit fully inside bounds.
ImageFit.CoverKeep aspect ratio, cover bounds (may crop).
ImageFit.NoneDraw using native image sizing rules in node space.

Image API​

MethodDescription
getSrc() / setSrc(value)Read/write image source URL.
getAlt() / setAlt(value)Read/write alternative text.
getFit() / setFit(value)Read/write fit mode in node bounds.

Inheritance​

INode
  -> IShapeBase
      -> INodeRect
          -> INodeImage

INodeImage inherits full rect/shape/base behavior: fill, stroke, transform, hierarchy, bounds, hit testing, serialization.

Next​