-
Notifications
You must be signed in to change notification settings - Fork 2k
/
Copy pathGlobalToLocal2.html
executable file
·163 lines (132 loc) · 4.05 KB
/
GlobalToLocal2.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EaselJS Example: Using globalToLocal #2</title>
<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
<script src="../_assets/js/examples.js"></script>
<!-- Note: All core EaselJS classes are listed here: -->
<script src="../lib/easeljs-NEXT.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script id="editable">
var canvas;
var stage;
var _mouseIsDown;
var _mouseX;
var _mouseY;
var spin1; // nested invisble container to generate a spirograph effect
var spin2; // nested invisble container to generate a spirograph effect
var shape; // drawing shape
var color; // drawing color
var lastPt; // last draw position
var graphics;
var count = 0;
var colorOffset;
var text;
//
//
// This demo is not heavily commented because it is a direct derivative of globalToLocal1
//
//
function init() {
canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
// this prevents the stage from clearing, so we only draw one vector line each tick, and it
// is painted onto the canvas, then removed.
stage.autoClear = false;
canvas.onmousemove = mouseMove;
canvas.onmousedown = mouseDown;
canvas.onmouseup = mouseUp;
// Alpha Rectangle, applied each frame at the bottom, fading out the previous content over time.
var fade = new createjs.Shape(new createjs.Graphics().f("#FFF").dr(0, 0, canvas.width, canvas.height));
fade.alpha = 0.02;
stage.addChild(fade);
shape = new createjs.Shape();
shape.y = 276;
graphics = shape.graphics;
// middle spinner:
spin2 = new createjs.Container();
spin2.addChild(shape);
spin2.x = 391;
// outside spinner:
spin1 = new createjs.Container();
spin1.addChild(spin2);
spin1.x = canvas.width / 2;
spin1.y = canvas.height / 2;
stage.addChild(spin1);
text = new createjs.Text("Click and Drag", "36px Arial", "#777777");
text.textBaseline = "middle";
text.x = 360;
text.y = canvas.height / 2;
stage.addChild(text);
//start ticking
createjs.Ticker.interval = 20; // 20ms = 50fps
createjs.Ticker.addEventListener("tick", tick);
stage.update(); // Draw the stage once
}
function tick(event) {
//spin objects
spin1.rotation += 10.7;
spin2.rotation += -7.113;
shape.rotation += 1.77;
if (_mouseIsDown) {
var color = createjs.Graphics.getHSL(
Math.cos((count++) * 0.1) * 30 + colorOffset,
100,
50,
0.8);
graphics.setStrokeStyle(Math.random() * 20, "round").beginStroke(color);
graphics.moveTo(0, 0);
lastPt = shape.globalToLocal(_mouseX, _mouseY);
graphics.lineTo(lastPt.x, lastPt.y);
// draw the new vector line to the canvas:
stage.update(event);
// then clear the shape's vector data so it isn't rendered again next tick:
graphics.clear();
}
}
//start drawing
function mouseDown(event) {
if (!event) {
var e = window.event;
}
stage.removeChild(text);
if (_mouseIsDown) {
return;
}
_mouseIsDown = true;
colorOffset = Math.random() * 360;
lastPt = shape.globalToLocal(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop);
}
//stop drawing
function mouseUp() {
_mouseIsDown = false;
}
//update mouse positions
function mouseMove(e) {
if (!e) {
var e = window.event;
}
_mouseX = e.pageX - canvas.offsetLeft;
_mouseY = e.pageY - canvas.offsetTop;
}
</script>
</head>
<body onload="init();">
<header class="EaselJS">
<h1>GlobalToLocal</h1>
<p>Similar to globalToLocal1.html, but <code>Stage.autoClear</code> is set
to false (so the stage never clears itself), and the
vector <code>Shape</code> is cleared each tick, so only one line is
rendered per tick. As such, you can draw continuously
without a slow down. A mostly-transparent rectangular shape is drawn
each frame to fade out content over time.
</p>
</header>
<div>
<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>