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
image: './resources/my-image.png'
})
)Type Details
- yfiles module
- styles-other
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.styles.ImageNodeStyle
See Also
Constructors
Creates a new instance that uses the specified image URL, fallback image URL and the given renderer instance.
Remarks
image is used as the href attribute of the <image> element. If the image cannot be loaded, the fallbackImage is used instead. Both should either be a valid absolute URL, or an URL that is relative to the webpage that contains the GraphComponent, or null.Parameters
A map of options to pass to the method.
- image - string
- The image URL.
- fallbackImage - string
- The fallback image URL.
- renderer - ImageNodeStyleRenderer
- The renderer used by this instance
- 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.
- 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({
image: imageUrl,
// always keep the intrinsic aspect ratio independent of the node's size
aspectRatio: imageAspectRatio
})See Also
Gets or sets the fallback image that is used by the style instance if the image is null.
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 fallbackImage property of the style is used as the href attribute of the image if the image fails to load. It should either be a valid absolute URL, or an URL that is relative to the webpage that contains the GraphComponent, or null.
Gets or sets the image 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 image property of the style is used as 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 image fails to load, the fallbackImage is used instead.
See Also
Gets or sets the normalized outline of the image that will be displayed.
Remarks
This shape will be used to satisfy requests to isInBox and isHit and may be left null to indicate default (rectangular) behavior.
The default value is null.
Examples
const outlinePath = new GeneralPath()
outlinePath.appendEllipse(new Rect(0, 0, 1, 1), true)
const style = new ImageNodeStyle({
image: 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 URL.
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({
image: imageUrl,
// always keep the intrinsic aspect ratio independent of the node's size
aspectRatio: imageAspectRatio
})