/
circle.js
205 lines (159 loc) · 4.81 KB
/
circle.js
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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
import { Commands } from '../utils/path-commands.js';
import { HALF_PI, TWO_PI } from '../utils/math.js';
import { Path } from '../path.js';
import { Anchor } from '../anchor.js';
const cos = Math.cos, sin = Math.sin;
/**
* @name Two.Circle
* @class
* @extends Two.Path
* @param {Number} [x=0] - The x position of the circle.
* @param {Number} [y=0] - The y position of the circle.
* @param {Number} [radius=0] - The radius value of the circle.
* @param {Number} [resolution=4] - The number of vertices used to construct the circle.
*/
export class Circle extends Path {
/**
* @name Two.Circle#_flagRadius
* @private
* @property {Boolean} - Determines whether the {@link Two.Circle#radius} needs updating.
*/
_flagRadius = false;
/**
* @name Two.Circle#_radius
* @private
* @see {@link Two.Circle#radius}
*/
_radius = 0;
constructor(ox, oy, r, resolution) {
// At least 2 vertices are required for proper circlage
const amount = resolution ? Math.max(resolution, 2) : 4;
const points = [];
for (let i = 0; i < amount; i++) {
points.push(new Anchor(0, 0, 0, 0, 0, 0));
}
super(points, true, true, true);
for (let prop in proto) {
Object.defineProperty(this, prop, proto[prop]);
}
/**
* @name Two.Circle#radius
* @property {Number} - The size of the radius of the circle.
*/
if (typeof r === 'number') {
this.radius = r;
}
this._update();
if (typeof ox === 'number') {
this.translation.x = ox;
}
if (typeof oy === 'number') {
this.translation.y = oy;
}
}
/**
* @name Two.Circle.Properties
* @property {String[]} - A list of properties that are on every {@link Two.Circle}.
*/
static Properties = ['radius'];
/**
* @name Two.Circle#_update
* @function
* @private
* @param {Boolean} [bubbles=false] - Force the parent to `_update` as well.
* @description This is called before rendering happens by the renderer. This applies all changes necessary so that rendering is up-to-date but not updated more than it needs to be.
* @nota-bene Try not to call this method more than once a frame.
*/
_update() {
if (this._flagVertices || this._flagRadius) {
let length = this.vertices.length;
if (!this._closed && length > 2) {
length -= 1;
}
// Coefficient for approximating circular arcs with Bezier curves
const c = (4 / 3) * Math.tan(Math.PI / (length * 2));
const radius = this._radius;
const rc = radius * c;
for (let i = 0; i < this.vertices.length; i++) {
const pct = i / length;
const theta = pct * TWO_PI;
const x = radius * cos(theta);
const y = radius * sin(theta);
const lx = rc * cos(theta - HALF_PI);
const ly = rc * sin(theta - HALF_PI);
const rx = rc * cos(theta + HALF_PI);
const ry = rc * sin(theta + HALF_PI);
const v = this.vertices[i];
v.command = i === 0 ? Commands.move : Commands.curve;
v.set(x, y);
v.controls.left.set(lx, ly);
v.controls.right.set(rx, ry);
}
}
super._update.call(this);
return this;
}
/**
* @name Two.Circle#flagReset
* @function
* @private
* @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
*/
flagReset() {
this._flagRadius = false;
super.flagReset.call(this);
return this;
}
/**
* @name Two.Circle#clone
* @function
* @param {Two.Group} [parent] - The parent group or scene to add the clone to.
* @returns {Two.Circle}
* @description Create a new instance of {@link Two.Circle} with the same properties of the current path.
*/
clone(parent) {
const clone = new Circle(0, 0, this.radius, this.vertices.length);
clone.translation.copy(this.translation);
clone.rotation = this.rotation;
clone.scale = this.scale;
clone.skewX = this.skewX;
clone.skewY = this.skewY;
if (this.matrix.manual) {
clone.matrix.copy(this.matrix);
}
for (let i = 0; i < Path.Properties.length; i++) {
const k = Path.Properties[i];
clone[k] = this[k];
}
if (parent) {
parent.add(clone);
}
return clone;
}
/**
* @name Two.Circle#toObject
* @function
* @returns {Object}
* @description Return a JSON compatible plain object that represents the path.
*/
toObject() {
const object = super.toObject.call(this);
for (let i = 0; i < Circle.Properties.length; i++) {
const k = Circle.Properties[i];
object[k] = this[k];
}
return object;
}
}
const proto = {
radius: {
enumerable: true,
get: function() {
return this._radius;
},
set: function(v) {
this._radius = v;
this._flagRadius = true;
}
}
};