A node style that can use an image for the visual representation of a node.
Remarks
Examples
const node = graph.createNode(
[0, 0, 50, 50],
new ImageNodeStyle({
// path to the image or data URI which should be referenced in the SVGImageElement
href: './resources/my-image.png',
}),
)Type Details
- yFiles module
- view
See Also
Constructors
Creates a new instance that uses the specified image.
Parameters
A map of options to pass to the method.
- href - string
- The image to use.
- normalizedOutline - GeneralPath
- The normalized outline of the image that will be displayed. This option sets the normalizedOutline property on the created object.
- aspectRatio - number
- The aspect ratio for scaling the image to a node's size. This option sets the aspectRatio property on the created object.
- backgroundStroke - Stroke
- The Stroke of the image backgroundShape for this style. This option sets the backgroundStroke property on the created object.
- backgroundFill - Fill
- The Fill of the image backgroundShape for this style. This option sets the backgroundFill property on the created object.
- backgroundShape - ShapeNodeShape
- The background shape for this style. This option sets the backgroundShape property on the created object.
- cssClass - string
- A CSS class that will be applied to the visualization. This option sets the cssClass property on the created object.
Properties
Gets or sets the aspect ratio for scaling the image to a node's size.
Remarks
If this value is positive and finite, the image will be scaled to the largest rectangle that a) has a width-to-height ratio that matches this value and b) fits into the node's size. Otherwise, the image is scaled to the node's size (and aspect ratio) without further restrictions.
The default value is 0. I.e. image is scaled to the node's size (and aspect ratio).
Examples
// the image for the style
const imageUrl = './resources/printer.svg'
// determine the intrinsic aspect ratio of the image
const imageAspectRatio = await ImageNodeStyle.getAspectRatio(imageUrl)
const style = new ImageNodeStyle({
href: imageUrl,
// always keep the intrinsic aspect ratio independent of the node's size
aspectRatio: imageAspectRatio,
})See Also
Gets or sets the Fill of the image backgroundShape for this style.
Remarks
The default value is null.
The background shape is only rendered, if at least one of backgroundStroke or backgroundFill have been set to non-null values.
Gets or sets the background shape for this style.
Remarks
The default value is RECTANGLE.
The background shape is only rendered, if at least one of backgroundStroke or backgroundFill have been set to non-null values.
When the background backgroundShape is rendered, it takes precedence over the normalizedOutline as the outline geometry.
Gets or sets the Stroke of the image backgroundShape for this style.
Remarks
The default value is null.
The background shape is only rendered, if at least one of backgroundStroke or backgroundFill have been set to non-null values.
Gets or sets the image URL that is used by the style instance.
Remarks
The default value is null.
ImageNodeStyle uses the SVG <image> element to render images and therefore supports all image types that are supported by the user's browser. The href property of the style is the href attribute of the image. It should either be a valid absolute URL, or an URL that is relative to the webpage that contains the GraphComponent, or null.
If the href fails to load, a black rectangle will be rendered instead.
See Also
Gets or sets the normalized outline of the image that will be displayed.
Remarks
This shape will be used to refine hit testing behavior and edge cropping. For example, it is used to satisfy requests to isInBox and isHit. It may be left null in which case the node's layout rectangle is taken as the outline.
The default value is null.
When the background backgroundShape is rendered, it takes precedence over the normalizedOutline as the outline geometry.
Examples
const outlinePath = new GeneralPath()
outlinePath.appendEllipse(new Rect(0, 0, 1, 1), true)
const style = new ImageNodeStyle({
href: imageUrl,
normalizedOutline: outlinePath,
})See Also
Gets the renderer implementation that can be queried for implementations that provide details about the visual appearance and visual behavior for a given node and this style instance.
Remarks
const creator = style.renderer.getVisualCreator(node, style)
const visual = creator.createVisual(context)See Also
Implements
Methods
Static Methods
Convenience method to determine the aspect ratio of the given image href.
Parameters
A map of options to pass to the method.
- image - string
- The image URL
Returns
- ↪Promise<number>
- The aspect ratio of the image
Examples
// the image for the style
const imageUrl = './resources/printer.svg'
// determine the intrinsic aspect ratio of the image
const imageAspectRatio = await ImageNodeStyle.getAspectRatio(imageUrl)
const style = new ImageNodeStyle({
href: imageUrl,
// always keep the intrinsic aspect ratio independent of the node's size
aspectRatio: imageAspectRatio,
})