Class Index | File Index

Classes


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
 
Constructs a new image with default properties.
Field Summary
Field Attributes Field Name and Description
 
Default properties for images.
 
The height of the image in pixels.
 
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.

Documentation generated by JsDoc Toolkit 2.3.2 on Sun May 30 2010 18:10:24 GMT-0700 (PDT)