Class Guacamole.Layer

Defined in: Layer.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	Guacamole.Layer(width, height) Abstract ordered drawing surface.

Field Summary
Field Attributes	Field Name and Description
<static>	Guacamole.Layer.ATOP Channel mask for the composite operation "atop".
	autoflush Set to true to allow operations to flush automatically, instantly affecting the layer.
	autosize Set to true if this Layer should resize itself to accomodate the dimensions of any drawing operation, and false (the default) otherwise.
<static>	Guacamole.Layer.IN Channel mask for the composite operation "in".
<static>	Guacamole.Layer.OUT Channel mask for the composite operation "out".
<static>	Guacamole.Layer.OVER Channel mask for the composite operation "over".
<static>	Guacamole.Layer.PLUS Channel mask for the composite operation "plus".
<static>	Guacamole.Layer.RATOP Channel mask for the composite operation "ratop".
<static>	Guacamole.Layer.RIN Channel mask for the composite operation "rin".
<static>	Guacamole.Layer.ROUT Channel mask for the composite operation "rout".
<static>	Guacamole.Layer.ROVER Channel mask for the composite operation "rover".
<static>	Guacamole.Layer.SRC Channel mask for the composite operation "src".
<static>	Guacamole.Layer.XOR Channel mask for the composite operation "xor".

