- 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
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
import { Bounds } from '@pixi/display';
/** @internal */
export const PATH = 100;
/**
* @ignore
* @public
*/
export type Contour = Array<number>;
/**
* The fill rules supported by {@link Path}.
*
* @public
*/
export enum FILL_RULE {
NONZERO = 'nonzero',
EVENODD = 'evenodd',
}
/**
* Shape extension for Graphics
*
* @public
*/
export class Path
{
/**
* The list of contours of this path, where a contour is a list of points.
*
* @member {Array.Array.<number>>}
*/
contours: Contour[];
/** The fill rule of this path. */
fillRule: FILL_RULE;
/** The type of shape. This is always equal to 100 for now. */
type: number;
/** Whether the calculated bounds are dirty. */
protected dirty: boolean;
/** The calculated bounds of this path. */
protected bounds: Bounds = new Bounds();
/**
* Initializes the path with zero contours and a non-zero fill rule.
*/
constructor()
{
this.contours = [];
this.fillRule = FILL_RULE.NONZERO;
this.type = PATH;
this.dirty = true;
}
/**
* Gets the points of the last contour in this path. If there are no contours, one is created.
*/
get points(): number[]
{
if (!this.contours.length)
{
this.contours.push([]);
}
return this.contours[this.contours.length - 1];
}
/**
* Calculates whether the point (x, y) is inside this path or not.
*
* @param x - The x-coordinate of the point.
* @param y - The y-coordinate of the point.
* @return Whether (x, y) is inside this path.
*/
contains(x: number, y: number): boolean
{
if (this.dirty)
{
this.calculateBounds();
this.dirty = false;
}
const bounds = this.bounds;
if (x < bounds.minX || y < bounds.minY ||
x > bounds.maxX || y > bounds.maxY)
{
return false;
}
if (this.fillRule === FILL_RULE.EVENODD)
{
return this.hitEvenOdd(x, y);
}
else if (this.fillRule === FILL_RULE.NONZERO)
{
return this.hitNonZero(x, y);
}
return false;
}
/**
* Clone this path.
*/
clone(): Path
{
const contours = this.contours.map((c) => [...c]);
const path = new Path();
path.contours = contours;
path.fillRule = this.fillRule;
return path;
}
/**
* Closes the last contour of this path and pushes a new one.
*/
closeContour(): void
{
if (this.points.length === 0)
{
return;
}
this.contours.push([]);
}
/**
* This should be called when the path is updated so that the hit-testing bounds are recalculated.
*/
invalidate(): void
{
this.dirty = true;
}
toString(): string
{
return `[@pixi-essentials/svg:Path Don't expect points to be printed :P]`;
}
/**
* Recalculates the bounds of this path and sets {@link Path.bounds this.bounds}.
*/
private calculateBounds()
{
const bounds = this.bounds
let minX = Infinity;
let minY = Infinity;
let maxX = -Infinity;
let maxY = -Infinity;
for (const contour of this.contours)
{
for (let i = 0, j = contour.length; i < j;)
{
const x = contour[i++];
const y = contour[i++];
minX = x < minX ? x : minX;
minY = y < minY ? y : minY;
maxX = x > maxX ? x : maxX;
maxY = y > maxY ? y : maxY;
}
}
bounds.minX = minX;
bounds.minY = minY;
bounds.maxX = maxX;
bounds.maxY = maxY;
}
/**
* Hit-tests the point (x, y) based on the even-odd fill rule.
*
* @see http://geomalgorithms.com/a03-_inclusion.html
*/
private hitEvenOdd(x: number, y: number): boolean
{
// Here, we do we a ray tracing of a horizontally line extending from (x, y) infinitely towards the
// right. The number of edges crossing this ray are counted.
let crossingCount = 0;
for (const contour of this.contours)
{
for (let i = 0, j = contour.length; i < j;)
{
const x0 = contour[i++];
const y0 = contour[i++];
const x1 = contour[i % contour.length];
const y1 = contour[(i + 1) % contour.length];
if ((y0 < y && y1 > y) || // Downward crossing
(y0 > y && y1 < y)) // Upward crossing
{
// Calculate the x-coordinate of the point of intersection.
const it = (y - y0) / (y1 - y0);
const ix = x0 + it * (x1 - x0);
if (x < ix)
{
++crossingCount;
}
}
}
}
return !!(crossingCount % 2);
}
/**
* Hit-tests the point (x, y) based on non-zero fill rule.
*
* @see http://geomalgorithms.com/a03-_inclusion.html
*/
private hitNonZero(x: number, y: number)
{
// Calculate the winding number of (x, y) by finding the net number of edges that cross the horizontal ray
// from (x, y) upwards minus downwards.
let windingNumber = 0;
for (const contour of this.contours)
{
for (let i = 0, j = contour.length; i < j;)
{
const x0 = contour[i++];
const y0 = contour[i++];
const x1 = contour[i % contour.length];
const y1 = contour[(i + 1) % contour.length];
if (y0 <= y)
{
if (y1 > y && // Cross downward
calculateSide(
x, y,
x0, y0,
x1, y1
) > 0) // (x, y) left of edge
{
++windingNumber;
}
}
else if (y1 <= y) // Cross upward
{
if (calculateSide(
x, y,
x0, y0,
x1, y1
) < 0) // (x, y) right of edge
{
--windingNumber;
}
}
}
}
// Winding number will be zero for points outside the shape.
return windingNumber !== 0;
}
}
/**
* Calculates whether (x, y) is left, on, or right of the line extending through (x0, y0) and (x1, y1).
*
* @ignore
* @return > 0 if on on left side, = 0 if on line, < 0 if on right side
*/
function calculateSide(x: number, y: number, x0: number, y0: number, x1: number, y1: number)
{
// Basically calculate the area of the triangle (x0, y0), (x1, y1), (x, y), with vertices
// in that order. If counterlockwise, then the area is positive - then (x, y) is on left;
return (x1 - x0) * (y - y0) - (x - x0) * (y1 - y0);
}