Class pv.Image

Extends pv.Bar.
Represents an image, either a static resource or a dynamically- generated pixel buffer. Images share the same layout and style properties as bars. The external image resource is specified via the #url property. The optional fill, if specified, appears beneath the image, while the optional stroke appears above the image.

Dynamic images such as heatmaps are supported using the #image psuedo-property. This function is passed the x and y index, in addition to the current data stack. The return value is a pv.Color, or null for transparent. A string can also be returned, which will be parsed into a color; however, it is typically much faster to return an object with r, g, b and a attributes, to avoid the cost of parsing and object instantiation.

See pv.Bar for details on positioning properties.
Defined in: Image.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	pv.Image() Constructs a new image with default properties.

Field Summary
Field Attributes	Field Name and Description
	defaults Default properties for images.
	imageHeight The height of the image in pixels.
	imageWidth The width of the image in pixels.
	url The URL of the image to display.

Fields borrowed from class pv.Bar:: fillStyle, height, lineWidth, strokeStyle, width
Fields borrowed from class pv.Mark:: bottom, childIndex, cursor, data, events, index, left, parent, proto, reverse, right, root, scale, title, top, type, visible

Method Summary
Method Attributes	Method Name and Description
	image(f) Specifies the dynamic image function.

Methods borrowed from class pv.Mark:: add, anchor, anchorTarget, def, event, extend, margin, mouse, render

Class Detail

pv.Image()

Constructs a new image with default properties. Images are not typically constructed directly, but by adding to a panel or an existing mark via pv.Mark#add.

Field Detail

{pv.Image} defaults

Default properties for images. By default, there is no stroke or fill style.

{number} imageHeight

The height of the image in pixels. For static images, this property is computed implicitly from the loaded image resources. For dynamic images, this property can be used to specify the height of the pixel buffer; otherwise, the value is derived from the height property.

{number} imageWidth

The width of the image in pixels. For static images, this property is computed implicitly from the loaded image resources. For dynamic images, this property can be used to specify the width of the pixel buffer; otherwise, the value is derived from the width property.

{string} url

The URL of the image to display. The set of supported image types is browser-dependent; PNG and JPEG are recommended.

Method Detail

{pv.Layout.Pack} image(f)

Specifies the dynamic image function. By default, no image function is specified and the url property is used to load a static image resource. If an image function is specified, it will be invoked for each pixel in the image, based on the related imageWidth and imageHeight properties.

For example, given a two-dimensional array heatmap, containing numbers in the range [0, 1] in row-major order, a simple monochrome heatmap image can be specified as:

vis.add(pv.Image)
    .imageWidth(heatmap[0].length)
    .imageHeight(heatmap.length)
    .image(pv.ramp("white", "black").by(function(x, y) heatmap[y][x]));

For fastest performance, use an ordinal scale which caches the fixed color palette, or return an object literal with r, g, b and a attributes. A pv.Color or string can also be returned, though this typically results in slower performance.

Parameters:
{function} f: the new sizing function.

Returns:: {pv.Layout.Pack} this.

Classes

Class pv.Image