Method Summary
Method Attributes	Method Name and Description
	arc(x, y, radius, startAngle, endAngle, negative) Add the specified arc to the current path.
	clip() Clip all future drawing operations by the current path.
	close() Closes the current path by connecting the end point with the start point (if any) with a straight line.
	copy(srcLayer, srcx, srcy, srcw, srch, x, y) Copy a rectangle of image data from one Layer to this Layer.
	curveTo(cp1x, cp1y, cp2x, cp2y, x, y) Starts a new path at the specified point.
	draw(x, y, url) Draws the image at the specified URL at the given coordinates.
	drawImage(x, y, image) Draws the specified image at the given coordinates.
	fillColor(r, g, b, a) Fills the current path with the specified color.
	fillLayer(srcLayer) Fills the current path with the image within the specified layer.
	flush() Run any Tasks which were pending but are now ready to run and are not blocked by other Tasks.
	getCanvas() Returns the canvas element backing this Layer.
	isReady() Returns whether this Layer is ready.
	lineTo(x, y) Add the specified line to the current path.
	moveTo(x, y) Starts a new path at the specified point.
	play(mimetype, duration, url) Plays the video at the specified URL within this layer.
	pop() Pop layer state off stack.
	push() Push current layer state onto stack.
	put(srcLayer, srcx, srcy, srcw, srch, x, y) Put a rectangle of image data from one Layer to this Layer directly without performing any alpha blending.
	rect(x, y, w, h) Add the specified rectangle to the current path.
	reset() Reset the layer, clearing the stack, the current path, and any transform matrix.
	resize(newWidth, newHeight) Changes the size of this Layer to the given width and height.
	setChannelMask(mask) Sets the channel mask for future operations on this Layer.
	setMiterLimit(limit) Sets the miter limit for stroke operations using the miter join.
	setTransform(a, b, c, d, e, f) Sets the given affine transform (defined with six values from the transform's matrix).
	strokeColor(cap, join, thickness, r, g, b, a) Stroke the current path with the specified color.
	strokeLayer(cap, join, thickness, srcLayer) Stroke the current path with the image within the specified layer.
	sync(handler, blocked) Run an arbitrary function as soon as currently pending operations are complete.
	transfer(srcLayer, srcx, srcy, srcw, srch, x, y, transferFunction) Transfer a rectangle of image data from one Layer to this Layer using the specified transfer function.
	transform(a, b, c, d, e, f) Applies the given affine transform (defined with six values from the transform's matrix).

Class Detail

Guacamole.Layer(width, height)

Abstract ordered drawing surface. Each Layer contains a canvas element and provides simple drawing instructions for drawing to that canvas element, however unlike the canvas element itself, drawing operations on a Layer are guaranteed to run in order, even if such an operation must wait for an image to load before completing.

Parameters:
{Number} width: The width of the Layer, in pixels. The canvas element backing this Layer will be given this width.
{Number} height: The height of the Layer, in pixels. The canvas element backing this Layer will be given this height.

Field Detail

<static> Guacamole.Layer.ATOP

Channel mask for the composite operation "atop".

{Boolean} autoflush

Set to true to allow operations to flush automatically, instantly affecting the layer. By default, operations are buffered and only drawn when flush() is called.

Default Value:: false

{Boolean} autosize

Set to true if this Layer should resize itself to accomodate the dimensions of any drawing operation, and false (the default) otherwise. Note that setting this property takes effect immediately, and thus may take effect on operations that were started in the past but have not yet completed. If you wish the setting of this flag to only modify future operations, you will need to make the setting of this flag an operation with sync().

// Set autosize to true for all future operations
layer.sync(function() {
    layer.autosize = true;
});

Default Value:: false

<static> Guacamole.Layer.IN

Channel mask for the composite operation "in". Beware that WebKit-based browsers may leave the contents of the destionation layer where the source layer is transparent, despite the definition of this operation.

<static> Guacamole.Layer.OUT

Channel mask for the composite operation "out". Beware that WebKit-based browsers may leave the contents of the destionation layer where the source layer is transparent, despite the definition of this operation.

<static> Guacamole.Layer.OVER

Channel mask for the composite operation "over".

<static> Guacamole.Layer.PLUS

Channel mask for the composite operation "plus".

<static> Guacamole.Layer.RATOP

Channel mask for the composite operation "ratop". Beware that WebKit-based browsers may leave the contents of the destionation layer where the source layer is transparent, despite the definition of this operation.

<static> Guacamole.Layer.RIN

Channel mask for the composite operation "rin". Beware that WebKit-based browsers may leave the contents of the destionation layer where the source layer is transparent, despite the definition of this operation.

<static> Guacamole.Layer.ROUT

Channel mask for the composite operation "rout".

<static> Guacamole.Layer.ROVER

Channel mask for the composite operation "rover".

<static> Guacamole.Layer.SRC

Channel mask for the composite operation "src". Beware that WebKit-based browsers may leave the contents of the destionation layer where the source layer is transparent, despite the definition of this operation.

<static> Guacamole.Layer.XOR

Channel mask for the composite operation "xor".

Method Detail

arc(x, y, radius, startAngle, endAngle, negative)

Add the specified arc to the current path.

Parameters:
{Number} x: The X coordinate of the center of the circle which will contain the arc.
{Number} y: The Y coordinate of the center of the circle which will contain the arc.
{Number} radius: The radius of the circle.
{Number} startAngle: The starting angle of the arc, in radians.
{Number} endAngle: The ending angle of the arc, in radians.
{Boolean} negative: Whether the arc should be drawn in order of decreasing angle.

clip()

Clip all future drawing operations by the current path. The current path is implicitly closed. The current path can continue to be reused for other operations (such as fillColor()) but a new path will be started once a path drawing operation (path() or rect()) is used.

close()

Closes the current path by connecting the end point with the start point (if any) with a straight line.

copy(srcLayer, srcx, srcy, srcw, srch, x, y)

Copy a rectangle of image data from one Layer to this Layer. This operation will copy exactly the image data that will be drawn once all operations of the source Layer that were pending at the time this function was called are complete. This operation will not alter the size of the source Layer even if its autosize property is set to true.

Parameters:
{Guacamole.Layer} srcLayer: The Layer to copy image data from.
{Number} srcx: The X coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srcy: The Y coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srcw: The width of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srch: The height of the rectangle within the source Layer's coordinate space to copy data from.
{Number} x: The destination X coordinate.
{Number} y: The destination Y coordinate.

curveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Starts a new path at the specified point.

Parameters:
{Number} cp1x: The X coordinate of the first control point.
{Number} cp1y: The Y coordinate of the first control point.
{Number} cp2x: The X coordinate of the second control point.
{Number} cp2y: The Y coordinate of the second control point.
{Number} x: The X coordinate of the endpoint of the curve.
{Number} y: The Y coordinate of the endpoint of the curve.

draw(x, y, url)

Draws the image at the specified URL at the given coordinates. The image will be loaded automatically, and this and any future operations will wait for the image to finish loading.

Parameters:
{Number} x: The destination X coordinate.
{Number} y: The destination Y coordinate.
{String} url: The URL of the image to draw.

drawImage(x, y, image)

Draws the specified image at the given coordinates. The image specified must already be loaded.

Parameters:
{Number} x: The destination X coordinate.
{Number} y: The destination Y coordinate.
{Image} image: The image to draw. Note that this is an Image object - not a URL.

fillColor(r, g, b, a)

Fills the current path with the specified color. The current path is implicitly closed. The current path can continue to be reused for other operations (such as clip()) but a new path will be started once a path drawing operation (path() or rect()) is used.

Parameters:
{Number} r: The red component of the color to fill.
{Number} g: The green component of the color to fill.
{Number} b: The blue component of the color to fill.
{Number} a: The alpha component of the color to fill.

fillLayer(srcLayer)

Fills the current path with the image within the specified layer. The image data will be tiled infinitely within the stroke. The current path is implicitly closed. The current path can continue to be reused for other operations (such as clip()) but a new path will be started once a path drawing operation (path() or rect()) is used.

Parameters:
{Guacamole.Layer} srcLayer: The layer to use as a repeating pattern within the fill.

flush()

Run any Tasks which were pending but are now ready to run and are not blocked by other Tasks.

{Element} getCanvas()

Returns the canvas element backing this Layer.

Returns:: {Element} The canvas element backing this Layer.

{Boolean} isReady()

Returns whether this Layer is ready. A Layer is ready if it has no pending operations and no operations in-progress.

Returns:: {Boolean} true if this Layer is ready, false otherwise.

lineTo(x, y)

Add the specified line to the current path.

Parameters:
{Number} x: The X coordinate of the endpoint of the line to draw.
{Number} y: The Y coordinate of the endpoint of the line to draw.

moveTo(x, y)

Starts a new path at the specified point.

Parameters:
{Number} x: The X coordinate of the point to draw.
{Number} y: The Y coordinate of the point to draw.

play(mimetype, duration, url)

Plays the video at the specified URL within this layer. The video will be loaded automatically, and this and any future operations will wait for the video to finish loading. Future operations will not be executed until the video finishes playing.

Parameters:
{String} mimetype: The mimetype of the video to play.
{Number} duration: The duration of the video in milliseconds.
{String} url: The URL of the video to play.

pop()

Pop layer state off stack.

push()

Push current layer state onto stack.

put(srcLayer, srcx, srcy, srcw, srch, x, y)

Put a rectangle of image data from one Layer to this Layer directly without performing any alpha blending. Simply copy the data.

Parameters:
{Guacamole.Layer} srcLayer: The Layer to copy image data from.
{Number} srcx: The X coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srcy: The Y coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srcw: The width of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srch: The height of the rectangle within the source Layer's coordinate space to copy data from.
{Number} x: The destination X coordinate.
{Number} y: The destination Y coordinate.

rect(x, y, w, h)

Add the specified rectangle to the current path.

Parameters:
{Number} x: The X coordinate of the upper-left corner of the rectangle to draw.
{Number} y: The Y coordinate of the upper-left corner of the rectangle to draw.
{Number} w: The width of the rectangle to draw.
{Number} h: The height of the rectangle to draw.

reset()

Reset the layer, clearing the stack, the current path, and any transform matrix.

resize(newWidth, newHeight)

Changes the size of this Layer to the given width and height. Resizing is only attempted if the new size provided is actually different from the current size.

Parameters:
{Number} newWidth: The new width to assign to this Layer.
{Number} newHeight: The new height to assign to this Layer.

setChannelMask(mask)

Sets the channel mask for future operations on this Layer. The channel mask is a Guacamole-specific compositing operation identifier with a single bit representing each of four channels (in order): source image where destination transparent, source where destination opaque, destination where source transparent, and destination where source opaque.

Parameters:
{Number} mask: The channel mask for future operations on this Layer.

setMiterLimit(limit)

Sets the miter limit for stroke operations using the miter join. This limit is the maximum ratio of the size of the miter join to the stroke width. If this ratio is exceeded, the miter will not be drawn for that joint of the path.

Parameters:
{Number} limit: The miter limit for stroke operations using the miter join.

setTransform(a, b, c, d, e, f)

Sets the given affine transform (defined with six values from the transform's matrix).

Parameters:
{Number} a: The first value in the affine transform's matrix.
{Number} b: The second value in the affine transform's matrix.
{Number} c: The third value in the affine transform's matrix.
{Number} d: The fourth value in the affine transform's matrix.
{Number} e: The fifth value in the affine transform's matrix.
{Number} f: The sixth value in the affine transform's matrix.

strokeColor(cap, join, thickness, r, g, b, a)

Stroke the current path with the specified color. The current path is implicitly closed. The current path can continue to be reused for other operations (such as clip()) but a new path will be started once a path drawing operation (path() or rect()) is used.

Parameters:
{String} cap: The line cap style. Can be "round", "square", or "butt".
{String} join: The line join style. Can be "round", "bevel", or "miter".
{Number} thickness: The line thickness in pixels.
{Number} r: The red component of the color to fill.
{Number} g: The green component of the color to fill.
{Number} b: The blue component of the color to fill.
{Number} a: The alpha component of the color to fill.

strokeLayer(cap, join, thickness, srcLayer)

Stroke the current path with the image within the specified layer. The image data will be tiled infinitely within the stroke. The current path is implicitly closed. The current path can continue to be reused for other operations (such as clip()) but a new path will be started once a path drawing operation (path() or rect()) is used.

Parameters:
{String} cap: The line cap style. Can be "round", "square", or "butt".
{String} join: The line join style. Can be "round", "bevel", or "miter".
{Number} thickness: The line thickness in pixels.
{Guacamole.Layer} srcLayer: The layer to use as a repeating pattern within the stroke.

sync(handler, blocked)

Run an arbitrary function as soon as currently pending operations are complete.

Parameters:
{function} handler: The function to call once all currently pending operations are complete.
{boolean} blocked: Whether the task should start blocked.

transfer(srcLayer, srcx, srcy, srcw, srch, x, y, transferFunction)

Transfer a rectangle of image data from one Layer to this Layer using the specified transfer function.

Parameters:
{Guacamole.Layer} srcLayer: The Layer to copy image data from.
{Number} srcx: The X coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srcy: The Y coordinate of the upper-left corner of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srcw: The width of the rectangle within the source Layer's coordinate space to copy data from.
{Number} srch: The height of the rectangle within the source Layer's coordinate space to copy data from.
{Number} x: The destination X coordinate.
{Number} y: The destination Y coordinate.
{Function} transferFunction: The transfer function to use to transfer data from source to destination.

transform(a, b, c, d, e, f)

Applies the given affine transform (defined with six values from the transform's matrix).

Parameters:
{Number} a: The first value in the affine transform's matrix.
{Number} b: The second value in the affine transform's matrix.
{Number} c: The third value in the affine transform's matrix.
{Number} d: The fourth value in the affine transform's matrix.
{Number} e: The fifth value in the affine transform's matrix.
{Number} f: The sixth value in the affine transform's matrix.

Classes

Class Guacamole.Layer