index.d.ts 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968
  1. /// <reference path="./global.d.ts" />
  2. import { BatchDrawCall } from '@pixi/core';
  3. import type { BatchDrawCall as BatchDrawCall_2 } from '@pixi/core/';
  4. import { BatchGeometry } from '@pixi/core';
  5. import { BLEND_MODES } from '@pixi/constants';
  6. import { Bounds } from '@pixi/display';
  7. import type { Circle } from '@pixi/math';
  8. import { Container } from '@pixi/display';
  9. import type { Ellipse } from '@pixi/math';
  10. import type { IDestroyOptions } from '@pixi/display';
  11. import type { IPointData } from '@pixi/math';
  12. import type { IShape } from '@pixi/math';
  13. import { Matrix } from '@pixi/math';
  14. import { Point } from '@pixi/math';
  15. import { Polygon } from '@pixi/math';
  16. import type { Rectangle } from '@pixi/math';
  17. import type { Renderer } from '@pixi/core';
  18. import type { RoundedRectangle } from '@pixi/math';
  19. import { Shader } from '@pixi/core';
  20. import type { SHAPES } from '@pixi/math';
  21. import { Texture } from '@pixi/core';
  22. /**
  23. * Utilities for arc curves.
  24. * @private
  25. */
  26. declare class ArcUtils {
  27. /**
  28. * The arcTo() method creates an arc/curve between two tangents on the canvas.
  29. *
  30. * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
  31. * @private
  32. * @param x1 - The x-coordinate of the beginning of the arc
  33. * @param y1 - The y-coordinate of the beginning of the arc
  34. * @param x2 - The x-coordinate of the end of the arc
  35. * @param y2 - The y-coordinate of the end of the arc
  36. * @param radius - The radius of the arc
  37. * @param points -
  38. * @returns - If the arc length is valid, return center of circle, radius and other info otherwise `null`.
  39. */
  40. static curveTo(x1: number, y1: number, x2: number, y2: number, radius: number, points: Array<number>): IArcLikeShape;
  41. /**
  42. * The arc method creates an arc/curve (used to create circles, or parts of circles).
  43. * @private
  44. * @param _startX - Start x location of arc
  45. * @param _startY - Start y location of arc
  46. * @param cx - The x-coordinate of the center of the circle
  47. * @param cy - The y-coordinate of the center of the circle
  48. * @param radius - The radius of the circle
  49. * @param startAngle - The starting angle, in radians (0 is at the 3 o'clock position
  50. * of the arc's circle)
  51. * @param endAngle - The ending angle, in radians
  52. * @param _anticlockwise - Specifies whether the drawing should be
  53. * counter-clockwise or clockwise. False is default, and indicates clockwise, while true
  54. * indicates counter-clockwise.
  55. * @param points - Collection of points to add to
  56. */
  57. static arc(_startX: number, _startY: number, cx: number, cy: number, radius: number, startAngle: number, endAngle: number, _anticlockwise: boolean, points: Array<number>): void;
  58. }
  59. /**
  60. * A structure to hold interim batch objects for Graphics.
  61. * @memberof PIXI.graphicsUtils
  62. */
  63. declare class BatchPart {
  64. style: LineStyle | FillStyle;
  65. start: number;
  66. size: number;
  67. attribStart: number;
  68. attribSize: number;
  69. constructor();
  70. /**
  71. * Begin batch part.
  72. * @param style
  73. * @param startIndex
  74. * @param attribStart
  75. */
  76. begin(style: LineStyle | FillStyle, startIndex: number, attribStart: number): void;
  77. /**
  78. * End batch part.
  79. * @param endIndex
  80. * @param endAttrib
  81. */
  82. end(endIndex: number, endAttrib: number): void;
  83. reset(): void;
  84. }
  85. /**
  86. * Utilities for bezier curves
  87. * @private
  88. */
  89. declare class BezierUtils {
  90. /**
  91. * Calculate length of bezier curve.
  92. * Analytical solution is impossible, since it involves an integral that does not integrate in general.
  93. * Therefore numerical solution is used.
  94. * @private
  95. * @param fromX - Starting point x
  96. * @param fromY - Starting point y
  97. * @param cpX - Control point x
  98. * @param cpY - Control point y
  99. * @param cpX2 - Second Control point x
  100. * @param cpY2 - Second Control point y
  101. * @param toX - Destination point x
  102. * @param toY - Destination point y
  103. * @returns - Length of bezier curve
  104. */
  105. static curveLength(fromX: number, fromY: number, cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): number;
  106. /**
  107. * Calculate the points for a bezier curve and then draws it.
  108. *
  109. * Ignored from docs since it is not directly exposed.
  110. * @ignore
  111. * @param cpX - Control point x
  112. * @param cpY - Control point y
  113. * @param cpX2 - Second Control point x
  114. * @param cpY2 - Second Control point y
  115. * @param toX - Destination point x
  116. * @param toY - Destination point y
  117. * @param points - Path array to push points into
  118. */
  119. static curveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number, points: Array<number>): void;
  120. }
  121. /**
  122. * Builds a line to draw
  123. *
  124. * Ignored from docs since it is not directly exposed.
  125. * @ignore
  126. * @private
  127. * @param {PIXI.GraphicsData} graphicsData - The graphics object containing all the necessary properties
  128. * @param {PIXI.GraphicsGeometry} graphicsGeometry - Geometry where to append output
  129. */
  130. declare function buildLine(graphicsData: GraphicsData, graphicsGeometry: GraphicsGeometry): void;
  131. /**
  132. * Fill style object for Graphics.
  133. * @memberof PIXI
  134. */
  135. export declare class FillStyle {
  136. /**
  137. * The hex color value used when coloring the Graphics object.
  138. * @default 0xFFFFFF
  139. */
  140. color: number;
  141. /** The alpha value used when filling the Graphics object. */
  142. alpha: number;
  143. /**
  144. * The texture to be used for the fill.
  145. * @default 0
  146. */
  147. texture: Texture;
  148. /**
  149. * The transform applied to the texture.
  150. * @default null
  151. */
  152. matrix: Matrix;
  153. /** If the current fill is visible. */
  154. visible: boolean;
  155. constructor();
  156. /** Clones the object */
  157. clone(): FillStyle;
  158. /** Reset */
  159. reset(): void;
  160. /** Destroy and don't use after this. */
  161. destroy(): void;
  162. }
  163. export declare interface Graphics extends GlobalMixins.Graphics, Container {
  164. }
  165. /**
  166. * The Graphics class is primarily used to render primitive shapes such as lines, circles and
  167. * rectangles to the display, and to color and fill them. However, you can also use a Graphics
  168. * object to build a list of primitives to use as a mask, or as a complex hitArea.
  169. *
  170. * Please note that due to legacy naming conventions, the behavior of some functions in this class
  171. * can be confusing. Each call to `drawRect()`, `drawPolygon()`, etc. actually stores that primitive
  172. * in the Geometry class's GraphicsGeometry object for later use in rendering or hit testing - the
  173. * functions do not directly draw anything to the screen. Similarly, the `clear()` function doesn't
  174. * change the screen, it simply resets the list of primitives, which can be useful if you want to
  175. * rebuild the contents of an existing Graphics object.
  176. *
  177. * Once a GraphicsGeometry list is built, you can re-use it in other Geometry objects as
  178. * an optimization, by passing it into a new Geometry object's constructor. Because of this
  179. * ability, it's important to call `destroy()` on Geometry objects once you are done with them, to
  180. * properly dereference each GraphicsGeometry and prevent memory leaks.
  181. * @memberof PIXI
  182. */
  183. export declare class Graphics extends Container {
  184. /**
  185. * New rendering behavior for rounded rectangles: circular arcs instead of quadratic bezier curves.
  186. * In the next major release, we'll enable this by default.
  187. */
  188. static nextRoundedRectBehavior: boolean;
  189. /**
  190. * Temporary point to use for containsPoint.
  191. * @private
  192. */
  193. static _TEMP_POINT: Point;
  194. /**
  195. * Represents the vertex and fragment shaders that processes the geometry and runs on the GPU.
  196. * Can be shared between multiple Graphics objects.
  197. */
  198. shader: Shader;
  199. /** Renderer plugin for batching */
  200. pluginName: string;
  201. /**
  202. * Current path
  203. * @readonly
  204. */
  205. currentPath: Polygon;
  206. /** A collections of batches! These can be drawn by the renderer batch system. */
  207. protected batches: Array<IGraphicsBatchElement>;
  208. /** Update dirty for limiting calculating tints for batches. */
  209. protected batchTint: number;
  210. /** Update dirty for limiting calculating batches.*/
  211. protected batchDirty: number;
  212. /** Copy of the object vertex data. */
  213. protected vertexData: Float32Array;
  214. /** Current fill style. */
  215. protected _fillStyle: FillStyle;
  216. /** Current line style. */
  217. protected _lineStyle: LineStyle;
  218. /** Current shape transform matrix. */
  219. protected _matrix: Matrix;
  220. /** Current hole mode is enabled. */
  221. protected _holeMode: boolean;
  222. protected _transformID: number;
  223. protected _tint: number;
  224. /**
  225. * Represents the WebGL state the Graphics required to render, excludes shader and geometry. E.g.,
  226. * blend mode, culling, depth testing, direction of rendering triangles, backface, etc.
  227. */
  228. private state;
  229. private _geometry;
  230. /**
  231. * Includes vertex positions, face indices, normals, colors, UVs, and
  232. * custom attributes within buffers, reducing the cost of passing all
  233. * this data to the GPU. Can be shared between multiple Mesh or Graphics objects.
  234. * @readonly
  235. */
  236. get geometry(): GraphicsGeometry;
  237. /**
  238. * @param geometry - Geometry to use, if omitted will create a new GraphicsGeometry instance.
  239. */
  240. constructor(geometry?: GraphicsGeometry);
  241. /**
  242. * Creates a new Graphics object with the same values as this one.
  243. * Note that only the geometry of the object is cloned, not its transform (position,scale,etc)
  244. * @returns - A clone of the graphics object
  245. */
  246. clone(): Graphics;
  247. /**
  248. * The blend mode to be applied to the graphic shape. Apply a value of
  249. * `PIXI.BLEND_MODES.NORMAL` to reset the blend mode. Note that, since each
  250. * primitive in the GraphicsGeometry list is rendered sequentially, modes
  251. * such as `PIXI.BLEND_MODES.ADD` and `PIXI.BLEND_MODES.MULTIPLY` will
  252. * be applied per-primitive.
  253. * @default PIXI.BLEND_MODES.NORMAL
  254. */
  255. set blendMode(value: BLEND_MODES);
  256. get blendMode(): BLEND_MODES;
  257. /**
  258. * The tint applied to each graphic shape. This is a hex value. A value of
  259. * 0xFFFFFF will remove any tint effect.
  260. * @default 0xFFFFFF
  261. */
  262. get tint(): number;
  263. set tint(value: number);
  264. /**
  265. * The current fill style.
  266. * @readonly
  267. */
  268. get fill(): FillStyle;
  269. /**
  270. * The current line style.
  271. * @readonly
  272. */
  273. get line(): LineStyle;
  274. /**
  275. * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo()
  276. * method or the drawCircle() method.
  277. * @param [width=0] - width of the line to draw, will update the objects stored style
  278. * @param [color=0x0] - color of the line to draw, will update the objects stored style
  279. * @param [alpha=1] - alpha of the line to draw, will update the objects stored style
  280. * @param [alignment=0.5] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outer).
  281. * WebGL only.
  282. * @param [native=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP
  283. * @returns - This Graphics object. Good for chaining method calls
  284. */
  285. lineStyle(width: number, color?: number, alpha?: number, alignment?: number, native?: boolean): this;
  286. /**
  287. * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo()
  288. * method or the drawCircle() method.
  289. * @param options - Line style options
  290. * @param {number} [options.width=0] - width of the line to draw, will update the objects stored style
  291. * @param {number} [options.color=0x0] - color of the line to draw, will update the objects stored style
  292. * @param {number} [options.alpha=1] - alpha of the line to draw, will update the objects stored style
  293. * @param {number} [options.alignment=0.5] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outer).
  294. * WebGL only.
  295. * @param {boolean} [options.native=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP
  296. * @param {PIXI.LINE_CAP}[options.cap=PIXI.LINE_CAP.BUTT] - line cap style
  297. * @param {PIXI.LINE_JOIN}[options.join=PIXI.LINE_JOIN.MITER] - line join style
  298. * @param {number}[options.miterLimit=10] - miter limit ratio
  299. * @returns {PIXI.Graphics} This Graphics object. Good for chaining method calls
  300. */
  301. lineStyle(options?: ILineStyleOptions): this;
  302. /**
  303. * Like line style but support texture for line fill.
  304. * @param [options] - Collection of options for setting line style.
  305. * @param {number} [options.width=0] - width of the line to draw, will update the objects stored style
  306. * @param {PIXI.Texture} [options.texture=PIXI.Texture.WHITE] - Texture to use
  307. * @param {number} [options.color=0x0] - color of the line to draw, will update the objects stored style.
  308. * Default 0xFFFFFF if texture present.
  309. * @param {number} [options.alpha=1] - alpha of the line to draw, will update the objects stored style
  310. * @param {PIXI.Matrix} [options.matrix=null] - Texture matrix to transform texture
  311. * @param {number} [options.alignment=0.5] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outer).
  312. * WebGL only.
  313. * @param {boolean} [options.native=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP
  314. * @param {PIXI.LINE_CAP}[options.cap=PIXI.LINE_CAP.BUTT] - line cap style
  315. * @param {PIXI.LINE_JOIN}[options.join=PIXI.LINE_JOIN.MITER] - line join style
  316. * @param {number}[options.miterLimit=10] - miter limit ratio
  317. * @returns {PIXI.Graphics} This Graphics object. Good for chaining method calls
  318. */
  319. lineTextureStyle(options?: ILineStyleOptions): this;
  320. /**
  321. * Start a polygon object internally.
  322. * @protected
  323. */
  324. protected startPoly(): void;
  325. /**
  326. * Finish the polygon object.
  327. * @protected
  328. */
  329. finishPoly(): void;
  330. /**
  331. * Moves the current drawing position to x, y.
  332. * @param x - the X coordinate to move to
  333. * @param y - the Y coordinate to move to
  334. * @returns - This Graphics object. Good for chaining method calls
  335. */
  336. moveTo(x: number, y: number): this;
  337. /**
  338. * Draws a line using the current line style from the current drawing position to (x, y);
  339. * The current drawing position is then set to (x, y).
  340. * @param x - the X coordinate to draw to
  341. * @param y - the Y coordinate to draw to
  342. * @returns - This Graphics object. Good for chaining method calls
  343. */
  344. lineTo(x: number, y: number): this;
  345. /**
  346. * Initialize the curve
  347. * @param x
  348. * @param y
  349. */
  350. protected _initCurve(x?: number, y?: number): void;
  351. /**
  352. * Calculate the points for a quadratic bezier curve and then draws it.
  353. * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
  354. * @param cpX - Control point x
  355. * @param cpY - Control point y
  356. * @param toX - Destination point x
  357. * @param toY - Destination point y
  358. * @returns - This Graphics object. Good for chaining method calls
  359. */
  360. quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): this;
  361. /**
  362. * Calculate the points for a bezier curve and then draws it.
  363. * @param cpX - Control point x
  364. * @param cpY - Control point y
  365. * @param cpX2 - Second Control point x
  366. * @param cpY2 - Second Control point y
  367. * @param toX - Destination point x
  368. * @param toY - Destination point y
  369. * @returns This Graphics object. Good for chaining method calls
  370. */
  371. bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): this;
  372. /**
  373. * The arcTo() method creates an arc/curve between two tangents on the canvas.
  374. *
  375. * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
  376. * @param x1 - The x-coordinate of the first tangent point of the arc
  377. * @param y1 - The y-coordinate of the first tangent point of the arc
  378. * @param x2 - The x-coordinate of the end of the arc
  379. * @param y2 - The y-coordinate of the end of the arc
  380. * @param radius - The radius of the arc
  381. * @returns - This Graphics object. Good for chaining method calls
  382. */
  383. arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
  384. /**
  385. * The arc method creates an arc/curve (used to create circles, or parts of circles).
  386. * @param cx - The x-coordinate of the center of the circle
  387. * @param cy - The y-coordinate of the center of the circle
  388. * @param radius - The radius of the circle
  389. * @param startAngle - The starting angle, in radians (0 is at the 3 o'clock position
  390. * of the arc's circle)
  391. * @param endAngle - The ending angle, in radians
  392. * @param anticlockwise - Specifies whether the drawing should be
  393. * counter-clockwise or clockwise. False is default, and indicates clockwise, while true
  394. * indicates counter-clockwise.
  395. * @returns - This Graphics object. Good for chaining method calls
  396. */
  397. arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): this;
  398. /**
  399. * Specifies a simple one-color fill that subsequent calls to other Graphics methods
  400. * (such as lineTo() or drawCircle()) use when drawing.
  401. * @param color - the color of the fill
  402. * @param alpha - the alpha of the fill
  403. * @returns - This Graphics object. Good for chaining method calls
  404. */
  405. beginFill(color?: number, alpha?: number): this;
  406. /**
  407. * Begin the texture fill
  408. * @param options - Object object.
  409. * @param {PIXI.Texture} [options.texture=PIXI.Texture.WHITE] - Texture to fill
  410. * @param {number} [options.color=0xffffff] - Background to fill behind texture
  411. * @param {number} [options.alpha=1] - Alpha of fill
  412. * @param {PIXI.Matrix} [options.matrix=null] - Transform matrix
  413. * @returns {PIXI.Graphics} This Graphics object. Good for chaining method calls
  414. */
  415. beginTextureFill(options?: IFillStyleOptions): this;
  416. /**
  417. * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
  418. * @returns - This Graphics object. Good for chaining method calls
  419. */
  420. endFill(): this;
  421. /**
  422. * Draws a rectangle shape.
  423. * @param x - The X coord of the top-left of the rectangle
  424. * @param y - The Y coord of the top-left of the rectangle
  425. * @param width - The width of the rectangle
  426. * @param height - The height of the rectangle
  427. * @returns - This Graphics object. Good for chaining method calls
  428. */
  429. drawRect(x: number, y: number, width: number, height: number): this;
  430. /**
  431. * Draw a rectangle shape with rounded/beveled corners.
  432. * @param x - The X coord of the top-left of the rectangle
  433. * @param y - The Y coord of the top-left of the rectangle
  434. * @param width - The width of the rectangle
  435. * @param height - The height of the rectangle
  436. * @param radius - Radius of the rectangle corners
  437. * @returns - This Graphics object. Good for chaining method calls
  438. */
  439. drawRoundedRect(x: number, y: number, width: number, height: number, radius: number): this;
  440. /**
  441. * Draws a circle.
  442. * @param x - The X coordinate of the center of the circle
  443. * @param y - The Y coordinate of the center of the circle
  444. * @param radius - The radius of the circle
  445. * @returns - This Graphics object. Good for chaining method calls
  446. */
  447. drawCircle(x: number, y: number, radius: number): this;
  448. /**
  449. * Draws an ellipse.
  450. * @param x - The X coordinate of the center of the ellipse
  451. * @param y - The Y coordinate of the center of the ellipse
  452. * @param width - The half width of the ellipse
  453. * @param height - The half height of the ellipse
  454. * @returns - This Graphics object. Good for chaining method calls
  455. */
  456. drawEllipse(x: number, y: number, width: number, height: number): this;
  457. drawPolygon(...path: Array<number> | Array<IPointData>): this;
  458. drawPolygon(path: Array<number> | Array<IPointData> | Polygon): this;
  459. /**
  460. * Draw any shape.
  461. * @param {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} shape - Shape to draw
  462. * @returns - This Graphics object. Good for chaining method calls
  463. */
  464. drawShape(shape: IShape): this;
  465. /**
  466. * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
  467. * @returns - This Graphics object. Good for chaining method calls
  468. */
  469. clear(): this;
  470. /**
  471. * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and
  472. * masked with gl.scissor.
  473. * @returns - True if only 1 rect.
  474. */
  475. isFastRect(): boolean;
  476. /**
  477. * Renders the object using the WebGL renderer
  478. * @param renderer - The renderer
  479. */
  480. protected _render(renderer: Renderer): void;
  481. /** Populating batches for rendering. */
  482. protected _populateBatches(): void;
  483. /**
  484. * Renders the batches using the BathedRenderer plugin
  485. * @param renderer - The renderer
  486. */
  487. protected _renderBatched(renderer: Renderer): void;
  488. /**
  489. * Renders the graphics direct
  490. * @param renderer - The renderer
  491. */
  492. protected _renderDirect(renderer: Renderer): void;
  493. /**
  494. * Renders specific DrawCall
  495. * @param renderer
  496. * @param drawCall
  497. */
  498. protected _renderDrawCallDirect(renderer: Renderer, drawCall: BatchDrawCall): void;
  499. /**
  500. * Resolves shader for direct rendering
  501. * @param renderer - The renderer
  502. */
  503. protected _resolveDirectShader(renderer: Renderer): Shader;
  504. /** Retrieves the bounds of the graphic shape as a rectangle object. */
  505. protected _calculateBounds(): void;
  506. /**
  507. * Tests if a point is inside this graphics object
  508. * @param point - the point to test
  509. * @returns - the result of the test
  510. */
  511. containsPoint(point: IPointData): boolean;
  512. /** Recalculate the tint by applying tint to batches using Graphics tint. */
  513. protected calculateTints(): void;
  514. /** If there's a transform update or a change to the shape of the geometry, recalculate the vertices. */
  515. protected calculateVertices(): void;
  516. /**
  517. * Closes the current path.
  518. * @returns - Returns itself.
  519. */
  520. closePath(): this;
  521. /**
  522. * Apply a matrix to the positional data.
  523. * @param matrix - Matrix to use for transform current shape.
  524. * @returns - Returns itself.
  525. */
  526. setMatrix(matrix: Matrix): this;
  527. /**
  528. * Begin adding holes to the last draw shape
  529. * IMPORTANT: holes must be fully inside a shape to work
  530. * Also weirdness ensues if holes overlap!
  531. * Ellipses, Circles, Rectangles and Rounded Rectangles cannot be holes or host for holes in CanvasRenderer,
  532. * please use `moveTo` `lineTo`, `quadraticCurveTo` if you rely on pixi-legacy bundle.
  533. * @returns - Returns itself.
  534. */
  535. beginHole(): this;
  536. /**
  537. * End adding holes to the last draw shape.
  538. * @returns - Returns itself.
  539. */
  540. endHole(): this;
  541. /**
  542. * Destroys the Graphics object.
  543. * @param options - Options parameter. A boolean will act as if all
  544. * options have been set to that value
  545. * @param {boolean} [options.children=false] - if set to true, all the children will have
  546. * their destroy method called as well. 'options' will be passed on to those calls.
  547. * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true
  548. * Should it destroy the texture of the child sprite
  549. * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true
  550. * Should it destroy the base texture of the child sprite
  551. */
  552. destroy(options?: IDestroyOptions | boolean): void;
  553. }
  554. /**
  555. * Graphics curves resolution settings. If `adaptive` flag is set to `true`,
  556. * the resolution is calculated based on the curve's length to ensure better visual quality.
  557. * Adaptive draw works with `bezierCurveTo` and `quadraticCurveTo`.
  558. * @static
  559. * @constant
  560. * @memberof PIXI
  561. * @name GRAPHICS_CURVES
  562. * @type {object}
  563. * @property {boolean} [adaptive=true] - flag indicating if the resolution should be adaptive
  564. * @property {number} [maxLength=10] - maximal length of a single segment of the curve (if adaptive = false, ignored)
  565. * @property {number} [minSegments=8] - minimal number of segments in the curve (if adaptive = false, ignored)
  566. * @property {number} [maxSegments=2048] - maximal number of segments in the curve (if adaptive = false, ignored)
  567. */
  568. export declare const GRAPHICS_CURVES: IGraphicsCurvesSettings;
  569. /**
  570. * A class to contain data useful for Graphics objects
  571. * @memberof PIXI
  572. */
  573. export declare class GraphicsData {
  574. /**
  575. * The shape object to draw.
  576. * @member {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle}
  577. */
  578. shape: IShape;
  579. /** The style of the line. */
  580. lineStyle: LineStyle;
  581. /** The style of the fill. */
  582. fillStyle: FillStyle;
  583. /** The transform matrix. */
  584. matrix: Matrix;
  585. /** The type of the shape, see the Const.Shapes file for all the existing types, */
  586. type: SHAPES;
  587. /** The collection of points. */
  588. points: number[];
  589. /** The collection of holes. */
  590. holes: Array<GraphicsData>;
  591. /**
  592. * @param {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} shape - The shape object to draw.
  593. * @param fillStyle - the width of the line to draw
  594. * @param lineStyle - the color of the line to draw
  595. * @param matrix - Transform matrix
  596. */
  597. constructor(shape: IShape, fillStyle?: FillStyle, lineStyle?: LineStyle, matrix?: Matrix);
  598. /**
  599. * Creates a new GraphicsData object with the same values as this one.
  600. * @returns - Cloned GraphicsData object
  601. */
  602. clone(): GraphicsData;
  603. /** Destroys the Graphics data. */
  604. destroy(): void;
  605. }
  606. /**
  607. * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
  608. * rectangles to the display, and to color and fill them.
  609. *
  610. * GraphicsGeometry is designed to not be continually updating the geometry since it's expensive
  611. * to re-tesselate using **earcut**. Consider using {@link PIXI.Mesh} for this use-case, it's much faster.
  612. * @memberof PIXI
  613. */
  614. export declare class GraphicsGeometry extends BatchGeometry {
  615. /**
  616. * The maximum number of points to consider an object "batchable",
  617. * able to be batched by the renderer's batch system.
  618. \
  619. */
  620. static BATCHABLE_SIZE: number;
  621. /** Minimal distance between points that are considered different. Affects line tesselation. */
  622. closePointEps: number;
  623. /** Padding to add to the bounds. */
  624. boundsPadding: number;
  625. uvsFloat32: Float32Array;
  626. indicesUint16: Uint16Array | Uint32Array;
  627. batchable: boolean;
  628. /** An array of points to draw, 2 numbers per point */
  629. points: number[];
  630. /** The collection of colors */
  631. colors: number[];
  632. /** The UVs collection */
  633. uvs: number[];
  634. /** The indices of the vertices */
  635. indices: number[];
  636. /** Reference to the texture IDs. */
  637. textureIds: number[];
  638. /**
  639. * The collection of drawn shapes.
  640. * @member {PIXI.GraphicsData[]}
  641. */
  642. graphicsData: Array<GraphicsData>;
  643. /**
  644. * List of current draw calls drived from the batches.
  645. * @member {PIXI.BatchDrawCall[]}
  646. */
  647. drawCalls: Array<BatchDrawCall>;
  648. /** Batches need to regenerated if the geometry is updated. */
  649. batchDirty: number;
  650. /**
  651. * Intermediate abstract format sent to batch system.
  652. * Can be converted to drawCalls or to batchable objects.
  653. * @member {PIXI.graphicsUtils.BatchPart[]}
  654. */
  655. batches: Array<BatchPart>;
  656. /** Used to detect if the graphics object has changed. */
  657. protected dirty: number;
  658. /** Used to check if the cache is dirty. */
  659. protected cacheDirty: number;
  660. /** Used to detect if we cleared the graphicsData. */
  661. protected clearDirty: number;
  662. /** Index of the last batched shape in the stack of calls. */
  663. protected shapeIndex: number;
  664. /** Cached bounds. */
  665. protected _bounds: Bounds;
  666. /** The bounds dirty flag. */
  667. protected boundsDirty: number;
  668. constructor();
  669. /**
  670. * Get the current bounds of the graphic geometry.
  671. * @readonly
  672. */
  673. get bounds(): Bounds;
  674. /** Call if you changed graphicsData manually. Empties all batch buffers. */
  675. protected invalidate(): void;
  676. /**
  677. * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
  678. * @returns - This GraphicsGeometry object. Good for chaining method calls
  679. */
  680. clear(): GraphicsGeometry;
  681. /**
  682. * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
  683. * @param {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} shape - The shape object to draw.
  684. * @param fillStyle - Defines style of the fill.
  685. * @param lineStyle - Defines style of the lines.
  686. * @param matrix - Transform applied to the points of the shape.
  687. * @returns - Returns geometry for chaining.
  688. */
  689. drawShape(shape: IShape_2, fillStyle?: FillStyle, lineStyle?: LineStyle, matrix?: Matrix): GraphicsGeometry;
  690. /**
  691. * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
  692. * @param {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} shape - The shape object to draw.
  693. * @param matrix - Transform applied to the points of the shape.
  694. * @returns - Returns geometry for chaining.
  695. */
  696. drawHole(shape: IShape_2, matrix?: Matrix): GraphicsGeometry;
  697. /** Destroys the GraphicsGeometry object. */
  698. destroy(): void;
  699. /**
  700. * Check to see if a point is contained within this geometry.
  701. * @param point - Point to check if it's contained.
  702. * @returns {boolean} `true` if the point is contained within geometry.
  703. */
  704. containsPoint(point: IPointData): boolean;
  705. /**
  706. * Generates intermediate batch data. Either gets converted to drawCalls
  707. * or used to convert to batch objects directly by the Graphics object.
  708. */
  709. updateBatches(): void;
  710. /**
  711. * Affinity check
  712. * @param styleA
  713. * @param styleB
  714. */
  715. protected _compareStyles(styleA: FillStyle | LineStyle, styleB: FillStyle | LineStyle): boolean;
  716. /** Test geometry for batching process. */
  717. protected validateBatching(): boolean;
  718. /** Offset the indices so that it works with the batcher. */
  719. protected packBatches(): void;
  720. /**
  721. * Checks to see if this graphics geometry can be batched.
  722. * Currently it needs to be small enough and not contain any native lines.
  723. */
  724. protected isBatchable(): boolean;
  725. /** Converts intermediate batches data to drawCalls. */
  726. protected buildDrawCalls(): void;
  727. /** Packs attributes to single buffer. */
  728. protected packAttributes(): void;
  729. /**
  730. * Process fill part of Graphics.
  731. * @param data
  732. */
  733. protected processFill(data: GraphicsData): void;
  734. /**
  735. * Process line part of Graphics.
  736. * @param data
  737. */
  738. protected processLine(data: GraphicsData): void;
  739. /**
  740. * Process the holes data.
  741. * @param holes
  742. */
  743. protected processHoles(holes: Array<GraphicsData>): void;
  744. /** Update the local bounds of the object. Expensive to use performance-wise. */
  745. protected calculateBounds(): void;
  746. /**
  747. * Transform points using matrix.
  748. * @param points - Points to transform
  749. * @param matrix - Transform matrix
  750. */
  751. protected transformPoints(points: Array<number>, matrix: Matrix): void;
  752. /**
  753. * Add colors.
  754. * @param colors - List of colors to add to
  755. * @param color - Color to add
  756. * @param alpha - Alpha to use
  757. * @param size - Number of colors to add
  758. * @param offset
  759. */
  760. protected addColors(colors: Array<number>, color: number, alpha: number, size: number, offset?: number): void;
  761. /**
  762. * Add texture id that the shader/fragment wants to use.
  763. * @param textureIds
  764. * @param id
  765. * @param size
  766. * @param offset
  767. */
  768. protected addTextureIds(textureIds: Array<number>, id: number, size: number, offset?: number): void;
  769. /**
  770. * Generates the UVs for a shape.
  771. * @param verts - Vertices
  772. * @param uvs - UVs
  773. * @param texture - Reference to Texture
  774. * @param start - Index buffer start index.
  775. * @param size - The size/length for index buffer.
  776. * @param matrix - Optional transform for all points.
  777. */
  778. protected addUvs(verts: Array<number>, uvs: Array<number>, texture: Texture, start: number, size: number, matrix?: Matrix): void;
  779. /**
  780. * Modify uvs array according to position of texture region
  781. * Does not work with rotated or trimmed textures
  782. * @param uvs - array
  783. * @param texture - region
  784. * @param start - starting index for uvs
  785. * @param size - how many points to adjust
  786. */
  787. protected adjustUvs(uvs: Array<number>, texture: Texture, start: number, size: number): void;
  788. }
  789. export declare const graphicsUtils: {
  790. buildPoly: IShapeBuildCommand;
  791. buildCircle: IShapeBuildCommand;
  792. buildRectangle: IShapeBuildCommand;
  793. buildRoundedRectangle: IShapeBuildCommand;
  794. buildLine: typeof buildLine;
  795. ArcUtils: typeof ArcUtils;
  796. BezierUtils: typeof BezierUtils;
  797. QuadraticUtils: typeof QuadraticUtils;
  798. BatchPart: typeof BatchPart;
  799. FILL_COMMANDS: Record<SHAPES, IShapeBuildCommand>;
  800. BATCH_POOL: BatchPart[];
  801. DRAW_CALL_POOL: BatchDrawCall_2[];
  802. };
  803. declare interface IArcLikeShape {
  804. cx: number;
  805. cy: number;
  806. radius: number;
  807. startAngle: number;
  808. endAngle: number;
  809. anticlockwise: boolean;
  810. }
  811. export declare interface IFillStyleOptions {
  812. color?: number;
  813. alpha?: number;
  814. texture?: Texture;
  815. matrix?: Matrix;
  816. }
  817. /** Batch element computed from Graphics geometry */
  818. export declare interface IGraphicsBatchElement {
  819. vertexData: Float32Array;
  820. blendMode: BLEND_MODES;
  821. indices: Uint16Array | Uint32Array;
  822. uvs: Float32Array;
  823. alpha: number;
  824. worldAlpha: number;
  825. _batchRGB: number[];
  826. _tintRGB: number;
  827. _texture: Texture;
  828. }
  829. export declare interface IGraphicsCurvesSettings {
  830. adaptive: boolean;
  831. maxLength: number;
  832. minSegments: number;
  833. maxSegments: number;
  834. epsilon: number;
  835. _segmentsCount(length: number, defaultSegments?: number): number;
  836. }
  837. export declare interface ILineStyleOptions extends IFillStyleOptions {
  838. width?: number;
  839. alignment?: number;
  840. native?: boolean;
  841. cap?: LINE_CAP;
  842. join?: LINE_JOIN;
  843. miterLimit?: number;
  844. }
  845. declare type IShape_2 = Circle | Ellipse | Polygon | Rectangle | RoundedRectangle;
  846. declare interface IShapeBuildCommand {
  847. build(graphicsData: GraphicsData): void;
  848. triangulate(graphicsData: GraphicsData, target: GraphicsGeometry): void;
  849. }
  850. /**
  851. * Support line caps in `PIXI.LineStyle` for graphics.
  852. * @see PIXI.Graphics#lineStyle
  853. * @name LINE_CAP
  854. * @memberof PIXI
  855. * @static
  856. * @enum {string}
  857. * @property {string} BUTT - 'butt': don't add any cap at line ends (leaves orthogonal edges)
  858. * @property {string} ROUND - 'round': add semicircle at ends
  859. * @property {string} SQUARE - 'square': add square at end (like `BUTT` except more length at end)
  860. */
  861. export declare enum LINE_CAP {
  862. BUTT = "butt",
  863. ROUND = "round",
  864. SQUARE = "square"
  865. }
  866. /**
  867. * Supported line joints in `PIXI.LineStyle` for graphics.
  868. * @see PIXI.Graphics#lineStyle
  869. * @see https://graphicdesign.stackexchange.com/questions/59018/what-is-a-bevel-join-of-two-lines-exactly-illustrator
  870. * @name LINE_JOIN
  871. * @memberof PIXI
  872. * @static
  873. * @enum {string}
  874. * @property {string} MITER - 'miter': make a sharp corner where outer part of lines meet
  875. * @property {string} BEVEL - 'bevel': add a square butt at each end of line segment and fill the triangle at turn
  876. * @property {string} ROUND - 'round': add an arc at the joint
  877. */
  878. export declare enum LINE_JOIN {
  879. MITER = "miter",
  880. BEVEL = "bevel",
  881. ROUND = "round"
  882. }
  883. /**
  884. * Represents the line style for Graphics.
  885. * @memberof PIXI
  886. */
  887. export declare class LineStyle extends FillStyle {
  888. /** The width (thickness) of any lines drawn. */
  889. width: number;
  890. /** The alignment of any lines drawn (0.5 = middle, 1 = outer, 0 = inner). WebGL only. */
  891. alignment: number;
  892. /** If true the lines will be draw using LINES instead of TRIANGLE_STRIP. */
  893. native: boolean;
  894. /**
  895. * Line cap style.
  896. * @member {PIXI.LINE_CAP}
  897. * @default PIXI.LINE_CAP.BUTT
  898. */
  899. cap: LINE_CAP;
  900. /**
  901. * Line join style.
  902. * @member {PIXI.LINE_JOIN}
  903. * @default PIXI.LINE_JOIN.MITER
  904. */
  905. join: LINE_JOIN;
  906. /** Miter limit. */
  907. miterLimit: number;
  908. /** Clones the object. */
  909. clone(): LineStyle;
  910. /** Reset the line style to default. */
  911. reset(): void;
  912. }
  913. /**
  914. * Utilities for quadratic curves.
  915. * @private
  916. */
  917. declare class QuadraticUtils {
  918. /**
  919. * Calculate length of quadratic curve
  920. * @see {@link http://www.malczak.linuxpl.com/blog/quadratic-bezier-curve-length/}
  921. * for the detailed explanation of math behind this.
  922. * @private
  923. * @param fromX - x-coordinate of curve start point
  924. * @param fromY - y-coordinate of curve start point
  925. * @param cpX - x-coordinate of curve control point
  926. * @param cpY - y-coordinate of curve control point
  927. * @param toX - x-coordinate of curve end point
  928. * @param toY - y-coordinate of curve end point
  929. * @returns - Length of quadratic curve
  930. */
  931. static curveLength(fromX: number, fromY: number, cpX: number, cpY: number, toX: number, toY: number): number;
  932. /**
  933. * Calculate the points for a quadratic bezier curve and then draws it.
  934. * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
  935. * @private
  936. * @param cpX - Control point x
  937. * @param cpY - Control point y
  938. * @param toX - Destination point x
  939. * @param toY - Destination point y
  940. * @param points - Points to add segments to.
  941. */
  942. static curveTo(cpX: number, cpY: number, toX: number, toY: number, points: Array<number>): void;
  943. }
  944. export { }