UI.makeImage

(part of UI)

Returns: image object

Parameters: imagePath (string), imageSize (size), options (object)

Returns an image of the following form:

{
    image: imagePath,
    imageSize: (copy of) imageSize,
    repeat: options.repeat (or "no-repeat"),
    position: options.position (or "top left"), // a CSS position
    sizing: options.sizing (or ""), // can be contain, cover, or empty
    imageType: options.imageType (or "url")
}

The imagePath is the file reference to the desired image. imageSize is the size of the image (created using UI.makeSize). If no size is given, null is used. repeat is optional, and can contain any valid CSS Repeat value (repeat, repeat-x, repeat-y, no-repeat). If not specified, repeat defaults to "no-repeat". position is also optional, and may contain any valid CSS Position, including pixel values. It defaults to "top left". sizing is typically blank, but if specified should only be cover or contain -- these override the values in position. imageType specifies what kind of image this is: for a regular image, the value is url, but for other kinds of images, this may be something else (like gradient).

Note: The size of the image should be a logical pixel value, not a physical pixel value. That is, even if your image's actual resolution is 64x64, you should specify 32x32 if you want it to render in a 32x32 area on a retina device (and on a non-retina device).

Note: any portion of the size that is less than zero will receive an auto size in the CSS.

Usage

var anImage = UI.makeImage ( "./images/something.png", UI.makeSize (32, 32) );
// anImage will be a 32x32 (logical) sized image
var aRepeatingImage = UI.makeImage ( "./images/somePattern.png", UI.makeSize (32, 32), 
                                     { repeat: "repeat" } );

Version

0.3 Introduced; Docs Valid