1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
/**
_enyo.Canvas_ is a control that generates a <canvas> HTML tag. It may
contain other canvas components that are derived not from
<a href="#enyo.Control">enyo.Control</a>, but from
<a href="#enyo.canvas.Control">enyo.canvas.Control</a>. These aren't true
controls in the sense of being DOM elements; they are, rather, shapes drawn
into the canvas.
*/
enyo.kind({
name: "enyo.Canvas",
kind: enyo.Control,
tag: "canvas",
attributes: {
//* Width of the canvas element
width: 500,
//* Height of the canvas element
height: 500
},
defaultKind: "enyo.canvas.Control",
//* @protected
generateInnerHtml: function() {
return '';
},
teardownChildren: function() {
},
rendered: function() {
this.renderChildren();
},
/*
addChild and removeChild of Control kind assumes children are Controls.
CanvasControls are not, so we use UiComponent's version, the superkind of Control
*/
addChild: function() {
enyo.UiComponent.prototype.addChild.apply(this, arguments);
},
removeChild: function() {
enyo.UiComponent.prototype.removeChild.apply(this, arguments);
},
renderChildren: function(inContext) {
var ctx = inContext;
var canvas = this.hasNode();
if (!ctx) {
if (canvas.getContext) {
ctx = canvas.getContext('2d');
}
}
if (ctx) {
for (var i=0, c; c=this.children[i]; i++) {
c.render(ctx);
}
}
},
//* @public
/**
Refreshes the canvas context, clears existing drawings, and redraws all
of the children.
*/
update: function() {
var canvas = this.hasNode();
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var b = this.getBounds();
// clear canvas
ctx.clearRect(0, 0, b.width, b.height);
this.renderChildren(ctx);
}
}
});
|
