-
Notifications
You must be signed in to change notification settings - Fork 1
/
window-with-button.html
66 lines (59 loc) · 2.26 KB
/
window-with-button.html
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
<html>
<head>
<title>Carena</title>
<script type="text/javascript" src="../carena.js"></script>
</head>
<body>
<canvas width="400" height="400" id="draggable-window"></canvas>
<script type="text/javascript">
(function() {
var wrenderer = carena.build({}, ["carena.Renderer"], {canvas: document.getElementById("draggable-window")});
wcamera = carena.build({}, ["carena.Camera", "carena.DragManager"], { renderer: wrenderer});
cwindow = carena.build({}, ["carena.Node", "carena.Eventable", "carena.Draggable"]),
wbutton = carena.build({}, ["carena.Node", "carena.Eventable", "carena.RelativeToParent"]),
wmouse = {x:0, y:0},
wfps = 1000/60;
wcamera.target = cwindow;
cwindow.x=50;
cwindow.y=50;
cwindow.width = 200;
cwindow.height = 200;
cwindow.color = "white";
wbutton.width=100;
wbutton.height=50;
wbutton.x = 100;
wbutton.y = 100;
cwindow.add(wbutton)
wbutton.color = "darkgrey";
wbutton.render = function(ms) {
wbutton.dirty = false;
wrenderer.context.fillStyle = wbutton.color;
wrenderer.context.fillRect(wbutton.x, wbutton.y, wbutton.width, wbutton.height);
wrenderer.context.font = "12pt verdana";
wrenderer.context.fillStyle = "black";
wrenderer.context.fillText("Press Me!", (wbutton.width/2) + (wbutton.x-39), (wbutton.height/2) + (wbutton.y+5));
};
wbutton.event.bind("mouse.in", function(name, data) {
wbutton.color="lightgrey";
wbutton.dirty = true;
});
wbutton.event.bind("mouse.out", function(name, data) {
wbutton.color="darkgrey";
wbutton.dirty = true;
});
wbutton.event.bind("mouse.down", function(name, data) {
wbutton.color="orange";
wbutton.dirty = true;
});
wbutton.event.bind("mouse.up", function(name, data) {
wbutton.color="lightgrey";
wbutton.dirty = true;
});
setTimeout(function renderDraggableWindow() {
wcamera.render();
setTimeout(renderDraggableWindow, wfps)
}, wfps);
}());
</script>
</body>
</html>