Built-In Namespace _global_
| Field Attributes | Field Name and Description |
|---|---|
|
AudioNode is a CanvasNode used to play a sound.
|
|
|
Canvas is the canvas manager class.
|
|
|
CanvasNode is the base CAKE scenegraph node.
|
|
|
Navigating around differing implementations of canvas features.
|
|
|
CatmullRomSpline draws a Catmull-Rom spline, with optional looping and
path closing.
|
|
|
Circle is used for creating circular paths.
|
|
|
Color helper functions.
|
|
|
A Drawable is a CanvasNode with possible fill, stroke and clip.
|
|
|
ElementNode is a CanvasNode that has an HTML element as its content.
|
|
|
Ellipse is a scaled circle.
|
|
|
Gradient is a linear or radial color gradient that can be used as a
strokeStyle or fillStyle.
|
|
|
ImageNode is used for drawing images.
|
|
|
A Line is a line drawn from x1,y1 to x2,y2.
|
|
|
Hacky link class for emulating .
|
|
|
Path is used for creating custom paths.
|
|
|
Pattern is a possibly repeating image that can be used as a strokeStyle or
fillStyle.
|
|
|
Polygon is used for creating paths consisting of straight line
segments.
|
|
|
Rectangle is used for creating rectangular paths.
|
|
|
A Spiral is a function graph drawn in polar coordinates from startAngle to
endAngle.
|
|
|
SVG parser for simple documents.
|
|
|
WARNING: The WhatWG standard says nothing about drawing text.
|
|
|
Timeline is an animator that tweens between its frames.
|
| Method Attributes | Method Name and Description |
|---|---|
|
$(id)
|
|
|
$A(obj)
Creates a new array from an object with #length.
|
|
|
animator(t, dt)
|
|
|
E(name, params, config)
Creates and configures a DOM element.
|
|
|
Klass()
Klass is a function that returns a constructor function.
|
|
|
T(text)
Shortcut for document.createTextNode.
|
Field Detail
AudioNode
AudioNode is a CanvasNode used to play a sound.
Defined in: cake.js.
Defined in: cake.js.
Canvas
Canvas is the canvas manager class.
It takes care of updating and drawing its childNodes on a canvas element.
An example with a rotating rectangle:
var c = E.canvas(500, 500)
var canvas = new Canvas(c)
var rect = new Rectangle(100, 100)
rect.x = 250
rect.y = 250
rect.fill = true
rect.fillStyle = 'green'
rect.addFrameListener(function(t) {
this.rotation = ((t / 3000) % 1) * Math.PI * 2
})
canvas.append(rect)
document.body.appendChild(c)
To use the canvas as a manually updated image:
var canvas = new Canvas(E.canvas(200,40), {
isPlaying : false,
redrawOnlyWhenChanged : true
})
var c = new Circle(20)
c.x = 100
c.y = 20
c.fill = true
c.fillStyle = 'red'
c.addFrameListener(function(t) {
if (this.root.absoluteMouseX != null) {
this.x = this.root.mouseX // relative to canvas surface
this.root.changed = true
}
})
canvas.append(c)
Or by using raw onFrame-calls:
var canvas = new Canvas(E.canvas(200,40), {
isPlaying : false,
fill : true,
fillStyle : 'white'
})
var c = new Circle(20)
c.x = 100
c.y = 20
c.fill = true
c.fillStyle = 'red'
canvas.append(c)
canvas.onFrame()
Which is also the recommended way to use a canvas inside another canvas:
var canvas = new Canvas(E.canvas(200,40), {
isPlaying : false
})
var c = new Circle(20, {
x: 100, y: 20,
fill: true, fillStyle: 'red'
})
canvas.append(c)
var topCanvas = new Canvas(E.canvas(500, 500))
var canvasImage = new ImageNode(canvas.canvas, {x: 250, y: 250})
topCanvas.append(canvasImage)
canvasImage.addFrameListener(function(t) {
this.rotation = (t / 3000 % 1) * Math.PI * 2
canvas.onFrame(t)
})
Defined in: cake.js.
Defined in: cake.js.
CanvasNode
CanvasNode is the base CAKE scenegraph node. All the other scenegraph nodes
derive from it. A plain CanvasNode does no drawing, but it can be used for
grouping other nodes and setting up the group's drawing state.
var scene = new CanvasNode({x: 10, y: 10})
The usual way to use CanvasNodes is to append them to a Canvas object:
var scene = new CanvasNode()
scene.append(new Rectangle(40, 40, {fill: true}))
var elem = E.canvas(400, 400)
var canvas = new Canvas(elem)
canvas.append(scene)
You can also use CanvasNodes to draw directly to a canvas element:
var scene = new CanvasNode()
scene.append(new Circle(40, {x:200, y:200, stroke: true}))
var elem = E.canvas(400, 400)
scene.handleDraw(elem.getContext('2d'))
Defined in: cake.js.
Defined in: cake.js.
CanvasSupport
Navigating around differing implementations of canvas features.
Current issues:
isPointInPath(x,y):
Opera supports isPointInPath.
Safari doesn't have isPointInPath. So you need to keep track of the CTM and
do your own in-fill-checking. Which is done for circles and rectangles
in Circle#isPointInPath and Rectangle#isPointInPath.
Paths use an inaccurate bounding box test, implemented in
Path#isPointInPath.
Firefox 3 has isPointInPath. But it uses user-space coordinates.
Which can be easily navigated around because it has setTransform.
Firefox 2 has isPointInPath. But it uses user-space coordinates.
And there's no setTransform, so you need to keep track of the CTM and
multiply the mouse vector with the CTM's inverse.
Drawing text:
Rhino has ctx.drawString(x,y, text)
Firefox has ctx.mozDrawText(text)
The WhatWG spec, Safari and Opera have nothing.
Defined in: cake.js.
Defined in: cake.js.
CatmullRomSpline
CatmullRomSpline draws a Catmull-Rom spline, with optional looping and
path closing. Handy for motion paths.
Defined in: cake.js.
Defined in: cake.js.
Circle
Circle is used for creating circular paths.
Uses context.arc(...).
Attributes:
cx, cy, radius, startAngle, endAngle, clockwise, closePath, includeCenter
Defined in: cake.js.
Defined in: cake.js.
Colors
Color helper functions.
Defined in: cake.js.
Defined in: cake.js.
Drawable
A Drawable is a CanvasNode with possible fill, stroke and clip.
It draws the path by calling #drawGeometry
Defined in: cake.js.
Defined in: cake.js.
ElementNode
ElementNode is a CanvasNode that has an HTML element as its content.
The content is added to an absolutely positioned HTML element, which is added
to the root node's canvases parentNode. The content element follows the
current transformation matrix.
The opacity of the element is set to the globalAlpha of the drawing context
unless #noAlpha is true.
The font-size of the element is set to the current y-scale unless #noScaling
is true.
Use ElementNode when you need accessible web content in your animations.
var e = new ElementNode(
E('h1', 'HERZLICH WILLKOMMEN IM BAHNHOF'),
{
x : 40,
y : 30
}
)
e.addFrameListener(function(t) {
this.scale = 1 + 0.5*Math.cos(t/1000)
})
Defined in: cake.js.
Defined in: cake.js.
Ellipse
Ellipse is a scaled circle. Except it isn't. Because that wouldn't work in
Opera.
Defined in: cake.js.
Defined in: cake.js.
Gradient
Gradient is a linear or radial color gradient that can be used as a
strokeStyle or fillStyle.
Attributes:
type - Type of the gradient. 'linear' or 'radial'
startX, startY - Coordinates for the starting point of the gradient.
Center of the starting circle of a radial gradient.
Default is 0, 0.
endX, endY - Coordinates for the ending point of the gradient.
Center of the ending circle of a radial gradient.
Default is 0, 0.
startRadius - The radius of the starting circle of a radial gradient.
Default is 0.
endRadius - The radius of the ending circle of a radial gradient.
Default is 100.
colorStops - The color stops for the gradient. The format for the color
stops is: [[position_1, color_1], [position_2, color_2], ...].
The possible color formats are: 'red', '#000', '#000000',
'rgba(0,0,0, 0.2)', [0,0,0] and [0,0,0, 0.2].
Default color stops are [[0, '#000000'], [1, '#FFFFFF']].
Example:
var g = new Gradient({
type : 'radial',
endRadius : 40,
colorStops : [
[0, '#000'],
[0.2, '#ffffff'],
[0.5, [255, 0, 0]],
[0.8, [0, 255, 255, 0.5]],
[1.0, 'rgba(255, 0, 255, 0.8)']
]
})
Defined in: cake.js.
Defined in: cake.js.
ImageNode
ImageNode is used for drawing images. Creates a rectangular path around
the drawn image.
Attributes:
centered - If true, image center is at the origin.
Otherwise image top-left is at the origin.
usePattern - Use a pattern fill for drawing the image (instead of
drawImage.) Doesn't do sub-image drawing, and Safari doesn't
like scaled image patterns.
sX, sY, sWidth, sHeight - Area of image to draw. Optional.
dX, dY - Coordinates where to draw the image. Default is 0, 0.
dWidth, dHeight - Size of the drawn image. Optional.
Example:
var img = new Image()
img.src = 'foo.jpg'
var imageGeo = new ImageNode(img)
Defined in: cake.js.
Defined in: cake.js.
Line
A Line is a line drawn from x1,y1 to x2,y2. Lines are stroked by default.
Defined in: cake.js.
Defined in: cake.js.
LinkNode
Hacky link class for emulating .
The correct way would be to have a real under the cursor while hovering
this, or an imagemap polygon built from the clipped subtree path.
Defined in: cake.js.
Defined in: cake.js.
Path
Path is used for creating custom paths.
Attributes: segments, closePath.
var path = new Path([
['moveTo', [-50, -60]],
['lineTo', [30, 50],
['lineTo', [-50, 50]],
['bezierCurveTo', [-50, 100, -50, 100, 0, 100]],
['quadraticCurveTo', [0, 120, -20, 130]],
['quadraticCurveTo', [0, 140, 0, 160]],
['bezierCurveTo', [-10, 160, -20, 170, -30, 180]],
['quadraticCurveTo', [10, 230, -50, 260]]
])
The path segments are used as [methodName, arguments] on the canvas
drawing context, so the possible path segments are:
['moveTo', [x, y]]
['lineTo', [x, y]]
['quadraticCurveTo', [control_point_x, control_point_y, x, y]]
['bezierCurveTo', [cp1x, cp1y, cp2x, cp2y, x, y]]
['arc', [x, y, radius, startAngle, endAngle, drawClockwise]]
['arcTo', [x1, y1, x2, y2, radius]]
['rect', [x, y, width, height]]
You can also pass an SVG path string as segments.
var path = new Path("M 100 100 L 300 100 L 200 300 z", {
stroke: true, strokeStyle: 'blue',
fill: true, fillStyle: 'red',
lineWidth: 3
})
Defined in: cake.js.
Defined in: cake.js.
Pattern
Pattern is a possibly repeating image that can be used as a strokeStyle or
fillStyle.
var image = new Image()
image.src = 'foo.jpg'
var pattern = new Pattern(image, 'no-repeat')
var rect = new Rectangle(200, 200, {fill: true, fillStyle: pattern})
Defined in: cake.js.
Defined in: cake.js.
Polygon
Polygon is used for creating paths consisting of straight line
segments.
Attributes:
segments - The vertices of the polygon, e.g. [0,0, 1,1, 1,2, 0,1]
closePath - Whether to close the path, default is true.
Defined in: cake.js.
Defined in: cake.js.
Rectangle
Rectangle is used for creating rectangular paths.
Uses context.rect(...).
Attributes:
cx, cy, width, height, centered, rx, ry
If centered is set to true, centers the rectangle on the origin.
Otherwise the top-left corner of the rectangle is on the origin.
Defined in: cake.js.
Defined in: cake.js.
Spiral
A Spiral is a function graph drawn in polar coordinates from startAngle to
endAngle. And the source of all life energy, etc.
Defined in: cake.js.
Defined in: cake.js.
SVGParser
SVG parser for simple documents. Converts SVG DOM to CAKE scenegraph.
Emphasis on graphical images, not on the "HTML-killer" features of SVG.
var svgNode = SVGParser.parse(
svgRootElement, filename, containerWidth, containerHeight, fontSize
)
Features:
TextNode
WARNING: The WhatWG standard says nothing about drawing text.
All the following code is very much subject to change.
TextNode is used for drawing text on a canvas.
Attributes:
text - The text string to draw.
asPath - If true, creates a text path instead of drawing the text.
align - Horizontal alignment for the text. 'left', 'right' or 'center'
pathGeometry - A geometry object the path of which the text follows.
Example:
var text = new TextGeometry('The cake is a lie.')
Defined in: cake.js.
Defined in: cake.js.
Timeline
Timeline is an animator that tweens between its frames.
When object.time = k.time:
object.state = k.state
When object.time > k[i-1].time and object.time < k[i].time:
object.state = k[i].tween(position, k[i-1].state, k[i].state)
where position = elapsed / duration,
elapsed = object.time - k[i-1].time,
duration = k[i].time - k[i-1].time
Defined in: cake.js.
Defined in: cake.js.
Method Detail
$(id)
Defined in: cake.js.
- Parameters:
- id
$A(obj)
Creates a new array from an object with #length.
Defined in: cake.js.
Defined in: cake.js.
- Parameters:
- obj
animator(t, dt)
Defined in: cake.js.
- Parameters:
- t
- dt
E(name, params, config)
Creates and configures a DOM element.
The tag of the element is given by name.
If params is a string, it is used as the innerHTML of the created element.
If params is a DOM element, it is appended to the created element.
If params is an object, it is treated as a config object and merged
with the created element.
If params is a string or DOM element, the third argument is treated
as the config object.
Special attributes of the config object:
content
- if content is a string, it is used as the innerHTML of the
created element
- if content is an element, it is appended to the created element
style
- the style object is merged with the created element's style
Defined in: cake.js.
Defined in: cake.js.
- Parameters:
- {String} name
- The tag for the created element
- params
- The content or config for the created element
- config
- The config for the created element if params is content
- Returns:
- The created DOM element
Klass()
Klass is a function that returns a constructor function.
The constructor function calls #initialize with its arguments.
The parameters to Klass have their prototypes or themselves merged with the
constructor function's prototype.
Finally, the constructor function's prototype is merged with the constructor
function. So you can write Shape.getArea.call(this) instead of
Shape.prototype.getArea.call(this).
Shape = Klass({
getArea : function() {
raise('No area defined!')
}
})
Rectangle = Klass(Shape, {
initialize : function(x, y) {
this.x = x
this.y = y
},
getArea : function() {
return this.x * this.y
}
})
Square = Klass(Rectangle, {
initialize : function(s) {
Rectangle.initialize.call(this, s, s)
}
})
new Square(5).getArea()
//=> 25
Defined in: cake.js.
Defined in: cake.js.
- Returns:
- Constructor object for the class
T(text)
Shortcut for document.createTextNode.
Defined in: cake.js.
Defined in: cake.js.
- Parameters:
- {String} text
- The text for the text node
- Returns:
- The created text node