graphics.js 131 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123
  1. /*!
  2. * @pixi/graphics - v6.5.10
  3. * Compiled Thu, 06 Jul 2023 15:25:11 UTC
  4. *
  5. * @pixi/graphics is licensed under the MIT License.
  6. * http://www.opensource.org/licenses/mit-license
  7. */
  8. this.PIXI = this.PIXI || {};
  9. var _pixi_graphics = (function (exports, core, math, utils, constants, display) {
  10. 'use strict';
  11. /**
  12. * Supported line joints in `PIXI.LineStyle` for graphics.
  13. * @see PIXI.Graphics#lineStyle
  14. * @see https://graphicdesign.stackexchange.com/questions/59018/what-is-a-bevel-join-of-two-lines-exactly-illustrator
  15. * @name LINE_JOIN
  16. * @memberof PIXI
  17. * @static
  18. * @enum {string}
  19. * @property {string} MITER - 'miter': make a sharp corner where outer part of lines meet
  20. * @property {string} BEVEL - 'bevel': add a square butt at each end of line segment and fill the triangle at turn
  21. * @property {string} ROUND - 'round': add an arc at the joint
  22. */
  23. exports.LINE_JOIN = void 0;
  24. (function (LINE_JOIN) {
  25. LINE_JOIN["MITER"] = "miter";
  26. LINE_JOIN["BEVEL"] = "bevel";
  27. LINE_JOIN["ROUND"] = "round";
  28. })(exports.LINE_JOIN || (exports.LINE_JOIN = {}));
  29. /**
  30. * Support line caps in `PIXI.LineStyle` for graphics.
  31. * @see PIXI.Graphics#lineStyle
  32. * @name LINE_CAP
  33. * @memberof PIXI
  34. * @static
  35. * @enum {string}
  36. * @property {string} BUTT - 'butt': don't add any cap at line ends (leaves orthogonal edges)
  37. * @property {string} ROUND - 'round': add semicircle at ends
  38. * @property {string} SQUARE - 'square': add square at end (like `BUTT` except more length at end)
  39. */
  40. exports.LINE_CAP = void 0;
  41. (function (LINE_CAP) {
  42. LINE_CAP["BUTT"] = "butt";
  43. LINE_CAP["ROUND"] = "round";
  44. LINE_CAP["SQUARE"] = "square";
  45. })(exports.LINE_CAP || (exports.LINE_CAP = {}));
  46. /**
  47. * Graphics curves resolution settings. If `adaptive` flag is set to `true`,
  48. * the resolution is calculated based on the curve's length to ensure better visual quality.
  49. * Adaptive draw works with `bezierCurveTo` and `quadraticCurveTo`.
  50. * @static
  51. * @constant
  52. * @memberof PIXI
  53. * @name GRAPHICS_CURVES
  54. * @type {object}
  55. * @property {boolean} [adaptive=true] - flag indicating if the resolution should be adaptive
  56. * @property {number} [maxLength=10] - maximal length of a single segment of the curve (if adaptive = false, ignored)
  57. * @property {number} [minSegments=8] - minimal number of segments in the curve (if adaptive = false, ignored)
  58. * @property {number} [maxSegments=2048] - maximal number of segments in the curve (if adaptive = false, ignored)
  59. */
  60. var GRAPHICS_CURVES = {
  61. adaptive: true,
  62. maxLength: 10,
  63. minSegments: 8,
  64. maxSegments: 2048,
  65. epsilon: 0.0001,
  66. _segmentsCount: function (length, defaultSegments) {
  67. if (defaultSegments === void 0) { defaultSegments = 20; }
  68. if (!this.adaptive || !length || isNaN(length)) {
  69. return defaultSegments;
  70. }
  71. var result = Math.ceil(length / this.maxLength);
  72. if (result < this.minSegments) {
  73. result = this.minSegments;
  74. }
  75. else if (result > this.maxSegments) {
  76. result = this.maxSegments;
  77. }
  78. return result;
  79. },
  80. };
  81. /**
  82. * Fill style object for Graphics.
  83. * @memberof PIXI
  84. */
  85. var FillStyle = /** @class */ (function () {
  86. function FillStyle() {
  87. /**
  88. * The hex color value used when coloring the Graphics object.
  89. * @default 0xFFFFFF
  90. */
  91. this.color = 0xFFFFFF;
  92. /** The alpha value used when filling the Graphics object. */
  93. this.alpha = 1.0;
  94. /**
  95. * The texture to be used for the fill.
  96. * @default 0
  97. */
  98. this.texture = core.Texture.WHITE;
  99. /**
  100. * The transform applied to the texture.
  101. * @default null
  102. */
  103. this.matrix = null;
  104. /** If the current fill is visible. */
  105. this.visible = false;
  106. this.reset();
  107. }
  108. /** Clones the object */
  109. FillStyle.prototype.clone = function () {
  110. var obj = new FillStyle();
  111. obj.color = this.color;
  112. obj.alpha = this.alpha;
  113. obj.texture = this.texture;
  114. obj.matrix = this.matrix;
  115. obj.visible = this.visible;
  116. return obj;
  117. };
  118. /** Reset */
  119. FillStyle.prototype.reset = function () {
  120. this.color = 0xFFFFFF;
  121. this.alpha = 1;
  122. this.texture = core.Texture.WHITE;
  123. this.matrix = null;
  124. this.visible = false;
  125. };
  126. /** Destroy and don't use after this. */
  127. FillStyle.prototype.destroy = function () {
  128. this.texture = null;
  129. this.matrix = null;
  130. };
  131. return FillStyle;
  132. }());
  133. /*! *****************************************************************************
  134. Copyright (c) Microsoft Corporation.
  135. Permission to use, copy, modify, and/or distribute this software for any
  136. purpose with or without fee is hereby granted.
  137. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
  138. REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
  139. AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
  140. INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
  141. LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
  142. OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
  143. PERFORMANCE OF THIS SOFTWARE.
  144. ***************************************************************************** */
  145. /* global Reflect, Promise */
  146. var extendStatics = function(d, b) {
  147. extendStatics = Object.setPrototypeOf ||
  148. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  149. function (d, b) { for (var p in b) { if (b.hasOwnProperty(p)) { d[p] = b[p]; } } };
  150. return extendStatics(d, b);
  151. };
  152. function __extends(d, b) {
  153. extendStatics(d, b);
  154. function __() { this.constructor = d; }
  155. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  156. }
  157. var __assign = function() {
  158. __assign = Object.assign || function __assign(t) {
  159. var arguments$1 = arguments;
  160. for (var s, i = 1, n = arguments.length; i < n; i++) {
  161. s = arguments$1[i];
  162. for (var p in s) { if (Object.prototype.hasOwnProperty.call(s, p)) { t[p] = s[p]; } }
  163. }
  164. return t;
  165. };
  166. return __assign.apply(this, arguments);
  167. };
  168. function __rest(s, e) {
  169. var t = {};
  170. for (var p in s) { if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
  171. { t[p] = s[p]; } }
  172. if (s != null && typeof Object.getOwnPropertySymbols === "function")
  173. { for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  174. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
  175. { t[p[i]] = s[p[i]]; }
  176. } }
  177. return t;
  178. }
  179. function __decorate(decorators, target, key, desc) {
  180. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  181. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
  182. else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
  183. return c > 3 && r && Object.defineProperty(target, key, r), r;
  184. }
  185. function __param(paramIndex, decorator) {
  186. return function (target, key) { decorator(target, key, paramIndex); }
  187. }
  188. function __metadata(metadataKey, metadataValue) {
  189. if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(metadataKey, metadataValue); }
  190. }
  191. function __awaiter(thisArg, _arguments, P, generator) {
  192. function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
  193. return new (P || (P = Promise))(function (resolve, reject) {
  194. function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
  195. function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
  196. function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
  197. step((generator = generator.apply(thisArg, _arguments || [])).next());
  198. });
  199. }
  200. function __generator(thisArg, body) {
  201. var _ = { label: 0, sent: function() { if (t[0] & 1) { throw t[1]; } return t[1]; }, trys: [], ops: [] }, f, y, t, g;
  202. return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
  203. function verb(n) { return function (v) { return step([n, v]); }; }
  204. function step(op) {
  205. if (f) { throw new TypeError("Generator is already executing."); }
  206. while (_) { try {
  207. if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) { return t; }
  208. if (y = 0, t) { op = [op[0] & 2, t.value]; }
  209. switch (op[0]) {
  210. case 0: case 1: t = op; break;
  211. case 4: _.label++; return { value: op[1], done: false };
  212. case 5: _.label++; y = op[1]; op = [0]; continue;
  213. case 7: op = _.ops.pop(); _.trys.pop(); continue;
  214. default:
  215. if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
  216. if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
  217. if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
  218. if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
  219. if (t[2]) { _.ops.pop(); }
  220. _.trys.pop(); continue;
  221. }
  222. op = body.call(thisArg, _);
  223. } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } }
  224. if (op[0] & 5) { throw op[1]; } return { value: op[0] ? op[1] : void 0, done: true };
  225. }
  226. }
  227. function __createBinding(o, m, k, k2) {
  228. if (k2 === undefined) { k2 = k; }
  229. o[k2] = m[k];
  230. }
  231. function __exportStar(m, exports) {
  232. for (var p in m) { if (p !== "default" && !exports.hasOwnProperty(p)) { exports[p] = m[p]; } }
  233. }
  234. function __values(o) {
  235. var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
  236. if (m) { return m.call(o); }
  237. if (o && typeof o.length === "number") { return {
  238. next: function () {
  239. if (o && i >= o.length) { o = void 0; }
  240. return { value: o && o[i++], done: !o };
  241. }
  242. }; }
  243. throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
  244. }
  245. function __read(o, n) {
  246. var m = typeof Symbol === "function" && o[Symbol.iterator];
  247. if (!m) { return o; }
  248. var i = m.call(o), r, ar = [], e;
  249. try {
  250. while ((n === void 0 || n-- > 0) && !(r = i.next()).done) { ar.push(r.value); }
  251. }
  252. catch (error) { e = { error: error }; }
  253. finally {
  254. try {
  255. if (r && !r.done && (m = i["return"])) { m.call(i); }
  256. }
  257. finally { if (e) { throw e.error; } }
  258. }
  259. return ar;
  260. }
  261. function __spread() {
  262. var arguments$1 = arguments;
  263. for (var ar = [], i = 0; i < arguments.length; i++)
  264. { ar = ar.concat(__read(arguments$1[i])); }
  265. return ar;
  266. }
  267. function __spreadArrays() {
  268. var arguments$1 = arguments;
  269. for (var s = 0, i = 0, il = arguments.length; i < il; i++) { s += arguments$1[i].length; }
  270. for (var r = Array(s), k = 0, i = 0; i < il; i++)
  271. { for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
  272. { r[k] = a[j]; } }
  273. return r;
  274. };
  275. function __await(v) {
  276. return this instanceof __await ? (this.v = v, this) : new __await(v);
  277. }
  278. function __asyncGenerator(thisArg, _arguments, generator) {
  279. if (!Symbol.asyncIterator) { throw new TypeError("Symbol.asyncIterator is not defined."); }
  280. var g = generator.apply(thisArg, _arguments || []), i, q = [];
  281. return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
  282. function verb(n) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; } }
  283. function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
  284. function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
  285. function fulfill(value) { resume("next", value); }
  286. function reject(value) { resume("throw", value); }
  287. function settle(f, v) { if (f(v), q.shift(), q.length) { resume(q[0][0], q[0][1]); } }
  288. }
  289. function __asyncDelegator(o) {
  290. var i, p;
  291. return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
  292. function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
  293. }
  294. function __asyncValues(o) {
  295. if (!Symbol.asyncIterator) { throw new TypeError("Symbol.asyncIterator is not defined."); }
  296. var m = o[Symbol.asyncIterator], i;
  297. return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
  298. function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
  299. function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
  300. }
  301. function __makeTemplateObject(cooked, raw) {
  302. if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
  303. return cooked;
  304. };
  305. function __importStar(mod) {
  306. if (mod && mod.__esModule) { return mod; }
  307. var result = {};
  308. if (mod != null) { for (var k in mod) { if (Object.hasOwnProperty.call(mod, k)) { result[k] = mod[k]; } } }
  309. result.default = mod;
  310. return result;
  311. }
  312. function __importDefault(mod) {
  313. return (mod && mod.__esModule) ? mod : { default: mod };
  314. }
  315. function __classPrivateFieldGet(receiver, privateMap) {
  316. if (!privateMap.has(receiver)) {
  317. throw new TypeError("attempted to get private field on non-instance");
  318. }
  319. return privateMap.get(receiver);
  320. }
  321. function __classPrivateFieldSet(receiver, privateMap, value) {
  322. if (!privateMap.has(receiver)) {
  323. throw new TypeError("attempted to set private field on non-instance");
  324. }
  325. privateMap.set(receiver, value);
  326. return value;
  327. }
  328. function fixOrientation(points, hole) {
  329. var _a, _b;
  330. if (hole === void 0) { hole = false; }
  331. var m = points.length;
  332. if (m < 6) {
  333. return;
  334. }
  335. var area = 0;
  336. for (var i = 0, x1 = points[m - 2], y1 = points[m - 1]; i < m; i += 2) {
  337. var x2 = points[i];
  338. var y2 = points[i + 1];
  339. area += (x2 - x1) * (y2 + y1);
  340. x1 = x2;
  341. y1 = y2;
  342. }
  343. if ((!hole && area > 0) || (hole && area <= 0)) {
  344. var n = m / 2;
  345. for (var i = n + (n % 2); i < m; i += 2) {
  346. var i1 = m - i - 2;
  347. var i2 = m - i - 1;
  348. var i3 = i;
  349. var i4 = i + 1;
  350. _a = [points[i3], points[i1]], points[i1] = _a[0], points[i3] = _a[1];
  351. _b = [points[i4], points[i2]], points[i2] = _b[0], points[i4] = _b[1];
  352. }
  353. }
  354. }
  355. /**
  356. * Builds a polygon to draw
  357. *
  358. * Ignored from docs since it is not directly exposed.
  359. * @ignore
  360. * @private
  361. * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
  362. * @param {object} webGLData - an object containing all the WebGL-specific information to create this shape
  363. * @param {object} webGLDataNativeLines - an object containing all the WebGL-specific information to create nativeLines
  364. */
  365. var buildPoly = {
  366. build: function (graphicsData) {
  367. graphicsData.points = graphicsData.shape.points.slice();
  368. },
  369. triangulate: function (graphicsData, graphicsGeometry) {
  370. var points = graphicsData.points;
  371. var holes = graphicsData.holes;
  372. var verts = graphicsGeometry.points;
  373. var indices = graphicsGeometry.indices;
  374. if (points.length >= 6) {
  375. fixOrientation(points, false);
  376. var holeArray = [];
  377. // Process holes..
  378. for (var i = 0; i < holes.length; i++) {
  379. var hole = holes[i];
  380. fixOrientation(hole.points, true);
  381. holeArray.push(points.length / 2);
  382. points = points.concat(hole.points);
  383. }
  384. // sort color
  385. var triangles = utils.earcut(points, holeArray, 2);
  386. if (!triangles) {
  387. return;
  388. }
  389. var vertPos = verts.length / 2;
  390. for (var i = 0; i < triangles.length; i += 3) {
  391. indices.push(triangles[i] + vertPos);
  392. indices.push(triangles[i + 1] + vertPos);
  393. indices.push(triangles[i + 2] + vertPos);
  394. }
  395. for (var i = 0; i < points.length; i++) {
  396. verts.push(points[i]);
  397. }
  398. }
  399. },
  400. };
  401. // for type only
  402. /**
  403. * Builds a circle to draw
  404. *
  405. * Ignored from docs since it is not directly exposed.
  406. * @ignore
  407. * @private
  408. * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw
  409. * @param {object} webGLData - an object containing all the WebGL-specific information to create this shape
  410. * @param {object} webGLDataNativeLines - an object containing all the WebGL-specific information to create nativeLines
  411. */
  412. var buildCircle = {
  413. build: function (graphicsData) {
  414. // need to convert points to a nice regular data
  415. var points = graphicsData.points;
  416. var x;
  417. var y;
  418. var dx;
  419. var dy;
  420. var rx;
  421. var ry;
  422. if (graphicsData.type === math.SHAPES.CIRC) {
  423. var circle = graphicsData.shape;
  424. x = circle.x;
  425. y = circle.y;
  426. rx = ry = circle.radius;
  427. dx = dy = 0;
  428. }
  429. else if (graphicsData.type === math.SHAPES.ELIP) {
  430. var ellipse = graphicsData.shape;
  431. x = ellipse.x;
  432. y = ellipse.y;
  433. rx = ellipse.width;
  434. ry = ellipse.height;
  435. dx = dy = 0;
  436. }
  437. else {
  438. var roundedRect = graphicsData.shape;
  439. var halfWidth = roundedRect.width / 2;
  440. var halfHeight = roundedRect.height / 2;
  441. x = roundedRect.x + halfWidth;
  442. y = roundedRect.y + halfHeight;
  443. rx = ry = Math.max(0, Math.min(roundedRect.radius, Math.min(halfWidth, halfHeight)));
  444. dx = halfWidth - rx;
  445. dy = halfHeight - ry;
  446. }
  447. if (!(rx >= 0 && ry >= 0 && dx >= 0 && dy >= 0)) {
  448. points.length = 0;
  449. return;
  450. }
  451. // Choose a number of segments such that the maximum absolute deviation from the circle is approximately 0.029
  452. var n = Math.ceil(2.3 * Math.sqrt(rx + ry));
  453. var m = (n * 8) + (dx ? 4 : 0) + (dy ? 4 : 0);
  454. points.length = m;
  455. if (m === 0) {
  456. return;
  457. }
  458. if (n === 0) {
  459. points.length = 8;
  460. points[0] = points[6] = x + dx;
  461. points[1] = points[3] = y + dy;
  462. points[2] = points[4] = x - dx;
  463. points[5] = points[7] = y - dy;
  464. return;
  465. }
  466. var j1 = 0;
  467. var j2 = (n * 4) + (dx ? 2 : 0) + 2;
  468. var j3 = j2;
  469. var j4 = m;
  470. {
  471. var x0 = dx + rx;
  472. var y0 = dy;
  473. var x1 = x + x0;
  474. var x2 = x - x0;
  475. var y1 = y + y0;
  476. points[j1++] = x1;
  477. points[j1++] = y1;
  478. points[--j2] = y1;
  479. points[--j2] = x2;
  480. if (dy) {
  481. var y2 = y - y0;
  482. points[j3++] = x2;
  483. points[j3++] = y2;
  484. points[--j4] = y2;
  485. points[--j4] = x1;
  486. }
  487. }
  488. for (var i = 1; i < n; i++) {
  489. var a = Math.PI / 2 * (i / n);
  490. var x0 = dx + (Math.cos(a) * rx);
  491. var y0 = dy + (Math.sin(a) * ry);
  492. var x1 = x + x0;
  493. var x2 = x - x0;
  494. var y1 = y + y0;
  495. var y2 = y - y0;
  496. points[j1++] = x1;
  497. points[j1++] = y1;
  498. points[--j2] = y1;
  499. points[--j2] = x2;
  500. points[j3++] = x2;
  501. points[j3++] = y2;
  502. points[--j4] = y2;
  503. points[--j4] = x1;
  504. }
  505. {
  506. var x0 = dx;
  507. var y0 = dy + ry;
  508. var x1 = x + x0;
  509. var x2 = x - x0;
  510. var y1 = y + y0;
  511. var y2 = y - y0;
  512. points[j1++] = x1;
  513. points[j1++] = y1;
  514. points[--j4] = y2;
  515. points[--j4] = x1;
  516. if (dx) {
  517. points[j1++] = x2;
  518. points[j1++] = y1;
  519. points[--j4] = y2;
  520. points[--j4] = x2;
  521. }
  522. }
  523. },
  524. triangulate: function (graphicsData, graphicsGeometry) {
  525. var points = graphicsData.points;
  526. var verts = graphicsGeometry.points;
  527. var indices = graphicsGeometry.indices;
  528. if (points.length === 0) {
  529. return;
  530. }
  531. var vertPos = verts.length / 2;
  532. var center = vertPos;
  533. var x;
  534. var y;
  535. if (graphicsData.type !== math.SHAPES.RREC) {
  536. var circle = graphicsData.shape;
  537. x = circle.x;
  538. y = circle.y;
  539. }
  540. else {
  541. var roundedRect = graphicsData.shape;
  542. x = roundedRect.x + (roundedRect.width / 2);
  543. y = roundedRect.y + (roundedRect.height / 2);
  544. }
  545. var matrix = graphicsData.matrix;
  546. // Push center (special point)
  547. verts.push(graphicsData.matrix ? (matrix.a * x) + (matrix.c * y) + matrix.tx : x, graphicsData.matrix ? (matrix.b * x) + (matrix.d * y) + matrix.ty : y);
  548. vertPos++;
  549. verts.push(points[0], points[1]);
  550. for (var i = 2; i < points.length; i += 2) {
  551. verts.push(points[i], points[i + 1]);
  552. // add some uvs
  553. indices.push(vertPos++, center, vertPos);
  554. }
  555. indices.push(center + 1, center, vertPos);
  556. },
  557. };
  558. /**
  559. * Builds a rectangle to draw
  560. *
  561. * Ignored from docs since it is not directly exposed.
  562. * @ignore
  563. * @private
  564. * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
  565. * @param {object} webGLData - an object containing all the WebGL-specific information to create this shape
  566. * @param {object} webGLDataNativeLines - an object containing all the WebGL-specific information to create nativeLines
  567. */
  568. var buildRectangle = {
  569. build: function (graphicsData) {
  570. // --- //
  571. // need to convert points to a nice regular data
  572. //
  573. var rectData = graphicsData.shape;
  574. var x = rectData.x;
  575. var y = rectData.y;
  576. var width = rectData.width;
  577. var height = rectData.height;
  578. var points = graphicsData.points;
  579. points.length = 0;
  580. points.push(x, y, x + width, y, x + width, y + height, x, y + height);
  581. },
  582. triangulate: function (graphicsData, graphicsGeometry) {
  583. var points = graphicsData.points;
  584. var verts = graphicsGeometry.points;
  585. var vertPos = verts.length / 2;
  586. verts.push(points[0], points[1], points[2], points[3], points[6], points[7], points[4], points[5]);
  587. graphicsGeometry.indices.push(vertPos, vertPos + 1, vertPos + 2, vertPos + 1, vertPos + 2, vertPos + 3);
  588. },
  589. };
  590. /**
  591. * Calculate a single point for a quadratic bezier curve.
  592. * Utility function used by quadraticBezierCurve.
  593. * Ignored from docs since it is not directly exposed.
  594. * @ignore
  595. * @private
  596. * @param {number} n1 - first number
  597. * @param {number} n2 - second number
  598. * @param {number} perc - percentage
  599. * @returns {number} the result
  600. */
  601. function getPt(n1, n2, perc) {
  602. var diff = n2 - n1;
  603. return n1 + (diff * perc);
  604. }
  605. /**
  606. * Calculate the points for a quadratic bezier curve. (helper function..)
  607. * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
  608. *
  609. * Ignored from docs since it is not directly exposed.
  610. * @ignore
  611. * @private
  612. * @param {number} fromX - Origin point x
  613. * @param {number} fromY - Origin point x
  614. * @param {number} cpX - Control point x
  615. * @param {number} cpY - Control point y
  616. * @param {number} toX - Destination point x
  617. * @param {number} toY - Destination point y
  618. * @param {number[]} [out=[]] - The output array to add points into. If not passed, a new array is created.
  619. * @returns {number[]} an array of points
  620. */
  621. function quadraticBezierCurve(fromX, fromY, cpX, cpY, toX, toY, out) {
  622. if (out === void 0) { out = []; }
  623. var n = 20;
  624. var points = out;
  625. var xa = 0;
  626. var ya = 0;
  627. var xb = 0;
  628. var yb = 0;
  629. var x = 0;
  630. var y = 0;
  631. for (var i = 0, j = 0; i <= n; ++i) {
  632. j = i / n;
  633. // The Green Line
  634. xa = getPt(fromX, cpX, j);
  635. ya = getPt(fromY, cpY, j);
  636. xb = getPt(cpX, toX, j);
  637. yb = getPt(cpY, toY, j);
  638. // The Black Dot
  639. x = getPt(xa, xb, j);
  640. y = getPt(ya, yb, j);
  641. // Handle case when first curve points overlaps and earcut fails to triangulate
  642. if (i === 0 && points[points.length - 2] === x && points[points.length - 1] === y) {
  643. continue;
  644. }
  645. points.push(x, y);
  646. }
  647. return points;
  648. }
  649. /**
  650. * Builds a rounded rectangle to draw
  651. *
  652. * Ignored from docs since it is not directly exposed.
  653. * @ignore
  654. * @private
  655. * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
  656. * @param {object} webGLData - an object containing all the WebGL-specific information to create this shape
  657. * @param {object} webGLDataNativeLines - an object containing all the WebGL-specific information to create nativeLines
  658. */
  659. var buildRoundedRectangle = {
  660. build: function (graphicsData) {
  661. if (Graphics.nextRoundedRectBehavior) {
  662. buildCircle.build(graphicsData);
  663. return;
  664. }
  665. var rrectData = graphicsData.shape;
  666. var points = graphicsData.points;
  667. var x = rrectData.x;
  668. var y = rrectData.y;
  669. var width = rrectData.width;
  670. var height = rrectData.height;
  671. // Don't allow negative radius or greater than half the smallest width
  672. var radius = Math.max(0, Math.min(rrectData.radius, Math.min(width, height) / 2));
  673. points.length = 0;
  674. // No radius, do a simple rectangle
  675. if (!radius) {
  676. points.push(x, y, x + width, y, x + width, y + height, x, y + height);
  677. }
  678. else {
  679. quadraticBezierCurve(x, y + radius, x, y, x + radius, y, points);
  680. quadraticBezierCurve(x + width - radius, y, x + width, y, x + width, y + radius, points);
  681. quadraticBezierCurve(x + width, y + height - radius, x + width, y + height, x + width - radius, y + height, points);
  682. quadraticBezierCurve(x + radius, y + height, x, y + height, x, y + height - radius, points);
  683. }
  684. },
  685. triangulate: function (graphicsData, graphicsGeometry) {
  686. if (Graphics.nextRoundedRectBehavior) {
  687. buildCircle.triangulate(graphicsData, graphicsGeometry);
  688. return;
  689. }
  690. var points = graphicsData.points;
  691. var verts = graphicsGeometry.points;
  692. var indices = graphicsGeometry.indices;
  693. var vecPos = verts.length / 2;
  694. var triangles = utils.earcut(points, null, 2);
  695. for (var i = 0, j = triangles.length; i < j; i += 3) {
  696. indices.push(triangles[i] + vecPos);
  697. // indices.push(triangles[i] + vecPos);
  698. indices.push(triangles[i + 1] + vecPos);
  699. // indices.push(triangles[i + 2] + vecPos);
  700. indices.push(triangles[i + 2] + vecPos);
  701. }
  702. for (var i = 0, j = points.length; i < j; i++) {
  703. verts.push(points[i], points[++i]);
  704. }
  705. },
  706. };
  707. /**
  708. * Buffers vertices to draw a square cap.
  709. *
  710. * Ignored from docs since it is not directly exposed.
  711. * @ignore
  712. * @private
  713. * @param {number} x - X-coord of end point
  714. * @param {number} y - Y-coord of end point
  715. * @param {number} nx - X-coord of line normal pointing inside
  716. * @param {number} ny - Y-coord of line normal pointing inside
  717. * @param {number} innerWeight - Weight of inner points
  718. * @param {number} outerWeight - Weight of outer points
  719. * @param {boolean} clockwise - Whether the cap is drawn clockwise
  720. * @param {Array<number>} verts - vertex buffer
  721. * @returns {number} - no. of vertices pushed
  722. */
  723. function square(x, y, nx, ny, innerWeight, outerWeight, clockwise, /* rotation for square (true at left end, false at right end) */ verts) {
  724. var ix = x - (nx * innerWeight);
  725. var iy = y - (ny * innerWeight);
  726. var ox = x + (nx * outerWeight);
  727. var oy = y + (ny * outerWeight);
  728. /* Rotate nx,ny for extension vector */
  729. var exx;
  730. var eyy;
  731. if (clockwise) {
  732. exx = ny;
  733. eyy = -nx;
  734. }
  735. else {
  736. exx = -ny;
  737. eyy = nx;
  738. }
  739. /* [i|0]x,y extended at cap */
  740. var eix = ix + exx;
  741. var eiy = iy + eyy;
  742. var eox = ox + exx;
  743. var eoy = oy + eyy;
  744. /* Square itself must be inserted clockwise*/
  745. verts.push(eix, eiy);
  746. verts.push(eox, eoy);
  747. return 2;
  748. }
  749. /**
  750. * Buffers vertices to draw an arc at the line joint or cap.
  751. *
  752. * Ignored from docs since it is not directly exposed.
  753. * @ignore
  754. * @private
  755. * @param {number} cx - X-coord of center
  756. * @param {number} cy - Y-coord of center
  757. * @param {number} sx - X-coord of arc start
  758. * @param {number} sy - Y-coord of arc start
  759. * @param {number} ex - X-coord of arc end
  760. * @param {number} ey - Y-coord of arc end
  761. * @param {Array<number>} verts - buffer of vertices
  762. * @param {boolean} clockwise - orientation of vertices
  763. * @returns {number} - no. of vertices pushed
  764. */
  765. function round(cx, cy, sx, sy, ex, ey, verts, clockwise) {
  766. var cx2p0x = sx - cx;
  767. var cy2p0y = sy - cy;
  768. var angle0 = Math.atan2(cx2p0x, cy2p0y);
  769. var angle1 = Math.atan2(ex - cx, ey - cy);
  770. if (clockwise && angle0 < angle1) {
  771. angle0 += Math.PI * 2;
  772. }
  773. else if (!clockwise && angle0 > angle1) {
  774. angle1 += Math.PI * 2;
  775. }
  776. var startAngle = angle0;
  777. var angleDiff = angle1 - angle0;
  778. var absAngleDiff = Math.abs(angleDiff);
  779. /* if (absAngleDiff >= PI_LBOUND && absAngleDiff <= PI_UBOUND)
  780. {
  781. const r1x = cx - nxtPx;
  782. const r1y = cy - nxtPy;
  783. if (r1x === 0)
  784. {
  785. if (r1y > 0)
  786. {
  787. angleDiff = -angleDiff;
  788. }
  789. }
  790. else if (r1x >= -GRAPHICS_CURVES.epsilon)
  791. {
  792. angleDiff = -angleDiff;
  793. }
  794. }*/
  795. var radius = Math.sqrt((cx2p0x * cx2p0x) + (cy2p0y * cy2p0y));
  796. var segCount = ((15 * absAngleDiff * Math.sqrt(radius) / Math.PI) >> 0) + 1;
  797. var angleInc = angleDiff / segCount;
  798. startAngle += angleInc;
  799. if (clockwise) {
  800. verts.push(cx, cy);
  801. verts.push(sx, sy);
  802. for (var i = 1, angle = startAngle; i < segCount; i++, angle += angleInc) {
  803. verts.push(cx, cy);
  804. verts.push(cx + ((Math.sin(angle) * radius)), cy + ((Math.cos(angle) * radius)));
  805. }
  806. verts.push(cx, cy);
  807. verts.push(ex, ey);
  808. }
  809. else {
  810. verts.push(sx, sy);
  811. verts.push(cx, cy);
  812. for (var i = 1, angle = startAngle; i < segCount; i++, angle += angleInc) {
  813. verts.push(cx + ((Math.sin(angle) * radius)), cy + ((Math.cos(angle) * radius)));
  814. verts.push(cx, cy);
  815. }
  816. verts.push(ex, ey);
  817. verts.push(cx, cy);
  818. }
  819. return segCount * 2;
  820. }
  821. /**
  822. * Builds a line to draw using the polygon method.
  823. *
  824. * Ignored from docs since it is not directly exposed.
  825. * @ignore
  826. * @private
  827. * @param {PIXI.GraphicsData} graphicsData - The graphics object containing all the necessary properties
  828. * @param {PIXI.GraphicsGeometry} graphicsGeometry - Geometry where to append output
  829. */
  830. function buildNonNativeLine(graphicsData, graphicsGeometry) {
  831. var shape = graphicsData.shape;
  832. var points = graphicsData.points || shape.points.slice();
  833. var eps = graphicsGeometry.closePointEps;
  834. if (points.length === 0) {
  835. return;
  836. }
  837. // if the line width is an odd number add 0.5 to align to a whole pixel
  838. // commenting this out fixes #711 and #1620
  839. // if (graphicsData.lineWidth%2)
  840. // {
  841. // for (i = 0; i < points.length; i++)
  842. // {
  843. // points[i] += 0.5;
  844. // }
  845. // }
  846. var style = graphicsData.lineStyle;
  847. // get first and last point.. figure out the middle!
  848. var firstPoint = new math.Point(points[0], points[1]);
  849. var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
  850. var closedShape = shape.type !== math.SHAPES.POLY || shape.closeStroke;
  851. var closedPath = Math.abs(firstPoint.x - lastPoint.x) < eps
  852. && Math.abs(firstPoint.y - lastPoint.y) < eps;
  853. // if the first point is the last point - gonna have issues :)
  854. if (closedShape) {
  855. // need to clone as we are going to slightly modify the shape..
  856. points = points.slice();
  857. if (closedPath) {
  858. points.pop();
  859. points.pop();
  860. lastPoint.set(points[points.length - 2], points[points.length - 1]);
  861. }
  862. var midPointX = (firstPoint.x + lastPoint.x) * 0.5;
  863. var midPointY = (lastPoint.y + firstPoint.y) * 0.5;
  864. points.unshift(midPointX, midPointY);
  865. points.push(midPointX, midPointY);
  866. }
  867. var verts = graphicsGeometry.points;
  868. var length = points.length / 2;
  869. var indexCount = points.length;
  870. var indexStart = verts.length / 2;
  871. // Max. inner and outer width
  872. var width = style.width / 2;
  873. var widthSquared = width * width;
  874. var miterLimitSquared = style.miterLimit * style.miterLimit;
  875. /* Line segments of interest where (x1,y1) forms the corner. */
  876. var x0 = points[0];
  877. var y0 = points[1];
  878. var x1 = points[2];
  879. var y1 = points[3];
  880. var x2 = 0;
  881. var y2 = 0;
  882. /* perp[?](x|y) = the line normal with magnitude lineWidth. */
  883. var perpx = -(y0 - y1);
  884. var perpy = x0 - x1;
  885. var perp1x = 0;
  886. var perp1y = 0;
  887. var dist = Math.sqrt((perpx * perpx) + (perpy * perpy));
  888. perpx /= dist;
  889. perpy /= dist;
  890. perpx *= width;
  891. perpy *= width;
  892. var ratio = style.alignment; // 0.5;
  893. var innerWeight = (1 - ratio) * 2;
  894. var outerWeight = ratio * 2;
  895. if (!closedShape) {
  896. if (style.cap === exports.LINE_CAP.ROUND) {
  897. indexCount += round(x0 - (perpx * (innerWeight - outerWeight) * 0.5), y0 - (perpy * (innerWeight - outerWeight) * 0.5), x0 - (perpx * innerWeight), y0 - (perpy * innerWeight), x0 + (perpx * outerWeight), y0 + (perpy * outerWeight), verts, true) + 2;
  898. }
  899. else if (style.cap === exports.LINE_CAP.SQUARE) {
  900. indexCount += square(x0, y0, perpx, perpy, innerWeight, outerWeight, true, verts);
  901. }
  902. }
  903. // Push first point (below & above vertices)
  904. verts.push(x0 - (perpx * innerWeight), y0 - (perpy * innerWeight));
  905. verts.push(x0 + (perpx * outerWeight), y0 + (perpy * outerWeight));
  906. for (var i = 1; i < length - 1; ++i) {
  907. x0 = points[(i - 1) * 2];
  908. y0 = points[((i - 1) * 2) + 1];
  909. x1 = points[i * 2];
  910. y1 = points[(i * 2) + 1];
  911. x2 = points[(i + 1) * 2];
  912. y2 = points[((i + 1) * 2) + 1];
  913. perpx = -(y0 - y1);
  914. perpy = x0 - x1;
  915. dist = Math.sqrt((perpx * perpx) + (perpy * perpy));
  916. perpx /= dist;
  917. perpy /= dist;
  918. perpx *= width;
  919. perpy *= width;
  920. perp1x = -(y1 - y2);
  921. perp1y = x1 - x2;
  922. dist = Math.sqrt((perp1x * perp1x) + (perp1y * perp1y));
  923. perp1x /= dist;
  924. perp1y /= dist;
  925. perp1x *= width;
  926. perp1y *= width;
  927. /* d[x|y](0|1) = the component displacement between points p(0,1|1,2) */
  928. var dx0 = x1 - x0;
  929. var dy0 = y0 - y1;
  930. var dx1 = x1 - x2;
  931. var dy1 = y2 - y1;
  932. /* +ve if internal angle < 90 degree, -ve if internal angle > 90 degree. */
  933. var dot = (dx0 * dx1) + (dy0 * dy1);
  934. /* +ve if internal angle counterclockwise, -ve if internal angle clockwise. */
  935. var cross = (dy0 * dx1) - (dy1 * dx0);
  936. var clockwise = (cross < 0);
  937. /* Going nearly parallel? */
  938. /* atan(0.001) ~= 0.001 rad ~= 0.057 degree */
  939. if (Math.abs(cross) < 0.001 * Math.abs(dot)) {
  940. verts.push(x1 - (perpx * innerWeight), y1 - (perpy * innerWeight));
  941. verts.push(x1 + (perpx * outerWeight), y1 + (perpy * outerWeight));
  942. /* 180 degree corner? */
  943. if (dot >= 0) {
  944. if (style.join === exports.LINE_JOIN.ROUND) {
  945. indexCount += round(x1, y1, x1 - (perpx * innerWeight), y1 - (perpy * innerWeight), x1 - (perp1x * innerWeight), y1 - (perp1y * innerWeight), verts, false) + 4;
  946. }
  947. else {
  948. indexCount += 2;
  949. }
  950. verts.push(x1 - (perp1x * outerWeight), y1 - (perp1y * outerWeight));
  951. verts.push(x1 + (perp1x * innerWeight), y1 + (perp1y * innerWeight));
  952. }
  953. continue;
  954. }
  955. /* p[x|y] is the miter point. pdist is the distance between miter point and p1. */
  956. var c1 = ((-perpx + x0) * (-perpy + y1)) - ((-perpx + x1) * (-perpy + y0));
  957. var c2 = ((-perp1x + x2) * (-perp1y + y1)) - ((-perp1x + x1) * (-perp1y + y2));
  958. var px = ((dx0 * c2) - (dx1 * c1)) / cross;
  959. var py = ((dy1 * c1) - (dy0 * c2)) / cross;
  960. var pdist = ((px - x1) * (px - x1)) + ((py - y1) * (py - y1));
  961. /* Inner miter point */
  962. var imx = x1 + ((px - x1) * innerWeight);
  963. var imy = y1 + ((py - y1) * innerWeight);
  964. /* Outer miter point */
  965. var omx = x1 - ((px - x1) * outerWeight);
  966. var omy = y1 - ((py - y1) * outerWeight);
  967. /* Is the inside miter point too far away, creating a spike? */
  968. var smallerInsideSegmentSq = Math.min((dx0 * dx0) + (dy0 * dy0), (dx1 * dx1) + (dy1 * dy1));
  969. var insideWeight = clockwise ? innerWeight : outerWeight;
  970. var smallerInsideDiagonalSq = smallerInsideSegmentSq + (insideWeight * insideWeight * widthSquared);
  971. var insideMiterOk = pdist <= smallerInsideDiagonalSq;
  972. if (insideMiterOk) {
  973. if (style.join === exports.LINE_JOIN.BEVEL || pdist / widthSquared > miterLimitSquared) {
  974. if (clockwise) /* rotating at inner angle */ {
  975. verts.push(imx, imy); // inner miter point
  976. verts.push(x1 + (perpx * outerWeight), y1 + (perpy * outerWeight)); // first segment's outer vertex
  977. verts.push(imx, imy); // inner miter point
  978. verts.push(x1 + (perp1x * outerWeight), y1 + (perp1y * outerWeight)); // second segment's outer vertex
  979. }
  980. else /* rotating at outer angle */ {
  981. verts.push(x1 - (perpx * innerWeight), y1 - (perpy * innerWeight)); // first segment's inner vertex
  982. verts.push(omx, omy); // outer miter point
  983. verts.push(x1 - (perp1x * innerWeight), y1 - (perp1y * innerWeight)); // second segment's outer vertex
  984. verts.push(omx, omy); // outer miter point
  985. }
  986. indexCount += 2;
  987. }
  988. else if (style.join === exports.LINE_JOIN.ROUND) {
  989. if (clockwise) /* arc is outside */ {
  990. verts.push(imx, imy);
  991. verts.push(x1 + (perpx * outerWeight), y1 + (perpy * outerWeight));
  992. indexCount += round(x1, y1, x1 + (perpx * outerWeight), y1 + (perpy * outerWeight), x1 + (perp1x * outerWeight), y1 + (perp1y * outerWeight), verts, true) + 4;
  993. verts.push(imx, imy);
  994. verts.push(x1 + (perp1x * outerWeight), y1 + (perp1y * outerWeight));
  995. }
  996. else /* arc is inside */ {
  997. verts.push(x1 - (perpx * innerWeight), y1 - (perpy * innerWeight));
  998. verts.push(omx, omy);
  999. indexCount += round(x1, y1, x1 - (perpx * innerWeight), y1 - (perpy * innerWeight), x1 - (perp1x * innerWeight), y1 - (perp1y * innerWeight), verts, false) + 4;
  1000. verts.push(x1 - (perp1x * innerWeight), y1 - (perp1y * innerWeight));
  1001. verts.push(omx, omy);
  1002. }
  1003. }
  1004. else {
  1005. verts.push(imx, imy);
  1006. verts.push(omx, omy);
  1007. }
  1008. }
  1009. else // inside miter is NOT ok
  1010. {
  1011. verts.push(x1 - (perpx * innerWeight), y1 - (perpy * innerWeight)); // first segment's inner vertex
  1012. verts.push(x1 + (perpx * outerWeight), y1 + (perpy * outerWeight)); // first segment's outer vertex
  1013. if (style.join === exports.LINE_JOIN.ROUND) {
  1014. if (clockwise) /* arc is outside */ {
  1015. indexCount += round(x1, y1, x1 + (perpx * outerWeight), y1 + (perpy * outerWeight), x1 + (perp1x * outerWeight), y1 + (perp1y * outerWeight), verts, true) + 2;
  1016. }
  1017. else /* arc is inside */ {
  1018. indexCount += round(x1, y1, x1 - (perpx * innerWeight), y1 - (perpy * innerWeight), x1 - (perp1x * innerWeight), y1 - (perp1y * innerWeight), verts, false) + 2;
  1019. }
  1020. }
  1021. else if (style.join === exports.LINE_JOIN.MITER && pdist / widthSquared <= miterLimitSquared) {
  1022. if (clockwise) {
  1023. verts.push(omx, omy); // inner miter point
  1024. verts.push(omx, omy); // inner miter point
  1025. }
  1026. else {
  1027. verts.push(imx, imy); // outer miter point
  1028. verts.push(imx, imy); // outer miter point
  1029. }
  1030. indexCount += 2;
  1031. }
  1032. verts.push(x1 - (perp1x * innerWeight), y1 - (perp1y * innerWeight)); // second segment's inner vertex
  1033. verts.push(x1 + (perp1x * outerWeight), y1 + (perp1y * outerWeight)); // second segment's outer vertex
  1034. indexCount += 2;
  1035. }
  1036. }
  1037. x0 = points[(length - 2) * 2];
  1038. y0 = points[((length - 2) * 2) + 1];
  1039. x1 = points[(length - 1) * 2];
  1040. y1 = points[((length - 1) * 2) + 1];
  1041. perpx = -(y0 - y1);
  1042. perpy = x0 - x1;
  1043. dist = Math.sqrt((perpx * perpx) + (perpy * perpy));
  1044. perpx /= dist;
  1045. perpy /= dist;
  1046. perpx *= width;
  1047. perpy *= width;
  1048. verts.push(x1 - (perpx * innerWeight), y1 - (perpy * innerWeight));
  1049. verts.push(x1 + (perpx * outerWeight), y1 + (perpy * outerWeight));
  1050. if (!closedShape) {
  1051. if (style.cap === exports.LINE_CAP.ROUND) {
  1052. indexCount += round(x1 - (perpx * (innerWeight - outerWeight) * 0.5), y1 - (perpy * (innerWeight - outerWeight) * 0.5), x1 - (perpx * innerWeight), y1 - (perpy * innerWeight), x1 + (perpx * outerWeight), y1 + (perpy * outerWeight), verts, false) + 2;
  1053. }
  1054. else if (style.cap === exports.LINE_CAP.SQUARE) {
  1055. indexCount += square(x1, y1, perpx, perpy, innerWeight, outerWeight, false, verts);
  1056. }
  1057. }
  1058. var indices = graphicsGeometry.indices;
  1059. var eps2 = GRAPHICS_CURVES.epsilon * GRAPHICS_CURVES.epsilon;
  1060. // indices.push(indexStart);
  1061. for (var i = indexStart; i < indexCount + indexStart - 2; ++i) {
  1062. x0 = verts[(i * 2)];
  1063. y0 = verts[(i * 2) + 1];
  1064. x1 = verts[(i + 1) * 2];
  1065. y1 = verts[((i + 1) * 2) + 1];
  1066. x2 = verts[(i + 2) * 2];
  1067. y2 = verts[((i + 2) * 2) + 1];
  1068. /* Skip zero area triangles */
  1069. if (Math.abs((x0 * (y1 - y2)) + (x1 * (y2 - y0)) + (x2 * (y0 - y1))) < eps2) {
  1070. continue;
  1071. }
  1072. indices.push(i, i + 1, i + 2);
  1073. }
  1074. }
  1075. /**
  1076. * Builds a line to draw using the gl.drawArrays(gl.LINES) method
  1077. *
  1078. * Ignored from docs since it is not directly exposed.
  1079. * @ignore
  1080. * @private
  1081. * @param {PIXI.GraphicsData} graphicsData - The graphics object containing all the necessary properties
  1082. * @param {PIXI.GraphicsGeometry} graphicsGeometry - Geometry where to append output
  1083. */
  1084. function buildNativeLine(graphicsData, graphicsGeometry) {
  1085. var i = 0;
  1086. var shape = graphicsData.shape;
  1087. var points = graphicsData.points || shape.points;
  1088. var closedShape = shape.type !== math.SHAPES.POLY || shape.closeStroke;
  1089. if (points.length === 0)
  1090. { return; }
  1091. var verts = graphicsGeometry.points;
  1092. var indices = graphicsGeometry.indices;
  1093. var length = points.length / 2;
  1094. var startIndex = verts.length / 2;
  1095. var currentIndex = startIndex;
  1096. verts.push(points[0], points[1]);
  1097. for (i = 1; i < length; i++) {
  1098. verts.push(points[i * 2], points[(i * 2) + 1]);
  1099. indices.push(currentIndex, currentIndex + 1);
  1100. currentIndex++;
  1101. }
  1102. if (closedShape) {
  1103. indices.push(currentIndex, startIndex);
  1104. }
  1105. }
  1106. /**
  1107. * Builds a line to draw
  1108. *
  1109. * Ignored from docs since it is not directly exposed.
  1110. * @ignore
  1111. * @private
  1112. * @param {PIXI.GraphicsData} graphicsData - The graphics object containing all the necessary properties
  1113. * @param {PIXI.GraphicsGeometry} graphicsGeometry - Geometry where to append output
  1114. */
  1115. function buildLine(graphicsData, graphicsGeometry) {
  1116. if (graphicsData.lineStyle.native) {
  1117. buildNativeLine(graphicsData, graphicsGeometry);
  1118. }
  1119. else {
  1120. buildNonNativeLine(graphicsData, graphicsGeometry);
  1121. }
  1122. }
  1123. /**
  1124. * Utilities for arc curves.
  1125. * @private
  1126. */
  1127. var ArcUtils = /** @class */ (function () {
  1128. function ArcUtils() {
  1129. }
  1130. /**
  1131. * The arcTo() method creates an arc/curve between two tangents on the canvas.
  1132. *
  1133. * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
  1134. * @private
  1135. * @param x1 - The x-coordinate of the beginning of the arc
  1136. * @param y1 - The y-coordinate of the beginning of the arc
  1137. * @param x2 - The x-coordinate of the end of the arc
  1138. * @param y2 - The y-coordinate of the end of the arc
  1139. * @param radius - The radius of the arc
  1140. * @param points -
  1141. * @returns - If the arc length is valid, return center of circle, radius and other info otherwise `null`.
  1142. */
  1143. ArcUtils.curveTo = function (x1, y1, x2, y2, radius, points) {
  1144. var fromX = points[points.length - 2];
  1145. var fromY = points[points.length - 1];
  1146. var a1 = fromY - y1;
  1147. var b1 = fromX - x1;
  1148. var a2 = y2 - y1;
  1149. var b2 = x2 - x1;
  1150. var mm = Math.abs((a1 * b2) - (b1 * a2));
  1151. if (mm < 1.0e-8 || radius === 0) {
  1152. if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) {
  1153. points.push(x1, y1);
  1154. }
  1155. return null;
  1156. }
  1157. var dd = (a1 * a1) + (b1 * b1);
  1158. var cc = (a2 * a2) + (b2 * b2);
  1159. var tt = (a1 * a2) + (b1 * b2);
  1160. var k1 = radius * Math.sqrt(dd) / mm;
  1161. var k2 = radius * Math.sqrt(cc) / mm;
  1162. var j1 = k1 * tt / dd;
  1163. var j2 = k2 * tt / cc;
  1164. var cx = (k1 * b2) + (k2 * b1);
  1165. var cy = (k1 * a2) + (k2 * a1);
  1166. var px = b1 * (k2 + j1);
  1167. var py = a1 * (k2 + j1);
  1168. var qx = b2 * (k1 + j2);
  1169. var qy = a2 * (k1 + j2);
  1170. var startAngle = Math.atan2(py - cy, px - cx);
  1171. var endAngle = Math.atan2(qy - cy, qx - cx);
  1172. return {
  1173. cx: (cx + x1),
  1174. cy: (cy + y1),
  1175. radius: radius,
  1176. startAngle: startAngle,
  1177. endAngle: endAngle,
  1178. anticlockwise: (b1 * a2 > b2 * a1),
  1179. };
  1180. };
  1181. /* eslint-disable max-len */
  1182. /**
  1183. * The arc method creates an arc/curve (used to create circles, or parts of circles).
  1184. * @private
  1185. * @param _startX - Start x location of arc
  1186. * @param _startY - Start y location of arc
  1187. * @param cx - The x-coordinate of the center of the circle
  1188. * @param cy - The y-coordinate of the center of the circle
  1189. * @param radius - The radius of the circle
  1190. * @param startAngle - The starting angle, in radians (0 is at the 3 o'clock position
  1191. * of the arc's circle)
  1192. * @param endAngle - The ending angle, in radians
  1193. * @param _anticlockwise - Specifies whether the drawing should be
  1194. * counter-clockwise or clockwise. False is default, and indicates clockwise, while true
  1195. * indicates counter-clockwise.
  1196. * @param points - Collection of points to add to
  1197. */
  1198. ArcUtils.arc = function (_startX, _startY, cx, cy, radius, startAngle, endAngle, _anticlockwise, points) {
  1199. var sweep = endAngle - startAngle;
  1200. var n = GRAPHICS_CURVES._segmentsCount(Math.abs(sweep) * radius, Math.ceil(Math.abs(sweep) / math.PI_2) * 40);
  1201. var theta = (sweep) / (n * 2);
  1202. var theta2 = theta * 2;
  1203. var cTheta = Math.cos(theta);
  1204. var sTheta = Math.sin(theta);
  1205. var segMinus = n - 1;
  1206. var remainder = (segMinus % 1) / segMinus;
  1207. for (var i = 0; i <= segMinus; ++i) {
  1208. var real = i + (remainder * i);
  1209. var angle = ((theta) + startAngle + (theta2 * real));
  1210. var c = Math.cos(angle);
  1211. var s = -Math.sin(angle);
  1212. points.push((((cTheta * c) + (sTheta * s)) * radius) + cx, (((cTheta * -s) + (sTheta * c)) * radius) + cy);
  1213. }
  1214. };
  1215. return ArcUtils;
  1216. }());
  1217. /**
  1218. * Utilities for bezier curves
  1219. * @private
  1220. */
  1221. var BezierUtils = /** @class */ (function () {
  1222. function BezierUtils() {
  1223. }
  1224. /**
  1225. * Calculate length of bezier curve.
  1226. * Analytical solution is impossible, since it involves an integral that does not integrate in general.
  1227. * Therefore numerical solution is used.
  1228. * @private
  1229. * @param fromX - Starting point x
  1230. * @param fromY - Starting point y
  1231. * @param cpX - Control point x
  1232. * @param cpY - Control point y
  1233. * @param cpX2 - Second Control point x
  1234. * @param cpY2 - Second Control point y
  1235. * @param toX - Destination point x
  1236. * @param toY - Destination point y
  1237. * @returns - Length of bezier curve
  1238. */
  1239. BezierUtils.curveLength = function (fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY) {
  1240. var n = 10;
  1241. var result = 0.0;
  1242. var t = 0.0;
  1243. var t2 = 0.0;
  1244. var t3 = 0.0;
  1245. var nt = 0.0;
  1246. var nt2 = 0.0;
  1247. var nt3 = 0.0;
  1248. var x = 0.0;
  1249. var y = 0.0;
  1250. var dx = 0.0;
  1251. var dy = 0.0;
  1252. var prevX = fromX;
  1253. var prevY = fromY;
  1254. for (var i = 1; i <= n; ++i) {
  1255. t = i / n;
  1256. t2 = t * t;
  1257. t3 = t2 * t;
  1258. nt = (1.0 - t);
  1259. nt2 = nt * nt;
  1260. nt3 = nt2 * nt;
  1261. x = (nt3 * fromX) + (3.0 * nt2 * t * cpX) + (3.0 * nt * t2 * cpX2) + (t3 * toX);
  1262. y = (nt3 * fromY) + (3.0 * nt2 * t * cpY) + (3 * nt * t2 * cpY2) + (t3 * toY);
  1263. dx = prevX - x;
  1264. dy = prevY - y;
  1265. prevX = x;
  1266. prevY = y;
  1267. result += Math.sqrt((dx * dx) + (dy * dy));
  1268. }
  1269. return result;
  1270. };
  1271. /**
  1272. * Calculate the points for a bezier curve and then draws it.
  1273. *
  1274. * Ignored from docs since it is not directly exposed.
  1275. * @ignore
  1276. * @param cpX - Control point x
  1277. * @param cpY - Control point y
  1278. * @param cpX2 - Second Control point x
  1279. * @param cpY2 - Second Control point y
  1280. * @param toX - Destination point x
  1281. * @param toY - Destination point y
  1282. * @param points - Path array to push points into
  1283. */
  1284. BezierUtils.curveTo = function (cpX, cpY, cpX2, cpY2, toX, toY, points) {
  1285. var fromX = points[points.length - 2];
  1286. var fromY = points[points.length - 1];
  1287. points.length -= 2;
  1288. var n = GRAPHICS_CURVES._segmentsCount(BezierUtils.curveLength(fromX, fromY, cpX, cpY, cpX2, cpY2, toX, toY));
  1289. var dt = 0;
  1290. var dt2 = 0;
  1291. var dt3 = 0;
  1292. var t2 = 0;
  1293. var t3 = 0;
  1294. points.push(fromX, fromY);
  1295. for (var i = 1, j = 0; i <= n; ++i) {
  1296. j = i / n;
  1297. dt = (1 - j);
  1298. dt2 = dt * dt;
  1299. dt3 = dt2 * dt;
  1300. t2 = j * j;
  1301. t3 = t2 * j;
  1302. points.push((dt3 * fromX) + (3 * dt2 * j * cpX) + (3 * dt * t2 * cpX2) + (t3 * toX), (dt3 * fromY) + (3 * dt2 * j * cpY) + (3 * dt * t2 * cpY2) + (t3 * toY));
  1303. }
  1304. };
  1305. return BezierUtils;
  1306. }());
  1307. /**
  1308. * Utilities for quadratic curves.
  1309. * @private
  1310. */
  1311. var QuadraticUtils = /** @class */ (function () {
  1312. function QuadraticUtils() {
  1313. }
  1314. /**
  1315. * Calculate length of quadratic curve
  1316. * @see {@link http://www.malczak.linuxpl.com/blog/quadratic-bezier-curve-length/}
  1317. * for the detailed explanation of math behind this.
  1318. * @private
  1319. * @param fromX - x-coordinate of curve start point
  1320. * @param fromY - y-coordinate of curve start point
  1321. * @param cpX - x-coordinate of curve control point
  1322. * @param cpY - y-coordinate of curve control point
  1323. * @param toX - x-coordinate of curve end point
  1324. * @param toY - y-coordinate of curve end point
  1325. * @returns - Length of quadratic curve
  1326. */
  1327. QuadraticUtils.curveLength = function (fromX, fromY, cpX, cpY, toX, toY) {
  1328. var ax = fromX - (2.0 * cpX) + toX;
  1329. var ay = fromY - (2.0 * cpY) + toY;
  1330. var bx = (2.0 * cpX) - (2.0 * fromX);
  1331. var by = (2.0 * cpY) - (2.0 * fromY);
  1332. var a = 4.0 * ((ax * ax) + (ay * ay));
  1333. var b = 4.0 * ((ax * bx) + (ay * by));
  1334. var c = (bx * bx) + (by * by);
  1335. var s = 2.0 * Math.sqrt(a + b + c);
  1336. var a2 = Math.sqrt(a);
  1337. var a32 = 2.0 * a * a2;
  1338. var c2 = 2.0 * Math.sqrt(c);
  1339. var ba = b / a2;
  1340. return ((a32 * s)
  1341. + (a2 * b * (s - c2))
  1342. + (((4.0 * c * a) - (b * b))
  1343. * Math.log(((2.0 * a2) + ba + s) / (ba + c2)))) / (4.0 * a32);
  1344. };
  1345. /**
  1346. * Calculate the points for a quadratic bezier curve and then draws it.
  1347. * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
  1348. * @private
  1349. * @param cpX - Control point x
  1350. * @param cpY - Control point y
  1351. * @param toX - Destination point x
  1352. * @param toY - Destination point y
  1353. * @param points - Points to add segments to.
  1354. */
  1355. QuadraticUtils.curveTo = function (cpX, cpY, toX, toY, points) {
  1356. var fromX = points[points.length - 2];
  1357. var fromY = points[points.length - 1];
  1358. var n = GRAPHICS_CURVES._segmentsCount(QuadraticUtils.curveLength(fromX, fromY, cpX, cpY, toX, toY));
  1359. var xa = 0;
  1360. var ya = 0;
  1361. for (var i = 1; i <= n; ++i) {
  1362. var j = i / n;
  1363. xa = fromX + ((cpX - fromX) * j);
  1364. ya = fromY + ((cpY - fromY) * j);
  1365. points.push(xa + (((cpX + ((toX - cpX) * j)) - xa) * j), ya + (((cpY + ((toY - cpY) * j)) - ya) * j));
  1366. }
  1367. };
  1368. return QuadraticUtils;
  1369. }());
  1370. /**
  1371. * A structure to hold interim batch objects for Graphics.
  1372. * @memberof PIXI.graphicsUtils
  1373. */
  1374. var BatchPart = /** @class */ (function () {
  1375. function BatchPart() {
  1376. this.reset();
  1377. }
  1378. /**
  1379. * Begin batch part.
  1380. * @param style
  1381. * @param startIndex
  1382. * @param attribStart
  1383. */
  1384. BatchPart.prototype.begin = function (style, startIndex, attribStart) {
  1385. this.reset();
  1386. this.style = style;
  1387. this.start = startIndex;
  1388. this.attribStart = attribStart;
  1389. };
  1390. /**
  1391. * End batch part.
  1392. * @param endIndex
  1393. * @param endAttrib
  1394. */
  1395. BatchPart.prototype.end = function (endIndex, endAttrib) {
  1396. this.attribSize = endAttrib - this.attribStart;
  1397. this.size = endIndex - this.start;
  1398. };
  1399. BatchPart.prototype.reset = function () {
  1400. this.style = null;
  1401. this.size = 0;
  1402. this.start = 0;
  1403. this.attribStart = 0;
  1404. this.attribSize = 0;
  1405. };
  1406. return BatchPart;
  1407. }());
  1408. /**
  1409. * Generalized convenience utilities for Graphics.
  1410. * @namespace graphicsUtils
  1411. * @memberof PIXI
  1412. */
  1413. var _a;
  1414. /**
  1415. * Map of fill commands for each shape type.
  1416. * @memberof PIXI.graphicsUtils
  1417. * @member {object} FILL_COMMANDS
  1418. */
  1419. var FILL_COMMANDS = (_a = {},
  1420. _a[math.SHAPES.POLY] = buildPoly,
  1421. _a[math.SHAPES.CIRC] = buildCircle,
  1422. _a[math.SHAPES.ELIP] = buildCircle,
  1423. _a[math.SHAPES.RECT] = buildRectangle,
  1424. _a[math.SHAPES.RREC] = buildRoundedRectangle,
  1425. _a);
  1426. /**
  1427. * Batch pool, stores unused batches for preventing allocations.
  1428. * @memberof PIXI.graphicsUtils
  1429. * @member {Array<PIXI.graphicsUtils.BatchPart>} BATCH_POOL
  1430. */
  1431. var BATCH_POOL = [];
  1432. /**
  1433. * Draw call pool, stores unused draw calls for preventing allocations.
  1434. * @memberof PIXI.graphicsUtils
  1435. * @member {Array<PIXI.BatchDrawCall>} DRAW_CALL_POOL
  1436. */
  1437. var DRAW_CALL_POOL = [];
  1438. /**
  1439. * A class to contain data useful for Graphics objects
  1440. * @memberof PIXI
  1441. */
  1442. var GraphicsData = /** @class */ (function () {
  1443. /**
  1444. * @param {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} shape - The shape object to draw.
  1445. * @param fillStyle - the width of the line to draw
  1446. * @param lineStyle - the color of the line to draw
  1447. * @param matrix - Transform matrix
  1448. */
  1449. function GraphicsData(shape, fillStyle, lineStyle, matrix) {
  1450. if (fillStyle === void 0) { fillStyle = null; }
  1451. if (lineStyle === void 0) { lineStyle = null; }
  1452. if (matrix === void 0) { matrix = null; }
  1453. /** The collection of points. */
  1454. this.points = [];
  1455. /** The collection of holes. */
  1456. this.holes = [];
  1457. this.shape = shape;
  1458. this.lineStyle = lineStyle;
  1459. this.fillStyle = fillStyle;
  1460. this.matrix = matrix;
  1461. this.type = shape.type;
  1462. }
  1463. /**
  1464. * Creates a new GraphicsData object with the same values as this one.
  1465. * @returns - Cloned GraphicsData object
  1466. */
  1467. GraphicsData.prototype.clone = function () {
  1468. return new GraphicsData(this.shape, this.fillStyle, this.lineStyle, this.matrix);
  1469. };
  1470. /** Destroys the Graphics data. */
  1471. GraphicsData.prototype.destroy = function () {
  1472. this.shape = null;
  1473. this.holes.length = 0;
  1474. this.holes = null;
  1475. this.points.length = 0;
  1476. this.points = null;
  1477. this.lineStyle = null;
  1478. this.fillStyle = null;
  1479. };
  1480. return GraphicsData;
  1481. }());
  1482. var tmpPoint = new math.Point();
  1483. /**
  1484. * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
  1485. * rectangles to the display, and to color and fill them.
  1486. *
  1487. * GraphicsGeometry is designed to not be continually updating the geometry since it's expensive
  1488. * to re-tesselate using **earcut**. Consider using {@link PIXI.Mesh} for this use-case, it's much faster.
  1489. * @memberof PIXI
  1490. */
  1491. var GraphicsGeometry = /** @class */ (function (_super) {
  1492. __extends(GraphicsGeometry, _super);
  1493. // eslint-disable-next-line @typescript-eslint/no-useless-constructor
  1494. function GraphicsGeometry() {
  1495. var _this = _super.call(this) || this;
  1496. /** Minimal distance between points that are considered different. Affects line tesselation. */
  1497. _this.closePointEps = 1e-4;
  1498. /** Padding to add to the bounds. */
  1499. _this.boundsPadding = 0;
  1500. _this.uvsFloat32 = null;
  1501. _this.indicesUint16 = null;
  1502. _this.batchable = false;
  1503. /** An array of points to draw, 2 numbers per point */
  1504. _this.points = [];
  1505. /** The collection of colors */
  1506. _this.colors = [];
  1507. /** The UVs collection */
  1508. _this.uvs = [];
  1509. /** The indices of the vertices */
  1510. _this.indices = [];
  1511. /** Reference to the texture IDs. */
  1512. _this.textureIds = [];
  1513. /**
  1514. * The collection of drawn shapes.
  1515. * @member {PIXI.GraphicsData[]}
  1516. */
  1517. _this.graphicsData = [];
  1518. /**
  1519. * List of current draw calls drived from the batches.
  1520. * @member {PIXI.BatchDrawCall[]}
  1521. */
  1522. _this.drawCalls = [];
  1523. /** Batches need to regenerated if the geometry is updated. */
  1524. _this.batchDirty = -1;
  1525. /**
  1526. * Intermediate abstract format sent to batch system.
  1527. * Can be converted to drawCalls or to batchable objects.
  1528. * @member {PIXI.graphicsUtils.BatchPart[]}
  1529. */
  1530. _this.batches = [];
  1531. /** Used to detect if the graphics object has changed. */
  1532. _this.dirty = 0;
  1533. /** Used to check if the cache is dirty. */
  1534. _this.cacheDirty = -1;
  1535. /** Used to detect if we cleared the graphicsData. */
  1536. _this.clearDirty = 0;
  1537. /** Index of the last batched shape in the stack of calls. */
  1538. _this.shapeIndex = 0;
  1539. /** Cached bounds. */
  1540. _this._bounds = new display.Bounds();
  1541. /** The bounds dirty flag. */
  1542. _this.boundsDirty = -1;
  1543. return _this;
  1544. }
  1545. Object.defineProperty(GraphicsGeometry.prototype, "bounds", {
  1546. /**
  1547. * Get the current bounds of the graphic geometry.
  1548. * @readonly
  1549. */
  1550. get: function () {
  1551. this.updateBatches();
  1552. if (this.boundsDirty !== this.dirty) {
  1553. this.boundsDirty = this.dirty;
  1554. this.calculateBounds();
  1555. }
  1556. return this._bounds;
  1557. },
  1558. enumerable: false,
  1559. configurable: true
  1560. });
  1561. /** Call if you changed graphicsData manually. Empties all batch buffers. */
  1562. GraphicsGeometry.prototype.invalidate = function () {
  1563. this.boundsDirty = -1;
  1564. this.dirty++;
  1565. this.batchDirty++;
  1566. this.shapeIndex = 0;
  1567. this.points.length = 0;
  1568. this.colors.length = 0;
  1569. this.uvs.length = 0;
  1570. this.indices.length = 0;
  1571. this.textureIds.length = 0;
  1572. for (var i = 0; i < this.drawCalls.length; i++) {
  1573. this.drawCalls[i].texArray.clear();
  1574. DRAW_CALL_POOL.push(this.drawCalls[i]);
  1575. }
  1576. this.drawCalls.length = 0;
  1577. for (var i = 0; i < this.batches.length; i++) {
  1578. var batchPart = this.batches[i];
  1579. batchPart.reset();
  1580. BATCH_POOL.push(batchPart);
  1581. }
  1582. this.batches.length = 0;
  1583. };
  1584. /**
  1585. * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
  1586. * @returns - This GraphicsGeometry object. Good for chaining method calls
  1587. */
  1588. GraphicsGeometry.prototype.clear = function () {
  1589. if (this.graphicsData.length > 0) {
  1590. this.invalidate();
  1591. this.clearDirty++;
  1592. this.graphicsData.length = 0;
  1593. }
  1594. return this;
  1595. };
  1596. /**
  1597. * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
  1598. * @param {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} shape - The shape object to draw.
  1599. * @param fillStyle - Defines style of the fill.
  1600. * @param lineStyle - Defines style of the lines.
  1601. * @param matrix - Transform applied to the points of the shape.
  1602. * @returns - Returns geometry for chaining.
  1603. */
  1604. GraphicsGeometry.prototype.drawShape = function (shape, fillStyle, lineStyle, matrix) {
  1605. if (fillStyle === void 0) { fillStyle = null; }
  1606. if (lineStyle === void 0) { lineStyle = null; }
  1607. if (matrix === void 0) { matrix = null; }
  1608. var data = new GraphicsData(shape, fillStyle, lineStyle, matrix);
  1609. this.graphicsData.push(data);
  1610. this.dirty++;
  1611. return this;
  1612. };
  1613. /**
  1614. * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
  1615. * @param {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} shape - The shape object to draw.
  1616. * @param matrix - Transform applied to the points of the shape.
  1617. * @returns - Returns geometry for chaining.
  1618. */
  1619. GraphicsGeometry.prototype.drawHole = function (shape, matrix) {
  1620. if (matrix === void 0) { matrix = null; }
  1621. if (!this.graphicsData.length) {
  1622. return null;
  1623. }
  1624. var data = new GraphicsData(shape, null, null, matrix);
  1625. var lastShape = this.graphicsData[this.graphicsData.length - 1];
  1626. data.lineStyle = lastShape.lineStyle;
  1627. lastShape.holes.push(data);
  1628. this.dirty++;
  1629. return this;
  1630. };
  1631. /** Destroys the GraphicsGeometry object. */
  1632. GraphicsGeometry.prototype.destroy = function () {
  1633. _super.prototype.destroy.call(this);
  1634. // destroy each of the GraphicsData objects
  1635. for (var i = 0; i < this.graphicsData.length; ++i) {
  1636. this.graphicsData[i].destroy();
  1637. }
  1638. this.points.length = 0;
  1639. this.points = null;
  1640. this.colors.length = 0;
  1641. this.colors = null;
  1642. this.uvs.length = 0;
  1643. this.uvs = null;
  1644. this.indices.length = 0;
  1645. this.indices = null;
  1646. this.indexBuffer.destroy();
  1647. this.indexBuffer = null;
  1648. this.graphicsData.length = 0;
  1649. this.graphicsData = null;
  1650. this.drawCalls.length = 0;
  1651. this.drawCalls = null;
  1652. this.batches.length = 0;
  1653. this.batches = null;
  1654. this._bounds = null;
  1655. };
  1656. /**
  1657. * Check to see if a point is contained within this geometry.
  1658. * @param point - Point to check if it's contained.
  1659. * @returns {boolean} `true` if the point is contained within geometry.
  1660. */
  1661. GraphicsGeometry.prototype.containsPoint = function (point) {
  1662. var graphicsData = this.graphicsData;
  1663. for (var i = 0; i < graphicsData.length; ++i) {
  1664. var data = graphicsData[i];
  1665. if (!data.fillStyle.visible) {
  1666. continue;
  1667. }
  1668. // only deal with fills..
  1669. if (data.shape) {
  1670. if (data.matrix) {
  1671. data.matrix.applyInverse(point, tmpPoint);
  1672. }
  1673. else {
  1674. tmpPoint.copyFrom(point);
  1675. }
  1676. if (data.shape.contains(tmpPoint.x, tmpPoint.y)) {
  1677. var hitHole = false;
  1678. if (data.holes) {
  1679. for (var i_1 = 0; i_1 < data.holes.length; i_1++) {
  1680. var hole = data.holes[i_1];
  1681. if (hole.shape.contains(tmpPoint.x, tmpPoint.y)) {
  1682. hitHole = true;
  1683. break;
  1684. }
  1685. }
  1686. }
  1687. if (!hitHole) {
  1688. return true;
  1689. }
  1690. }
  1691. }
  1692. }
  1693. return false;
  1694. };
  1695. /**
  1696. * Generates intermediate batch data. Either gets converted to drawCalls
  1697. * or used to convert to batch objects directly by the Graphics object.
  1698. */
  1699. GraphicsGeometry.prototype.updateBatches = function () {
  1700. if (!this.graphicsData.length) {
  1701. this.batchable = true;
  1702. return;
  1703. }
  1704. if (!this.validateBatching()) {
  1705. return;
  1706. }
  1707. this.cacheDirty = this.dirty;
  1708. var uvs = this.uvs;
  1709. var graphicsData = this.graphicsData;
  1710. var batchPart = null;
  1711. var currentStyle = null;
  1712. if (this.batches.length > 0) {
  1713. batchPart = this.batches[this.batches.length - 1];
  1714. currentStyle = batchPart.style;
  1715. }
  1716. for (var i = this.shapeIndex; i < graphicsData.length; i++) {
  1717. this.shapeIndex++;
  1718. var data = graphicsData[i];
  1719. var fillStyle = data.fillStyle;
  1720. var lineStyle = data.lineStyle;
  1721. var command = FILL_COMMANDS[data.type];
  1722. // build out the shapes points..
  1723. command.build(data);
  1724. if (data.matrix) {
  1725. this.transformPoints(data.points, data.matrix);
  1726. }
  1727. if (fillStyle.visible || lineStyle.visible) {
  1728. this.processHoles(data.holes);
  1729. }
  1730. for (var j = 0; j < 2; j++) {
  1731. var style = (j === 0) ? fillStyle : lineStyle;
  1732. if (!style.visible)
  1733. { continue; }
  1734. var nextTexture = style.texture.baseTexture;
  1735. var index_1 = this.indices.length;
  1736. var attribIndex = this.points.length / 2;
  1737. nextTexture.wrapMode = constants.WRAP_MODES.REPEAT;
  1738. if (j === 0) {
  1739. this.processFill(data);
  1740. }
  1741. else {
  1742. this.processLine(data);
  1743. }
  1744. var size = (this.points.length / 2) - attribIndex;
  1745. if (size === 0)
  1746. { continue; }
  1747. // close batch if style is different
  1748. if (batchPart && !this._compareStyles(currentStyle, style)) {
  1749. batchPart.end(index_1, attribIndex);
  1750. batchPart = null;
  1751. }
  1752. // spawn new batch if its first batch or previous was closed
  1753. if (!batchPart) {
  1754. batchPart = BATCH_POOL.pop() || new BatchPart();
  1755. batchPart.begin(style, index_1, attribIndex);
  1756. this.batches.push(batchPart);
  1757. currentStyle = style;
  1758. }
  1759. this.addUvs(this.points, uvs, style.texture, attribIndex, size, style.matrix);
  1760. }
  1761. }
  1762. var index = this.indices.length;
  1763. var attrib = this.points.length / 2;
  1764. if (batchPart) {
  1765. batchPart.end(index, attrib);
  1766. }
  1767. if (this.batches.length === 0) {
  1768. // there are no visible styles in GraphicsData
  1769. // its possible that someone wants Graphics just for the bounds
  1770. this.batchable = true;
  1771. return;
  1772. }
  1773. var need32 = attrib > 0xffff;
  1774. // prevent allocation when length is same as buffer
  1775. if (this.indicesUint16 && this.indices.length === this.indicesUint16.length
  1776. && need32 === (this.indicesUint16.BYTES_PER_ELEMENT > 2)) {
  1777. this.indicesUint16.set(this.indices);
  1778. }
  1779. else {
  1780. this.indicesUint16 = need32 ? new Uint32Array(this.indices) : new Uint16Array(this.indices);
  1781. }
  1782. // TODO make this a const..
  1783. this.batchable = this.isBatchable();
  1784. if (this.batchable) {
  1785. this.packBatches();
  1786. }
  1787. else {
  1788. this.buildDrawCalls();
  1789. }
  1790. };
  1791. /**
  1792. * Affinity check
  1793. * @param styleA
  1794. * @param styleB
  1795. */
  1796. GraphicsGeometry.prototype._compareStyles = function (styleA, styleB) {
  1797. if (!styleA || !styleB) {
  1798. return false;
  1799. }
  1800. if (styleA.texture.baseTexture !== styleB.texture.baseTexture) {
  1801. return false;
  1802. }
  1803. if (styleA.color + styleA.alpha !== styleB.color + styleB.alpha) {
  1804. return false;
  1805. }
  1806. if (!!styleA.native !== !!styleB.native) {
  1807. return false;
  1808. }
  1809. return true;
  1810. };
  1811. /** Test geometry for batching process. */
  1812. GraphicsGeometry.prototype.validateBatching = function () {
  1813. if (this.dirty === this.cacheDirty || !this.graphicsData.length) {
  1814. return false;
  1815. }
  1816. for (var i = 0, l = this.graphicsData.length; i < l; i++) {
  1817. var data = this.graphicsData[i];
  1818. var fill = data.fillStyle;
  1819. var line = data.lineStyle;
  1820. if (fill && !fill.texture.baseTexture.valid)
  1821. { return false; }
  1822. if (line && !line.texture.baseTexture.valid)
  1823. { return false; }
  1824. }
  1825. return true;
  1826. };
  1827. /** Offset the indices so that it works with the batcher. */
  1828. GraphicsGeometry.prototype.packBatches = function () {
  1829. this.batchDirty++;
  1830. this.uvsFloat32 = new Float32Array(this.uvs);
  1831. var batches = this.batches;
  1832. for (var i = 0, l = batches.length; i < l; i++) {
  1833. var batch = batches[i];
  1834. for (var j = 0; j < batch.size; j++) {
  1835. var index = batch.start + j;
  1836. this.indicesUint16[index] = this.indicesUint16[index] - batch.attribStart;
  1837. }
  1838. }
  1839. };
  1840. /**
  1841. * Checks to see if this graphics geometry can be batched.
  1842. * Currently it needs to be small enough and not contain any native lines.
  1843. */
  1844. GraphicsGeometry.prototype.isBatchable = function () {
  1845. // prevent heavy mesh batching
  1846. if (this.points.length > 0xffff * 2) {
  1847. return false;
  1848. }
  1849. var batches = this.batches;
  1850. for (var i = 0; i < batches.length; i++) {
  1851. if (batches[i].style.native) {
  1852. return false;
  1853. }
  1854. }
  1855. return (this.points.length < GraphicsGeometry.BATCHABLE_SIZE * 2);
  1856. };
  1857. /** Converts intermediate batches data to drawCalls. */
  1858. GraphicsGeometry.prototype.buildDrawCalls = function () {
  1859. var TICK = ++core.BaseTexture._globalBatch;
  1860. for (var i = 0; i < this.drawCalls.length; i++) {
  1861. this.drawCalls[i].texArray.clear();
  1862. DRAW_CALL_POOL.push(this.drawCalls[i]);
  1863. }
  1864. this.drawCalls.length = 0;
  1865. var colors = this.colors;
  1866. var textureIds = this.textureIds;
  1867. var currentGroup = DRAW_CALL_POOL.pop();
  1868. if (!currentGroup) {
  1869. currentGroup = new core.BatchDrawCall();
  1870. currentGroup.texArray = new core.BatchTextureArray();
  1871. }
  1872. currentGroup.texArray.count = 0;
  1873. currentGroup.start = 0;
  1874. currentGroup.size = 0;
  1875. currentGroup.type = constants.DRAW_MODES.TRIANGLES;
  1876. var textureCount = 0;
  1877. var currentTexture = null;
  1878. var textureId = 0;
  1879. var native = false;
  1880. var drawMode = constants.DRAW_MODES.TRIANGLES;
  1881. var index = 0;
  1882. this.drawCalls.push(currentGroup);
  1883. // TODO - this can be simplified
  1884. for (var i = 0; i < this.batches.length; i++) {
  1885. var data = this.batches[i];
  1886. // TODO add some full on MAX_TEXTURE CODE..
  1887. var MAX_TEXTURES = 8;
  1888. // Forced cast for checking `native` without errors
  1889. var style = data.style;
  1890. var nextTexture = style.texture.baseTexture;
  1891. if (native !== !!style.native) {
  1892. native = !!style.native;
  1893. drawMode = native ? constants.DRAW_MODES.LINES : constants.DRAW_MODES.TRIANGLES;
  1894. // force the batch to break!
  1895. currentTexture = null;
  1896. textureCount = MAX_TEXTURES;
  1897. TICK++;
  1898. }
  1899. if (currentTexture !== nextTexture) {
  1900. currentTexture = nextTexture;
  1901. if (nextTexture._batchEnabled !== TICK) {
  1902. if (textureCount === MAX_TEXTURES) {
  1903. TICK++;
  1904. textureCount = 0;
  1905. if (currentGroup.size > 0) {
  1906. currentGroup = DRAW_CALL_POOL.pop();
  1907. if (!currentGroup) {
  1908. currentGroup = new core.BatchDrawCall();
  1909. currentGroup.texArray = new core.BatchTextureArray();
  1910. }
  1911. this.drawCalls.push(currentGroup);
  1912. }
  1913. currentGroup.start = index;
  1914. currentGroup.size = 0;
  1915. currentGroup.texArray.count = 0;
  1916. currentGroup.type = drawMode;
  1917. }
  1918. // TODO add this to the render part..
  1919. // Hack! Because texture has protected `touched`
  1920. nextTexture.touched = 1; // touch;
  1921. nextTexture._batchEnabled = TICK;
  1922. nextTexture._batchLocation = textureCount;
  1923. nextTexture.wrapMode = constants.WRAP_MODES.REPEAT;
  1924. currentGroup.texArray.elements[currentGroup.texArray.count++] = nextTexture;
  1925. textureCount++;
  1926. }
  1927. }
  1928. currentGroup.size += data.size;
  1929. index += data.size;
  1930. textureId = nextTexture._batchLocation;
  1931. this.addColors(colors, style.color, style.alpha, data.attribSize, data.attribStart);
  1932. this.addTextureIds(textureIds, textureId, data.attribSize, data.attribStart);
  1933. }
  1934. core.BaseTexture._globalBatch = TICK;
  1935. // upload..
  1936. // merge for now!
  1937. this.packAttributes();
  1938. };
  1939. /** Packs attributes to single buffer. */
  1940. GraphicsGeometry.prototype.packAttributes = function () {
  1941. var verts = this.points;
  1942. var uvs = this.uvs;
  1943. var colors = this.colors;
  1944. var textureIds = this.textureIds;
  1945. // verts are 2 positions.. so we * by 3 as there are 6 properties.. then 4 cos its bytes
  1946. var glPoints = new ArrayBuffer(verts.length * 3 * 4);
  1947. var f32 = new Float32Array(glPoints);
  1948. var u32 = new Uint32Array(glPoints);
  1949. var p = 0;
  1950. for (var i = 0; i < verts.length / 2; i++) {
  1951. f32[p++] = verts[i * 2];
  1952. f32[p++] = verts[(i * 2) + 1];
  1953. f32[p++] = uvs[i * 2];
  1954. f32[p++] = uvs[(i * 2) + 1];
  1955. u32[p++] = colors[i];
  1956. f32[p++] = textureIds[i];
  1957. }
  1958. this._buffer.update(glPoints);
  1959. this._indexBuffer.update(this.indicesUint16);
  1960. };
  1961. /**
  1962. * Process fill part of Graphics.
  1963. * @param data
  1964. */
  1965. GraphicsGeometry.prototype.processFill = function (data) {
  1966. if (data.holes.length) {
  1967. buildPoly.triangulate(data, this);
  1968. }
  1969. else {
  1970. var command = FILL_COMMANDS[data.type];
  1971. command.triangulate(data, this);
  1972. }
  1973. };
  1974. /**
  1975. * Process line part of Graphics.
  1976. * @param data
  1977. */
  1978. GraphicsGeometry.prototype.processLine = function (data) {
  1979. buildLine(data, this);
  1980. for (var i = 0; i < data.holes.length; i++) {
  1981. buildLine(data.holes[i], this);
  1982. }
  1983. };
  1984. /**
  1985. * Process the holes data.
  1986. * @param holes
  1987. */
  1988. GraphicsGeometry.prototype.processHoles = function (holes) {
  1989. for (var i = 0; i < holes.length; i++) {
  1990. var hole = holes[i];
  1991. var command = FILL_COMMANDS[hole.type];
  1992. command.build(hole);
  1993. if (hole.matrix) {
  1994. this.transformPoints(hole.points, hole.matrix);
  1995. }
  1996. }
  1997. };
  1998. /** Update the local bounds of the object. Expensive to use performance-wise. */
  1999. GraphicsGeometry.prototype.calculateBounds = function () {
  2000. var bounds = this._bounds;
  2001. bounds.clear();
  2002. bounds.addVertexData(this.points, 0, this.points.length);
  2003. bounds.pad(this.boundsPadding, this.boundsPadding);
  2004. };
  2005. /**
  2006. * Transform points using matrix.
  2007. * @param points - Points to transform
  2008. * @param matrix - Transform matrix
  2009. */
  2010. GraphicsGeometry.prototype.transformPoints = function (points, matrix) {
  2011. for (var i = 0; i < points.length / 2; i++) {
  2012. var x = points[(i * 2)];
  2013. var y = points[(i * 2) + 1];
  2014. points[(i * 2)] = (matrix.a * x) + (matrix.c * y) + matrix.tx;
  2015. points[(i * 2) + 1] = (matrix.b * x) + (matrix.d * y) + matrix.ty;
  2016. }
  2017. };
  2018. /**
  2019. * Add colors.
  2020. * @param colors - List of colors to add to
  2021. * @param color - Color to add
  2022. * @param alpha - Alpha to use
  2023. * @param size - Number of colors to add
  2024. * @param offset
  2025. */
  2026. GraphicsGeometry.prototype.addColors = function (colors, color, alpha, size, offset) {
  2027. if (offset === void 0) { offset = 0; }
  2028. // TODO use the premultiply bits Ivan added
  2029. var rgb = (color >> 16) + (color & 0xff00) + ((color & 0xff) << 16);
  2030. var rgba = utils.premultiplyTint(rgb, alpha);
  2031. colors.length = Math.max(colors.length, offset + size);
  2032. for (var i = 0; i < size; i++) {
  2033. colors[offset + i] = rgba;
  2034. }
  2035. };
  2036. /**
  2037. * Add texture id that the shader/fragment wants to use.
  2038. * @param textureIds
  2039. * @param id
  2040. * @param size
  2041. * @param offset
  2042. */
  2043. GraphicsGeometry.prototype.addTextureIds = function (textureIds, id, size, offset) {
  2044. if (offset === void 0) { offset = 0; }
  2045. textureIds.length = Math.max(textureIds.length, offset + size);
  2046. for (var i = 0; i < size; i++) {
  2047. textureIds[offset + i] = id;
  2048. }
  2049. };
  2050. /**
  2051. * Generates the UVs for a shape.
  2052. * @param verts - Vertices
  2053. * @param uvs - UVs
  2054. * @param texture - Reference to Texture
  2055. * @param start - Index buffer start index.
  2056. * @param size - The size/length for index buffer.
  2057. * @param matrix - Optional transform for all points.
  2058. */
  2059. GraphicsGeometry.prototype.addUvs = function (verts, uvs, texture, start, size, matrix) {
  2060. if (matrix === void 0) { matrix = null; }
  2061. var index = 0;
  2062. var uvsStart = uvs.length;
  2063. var frame = texture.frame;
  2064. while (index < size) {
  2065. var x = verts[(start + index) * 2];
  2066. var y = verts[((start + index) * 2) + 1];
  2067. if (matrix) {
  2068. var nx = (matrix.a * x) + (matrix.c * y) + matrix.tx;
  2069. y = (matrix.b * x) + (matrix.d * y) + matrix.ty;
  2070. x = nx;
  2071. }
  2072. index++;
  2073. uvs.push(x / frame.width, y / frame.height);
  2074. }
  2075. var baseTexture = texture.baseTexture;
  2076. if (frame.width < baseTexture.width
  2077. || frame.height < baseTexture.height) {
  2078. this.adjustUvs(uvs, texture, uvsStart, size);
  2079. }
  2080. };
  2081. /**
  2082. * Modify uvs array according to position of texture region
  2083. * Does not work with rotated or trimmed textures
  2084. * @param uvs - array
  2085. * @param texture - region
  2086. * @param start - starting index for uvs
  2087. * @param size - how many points to adjust
  2088. */
  2089. GraphicsGeometry.prototype.adjustUvs = function (uvs, texture, start, size) {
  2090. var baseTexture = texture.baseTexture;
  2091. var eps = 1e-6;
  2092. var finish = start + (size * 2);
  2093. var frame = texture.frame;
  2094. var scaleX = frame.width / baseTexture.width;
  2095. var scaleY = frame.height / baseTexture.height;
  2096. var offsetX = frame.x / frame.width;
  2097. var offsetY = frame.y / frame.height;
  2098. var minX = Math.floor(uvs[start] + eps);
  2099. var minY = Math.floor(uvs[start + 1] + eps);
  2100. for (var i = start + 2; i < finish; i += 2) {
  2101. minX = Math.min(minX, Math.floor(uvs[i] + eps));
  2102. minY = Math.min(minY, Math.floor(uvs[i + 1] + eps));
  2103. }
  2104. offsetX -= minX;
  2105. offsetY -= minY;
  2106. for (var i = start; i < finish; i += 2) {
  2107. uvs[i] = (uvs[i] + offsetX) * scaleX;
  2108. uvs[i + 1] = (uvs[i + 1] + offsetY) * scaleY;
  2109. }
  2110. };
  2111. /**
  2112. * The maximum number of points to consider an object "batchable",
  2113. * able to be batched by the renderer's batch system.
  2114. \
  2115. */
  2116. GraphicsGeometry.BATCHABLE_SIZE = 100;
  2117. return GraphicsGeometry;
  2118. }(core.BatchGeometry));
  2119. /**
  2120. * Represents the line style for Graphics.
  2121. * @memberof PIXI
  2122. */
  2123. var LineStyle = /** @class */ (function (_super) {
  2124. __extends(LineStyle, _super);
  2125. function LineStyle() {
  2126. var _this = _super !== null && _super.apply(this, arguments) || this;
  2127. /** The width (thickness) of any lines drawn. */
  2128. _this.width = 0;
  2129. /** The alignment of any lines drawn (0.5 = middle, 1 = outer, 0 = inner). WebGL only. */
  2130. _this.alignment = 0.5;
  2131. /** If true the lines will be draw using LINES instead of TRIANGLE_STRIP. */
  2132. _this.native = false;
  2133. /**
  2134. * Line cap style.
  2135. * @member {PIXI.LINE_CAP}
  2136. * @default PIXI.LINE_CAP.BUTT
  2137. */
  2138. _this.cap = exports.LINE_CAP.BUTT;
  2139. /**
  2140. * Line join style.
  2141. * @member {PIXI.LINE_JOIN}
  2142. * @default PIXI.LINE_JOIN.MITER
  2143. */
  2144. _this.join = exports.LINE_JOIN.MITER;
  2145. /** Miter limit. */
  2146. _this.miterLimit = 10;
  2147. return _this;
  2148. }
  2149. /** Clones the object. */
  2150. LineStyle.prototype.clone = function () {
  2151. var obj = new LineStyle();
  2152. obj.color = this.color;
  2153. obj.alpha = this.alpha;
  2154. obj.texture = this.texture;
  2155. obj.matrix = this.matrix;
  2156. obj.visible = this.visible;
  2157. obj.width = this.width;
  2158. obj.alignment = this.alignment;
  2159. obj.native = this.native;
  2160. obj.cap = this.cap;
  2161. obj.join = this.join;
  2162. obj.miterLimit = this.miterLimit;
  2163. return obj;
  2164. };
  2165. /** Reset the line style to default. */
  2166. LineStyle.prototype.reset = function () {
  2167. _super.prototype.reset.call(this);
  2168. // Override default line style color
  2169. this.color = 0x0;
  2170. this.alignment = 0.5;
  2171. this.width = 0;
  2172. this.native = false;
  2173. };
  2174. return LineStyle;
  2175. }(FillStyle));
  2176. var temp = new Float32Array(3);
  2177. // a default shaders map used by graphics..
  2178. var DEFAULT_SHADERS = {};
  2179. /**
  2180. * The Graphics class is primarily used to render primitive shapes such as lines, circles and
  2181. * rectangles to the display, and to color and fill them. However, you can also use a Graphics
  2182. * object to build a list of primitives to use as a mask, or as a complex hitArea.
  2183. *
  2184. * Please note that due to legacy naming conventions, the behavior of some functions in this class
  2185. * can be confusing. Each call to `drawRect()`, `drawPolygon()`, etc. actually stores that primitive
  2186. * in the Geometry class's GraphicsGeometry object for later use in rendering or hit testing - the
  2187. * functions do not directly draw anything to the screen. Similarly, the `clear()` function doesn't
  2188. * change the screen, it simply resets the list of primitives, which can be useful if you want to
  2189. * rebuild the contents of an existing Graphics object.
  2190. *
  2191. * Once a GraphicsGeometry list is built, you can re-use it in other Geometry objects as
  2192. * an optimization, by passing it into a new Geometry object's constructor. Because of this
  2193. * ability, it's important to call `destroy()` on Geometry objects once you are done with them, to
  2194. * properly dereference each GraphicsGeometry and prevent memory leaks.
  2195. * @memberof PIXI
  2196. */
  2197. var Graphics = /** @class */ (function (_super) {
  2198. __extends(Graphics, _super);
  2199. /**
  2200. * @param geometry - Geometry to use, if omitted will create a new GraphicsGeometry instance.
  2201. */
  2202. function Graphics(geometry) {
  2203. if (geometry === void 0) { geometry = null; }
  2204. var _this = _super.call(this) || this;
  2205. /**
  2206. * Represents the vertex and fragment shaders that processes the geometry and runs on the GPU.
  2207. * Can be shared between multiple Graphics objects.
  2208. */
  2209. _this.shader = null;
  2210. /** Renderer plugin for batching */
  2211. _this.pluginName = 'batch';
  2212. /**
  2213. * Current path
  2214. * @readonly
  2215. */
  2216. _this.currentPath = null;
  2217. /** A collections of batches! These can be drawn by the renderer batch system. */
  2218. _this.batches = [];
  2219. /** Update dirty for limiting calculating tints for batches. */
  2220. _this.batchTint = -1;
  2221. /** Update dirty for limiting calculating batches.*/
  2222. _this.batchDirty = -1;
  2223. /** Copy of the object vertex data. */
  2224. _this.vertexData = null;
  2225. /** Current fill style. */
  2226. _this._fillStyle = new FillStyle();
  2227. /** Current line style. */
  2228. _this._lineStyle = new LineStyle();
  2229. /** Current shape transform matrix. */
  2230. _this._matrix = null;
  2231. /** Current hole mode is enabled. */
  2232. _this._holeMode = false;
  2233. /**
  2234. * Represents the WebGL state the Graphics required to render, excludes shader and geometry. E.g.,
  2235. * blend mode, culling, depth testing, direction of rendering triangles, backface, etc.
  2236. */
  2237. _this.state = core.State.for2d();
  2238. _this._geometry = geometry || new GraphicsGeometry();
  2239. _this._geometry.refCount++;
  2240. /**
  2241. * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
  2242. * This is useful if your graphics element does not change often, as it will speed up the rendering
  2243. * of the object in exchange for taking up texture memory. It is also useful if you need the graphics
  2244. * object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
  2245. * you are constantly redrawing the graphics element.
  2246. * @name cacheAsBitmap
  2247. * @member {boolean}
  2248. * @memberof PIXI.Graphics#
  2249. * @default false
  2250. */
  2251. _this._transformID = -1;
  2252. // Set default
  2253. _this.tint = 0xFFFFFF;
  2254. _this.blendMode = constants.BLEND_MODES.NORMAL;
  2255. return _this;
  2256. }
  2257. Object.defineProperty(Graphics.prototype, "geometry", {
  2258. /**
  2259. * Includes vertex positions, face indices, normals, colors, UVs, and
  2260. * custom attributes within buffers, reducing the cost of passing all
  2261. * this data to the GPU. Can be shared between multiple Mesh or Graphics objects.
  2262. * @readonly
  2263. */
  2264. get: function () {
  2265. return this._geometry;
  2266. },
  2267. enumerable: false,
  2268. configurable: true
  2269. });
  2270. /**
  2271. * Creates a new Graphics object with the same values as this one.
  2272. * Note that only the geometry of the object is cloned, not its transform (position,scale,etc)
  2273. * @returns - A clone of the graphics object
  2274. */
  2275. Graphics.prototype.clone = function () {
  2276. this.finishPoly();
  2277. return new Graphics(this._geometry);
  2278. };
  2279. Object.defineProperty(Graphics.prototype, "blendMode", {
  2280. get: function () {
  2281. return this.state.blendMode;
  2282. },
  2283. /**
  2284. * The blend mode to be applied to the graphic shape. Apply a value of
  2285. * `PIXI.BLEND_MODES.NORMAL` to reset the blend mode. Note that, since each
  2286. * primitive in the GraphicsGeometry list is rendered sequentially, modes
  2287. * such as `PIXI.BLEND_MODES.ADD` and `PIXI.BLEND_MODES.MULTIPLY` will
  2288. * be applied per-primitive.
  2289. * @default PIXI.BLEND_MODES.NORMAL
  2290. */
  2291. set: function (value) {
  2292. this.state.blendMode = value;
  2293. },
  2294. enumerable: false,
  2295. configurable: true
  2296. });
  2297. Object.defineProperty(Graphics.prototype, "tint", {
  2298. /**
  2299. * The tint applied to each graphic shape. This is a hex value. A value of
  2300. * 0xFFFFFF will remove any tint effect.
  2301. * @default 0xFFFFFF
  2302. */
  2303. get: function () {
  2304. return this._tint;
  2305. },
  2306. set: function (value) {
  2307. this._tint = value;
  2308. },
  2309. enumerable: false,
  2310. configurable: true
  2311. });
  2312. Object.defineProperty(Graphics.prototype, "fill", {
  2313. /**
  2314. * The current fill style.
  2315. * @readonly
  2316. */
  2317. get: function () {
  2318. return this._fillStyle;
  2319. },
  2320. enumerable: false,
  2321. configurable: true
  2322. });
  2323. Object.defineProperty(Graphics.prototype, "line", {
  2324. /**
  2325. * The current line style.
  2326. * @readonly
  2327. */
  2328. get: function () {
  2329. return this._lineStyle;
  2330. },
  2331. enumerable: false,
  2332. configurable: true
  2333. });
  2334. Graphics.prototype.lineStyle = function (options, color, alpha, alignment, native) {
  2335. if (options === void 0) { options = null; }
  2336. if (color === void 0) { color = 0x0; }
  2337. if (alpha === void 0) { alpha = 1; }
  2338. if (alignment === void 0) { alignment = 0.5; }
  2339. if (native === void 0) { native = false; }
  2340. // Support non-object params: (width, color, alpha, alignment, native)
  2341. if (typeof options === 'number') {
  2342. options = { width: options, color: color, alpha: alpha, alignment: alignment, native: native };
  2343. }
  2344. return this.lineTextureStyle(options);
  2345. };
  2346. /**
  2347. * Like line style but support texture for line fill.
  2348. * @param [options] - Collection of options for setting line style.
  2349. * @param {number} [options.width=0] - width of the line to draw, will update the objects stored style
  2350. * @param {PIXI.Texture} [options.texture=PIXI.Texture.WHITE] - Texture to use
  2351. * @param {number} [options.color=0x0] - color of the line to draw, will update the objects stored style.
  2352. * Default 0xFFFFFF if texture present.
  2353. * @param {number} [options.alpha=1] - alpha of the line to draw, will update the objects stored style
  2354. * @param {PIXI.Matrix} [options.matrix=null] - Texture matrix to transform texture
  2355. * @param {number} [options.alignment=0.5] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outer).
  2356. * WebGL only.
  2357. * @param {boolean} [options.native=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP
  2358. * @param {PIXI.LINE_CAP}[options.cap=PIXI.LINE_CAP.BUTT] - line cap style
  2359. * @param {PIXI.LINE_JOIN}[options.join=PIXI.LINE_JOIN.MITER] - line join style
  2360. * @param {number}[options.miterLimit=10] - miter limit ratio
  2361. * @returns {PIXI.Graphics} This Graphics object. Good for chaining method calls
  2362. */
  2363. Graphics.prototype.lineTextureStyle = function (options) {
  2364. // Apply defaults
  2365. options = Object.assign({
  2366. width: 0,
  2367. texture: core.Texture.WHITE,
  2368. color: (options && options.texture) ? 0xFFFFFF : 0x0,
  2369. alpha: 1,
  2370. matrix: null,
  2371. alignment: 0.5,
  2372. native: false,
  2373. cap: exports.LINE_CAP.BUTT,
  2374. join: exports.LINE_JOIN.MITER,
  2375. miterLimit: 10,
  2376. }, options);
  2377. if (this.currentPath) {
  2378. this.startPoly();
  2379. }
  2380. var visible = options.width > 0 && options.alpha > 0;
  2381. if (!visible) {
  2382. this._lineStyle.reset();
  2383. }
  2384. else {
  2385. if (options.matrix) {
  2386. options.matrix = options.matrix.clone();
  2387. options.matrix.invert();
  2388. }
  2389. Object.assign(this._lineStyle, { visible: visible }, options);
  2390. }
  2391. return this;
  2392. };
  2393. /**
  2394. * Start a polygon object internally.
  2395. * @protected
  2396. */
  2397. Graphics.prototype.startPoly = function () {
  2398. if (this.currentPath) {
  2399. var points = this.currentPath.points;
  2400. var len = this.currentPath.points.length;
  2401. if (len > 2) {
  2402. this.drawShape(this.currentPath);
  2403. this.currentPath = new math.Polygon();
  2404. this.currentPath.closeStroke = false;
  2405. this.currentPath.points.push(points[len - 2], points[len - 1]);
  2406. }
  2407. }
  2408. else {
  2409. this.currentPath = new math.Polygon();
  2410. this.currentPath.closeStroke = false;
  2411. }
  2412. };
  2413. /**
  2414. * Finish the polygon object.
  2415. * @protected
  2416. */
  2417. Graphics.prototype.finishPoly = function () {
  2418. if (this.currentPath) {
  2419. if (this.currentPath.points.length > 2) {
  2420. this.drawShape(this.currentPath);
  2421. this.currentPath = null;
  2422. }
  2423. else {
  2424. this.currentPath.points.length = 0;
  2425. }
  2426. }
  2427. };
  2428. /**
  2429. * Moves the current drawing position to x, y.
  2430. * @param x - the X coordinate to move to
  2431. * @param y - the Y coordinate to move to
  2432. * @returns - This Graphics object. Good for chaining method calls
  2433. */
  2434. Graphics.prototype.moveTo = function (x, y) {
  2435. this.startPoly();
  2436. this.currentPath.points[0] = x;
  2437. this.currentPath.points[1] = y;
  2438. return this;
  2439. };
  2440. /**
  2441. * Draws a line using the current line style from the current drawing position to (x, y);
  2442. * The current drawing position is then set to (x, y).
  2443. * @param x - the X coordinate to draw to
  2444. * @param y - the Y coordinate to draw to
  2445. * @returns - This Graphics object. Good for chaining method calls
  2446. */
  2447. Graphics.prototype.lineTo = function (x, y) {
  2448. if (!this.currentPath) {
  2449. this.moveTo(0, 0);
  2450. }
  2451. // remove duplicates..
  2452. var points = this.currentPath.points;
  2453. var fromX = points[points.length - 2];
  2454. var fromY = points[points.length - 1];
  2455. if (fromX !== x || fromY !== y) {
  2456. points.push(x, y);
  2457. }
  2458. return this;
  2459. };
  2460. /**
  2461. * Initialize the curve
  2462. * @param x
  2463. * @param y
  2464. */
  2465. Graphics.prototype._initCurve = function (x, y) {
  2466. if (x === void 0) { x = 0; }
  2467. if (y === void 0) { y = 0; }
  2468. if (this.currentPath) {
  2469. if (this.currentPath.points.length === 0) {
  2470. this.currentPath.points = [x, y];
  2471. }
  2472. }
  2473. else {
  2474. this.moveTo(x, y);
  2475. }
  2476. };
  2477. /**
  2478. * Calculate the points for a quadratic bezier curve and then draws it.
  2479. * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
  2480. * @param cpX - Control point x
  2481. * @param cpY - Control point y
  2482. * @param toX - Destination point x
  2483. * @param toY - Destination point y
  2484. * @returns - This Graphics object. Good for chaining method calls
  2485. */
  2486. Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY) {
  2487. this._initCurve();
  2488. var points = this.currentPath.points;
  2489. if (points.length === 0) {
  2490. this.moveTo(0, 0);
  2491. }
  2492. QuadraticUtils.curveTo(cpX, cpY, toX, toY, points);
  2493. return this;
  2494. };
  2495. /**
  2496. * Calculate the points for a bezier curve and then draws it.
  2497. * @param cpX - Control point x
  2498. * @param cpY - Control point y
  2499. * @param cpX2 - Second Control point x
  2500. * @param cpY2 - Second Control point y
  2501. * @param toX - Destination point x
  2502. * @param toY - Destination point y
  2503. * @returns This Graphics object. Good for chaining method calls
  2504. */
  2505. Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY) {
  2506. this._initCurve();
  2507. BezierUtils.curveTo(cpX, cpY, cpX2, cpY2, toX, toY, this.currentPath.points);
  2508. return this;
  2509. };
  2510. /**
  2511. * The arcTo() method creates an arc/curve between two tangents on the canvas.
  2512. *
  2513. * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
  2514. * @param x1 - The x-coordinate of the first tangent point of the arc
  2515. * @param y1 - The y-coordinate of the first tangent point of the arc
  2516. * @param x2 - The x-coordinate of the end of the arc
  2517. * @param y2 - The y-coordinate of the end of the arc
  2518. * @param radius - The radius of the arc
  2519. * @returns - This Graphics object. Good for chaining method calls
  2520. */
  2521. Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius) {
  2522. this._initCurve(x1, y1);
  2523. var points = this.currentPath.points;
  2524. var result = ArcUtils.curveTo(x1, y1, x2, y2, radius, points);
  2525. if (result) {
  2526. var cx = result.cx, cy = result.cy, radius_1 = result.radius, startAngle = result.startAngle, endAngle = result.endAngle, anticlockwise = result.anticlockwise;
  2527. this.arc(cx, cy, radius_1, startAngle, endAngle, anticlockwise);
  2528. }
  2529. return this;
  2530. };
  2531. /**
  2532. * The arc method creates an arc/curve (used to create circles, or parts of circles).
  2533. * @param cx - The x-coordinate of the center of the circle
  2534. * @param cy - The y-coordinate of the center of the circle
  2535. * @param radius - The radius of the circle
  2536. * @param startAngle - The starting angle, in radians (0 is at the 3 o'clock position
  2537. * of the arc's circle)
  2538. * @param endAngle - The ending angle, in radians
  2539. * @param anticlockwise - Specifies whether the drawing should be
  2540. * counter-clockwise or clockwise. False is default, and indicates clockwise, while true
  2541. * indicates counter-clockwise.
  2542. * @returns - This Graphics object. Good for chaining method calls
  2543. */
  2544. Graphics.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise) {
  2545. if (anticlockwise === void 0) { anticlockwise = false; }
  2546. if (startAngle === endAngle) {
  2547. return this;
  2548. }
  2549. if (!anticlockwise && endAngle <= startAngle) {
  2550. endAngle += math.PI_2;
  2551. }
  2552. else if (anticlockwise && startAngle <= endAngle) {
  2553. startAngle += math.PI_2;
  2554. }
  2555. var sweep = endAngle - startAngle;
  2556. if (sweep === 0) {
  2557. return this;
  2558. }
  2559. var startX = cx + (Math.cos(startAngle) * radius);
  2560. var startY = cy + (Math.sin(startAngle) * radius);
  2561. var eps = this._geometry.closePointEps;
  2562. // If the currentPath exists, take its points. Otherwise call `moveTo` to start a path.
  2563. var points = this.currentPath ? this.currentPath.points : null;
  2564. if (points) {
  2565. // TODO: make a better fix.
  2566. // We check how far our start is from the last existing point
  2567. var xDiff = Math.abs(points[points.length - 2] - startX);
  2568. var yDiff = Math.abs(points[points.length - 1] - startY);
  2569. if (xDiff < eps && yDiff < eps) {
  2570. // If the point is very close, we don't add it, since this would lead to artifacts
  2571. // during tessellation due to floating point imprecision.
  2572. }
  2573. else {
  2574. points.push(startX, startY);
  2575. }
  2576. }
  2577. else {
  2578. this.moveTo(startX, startY);
  2579. points = this.currentPath.points;
  2580. }
  2581. ArcUtils.arc(startX, startY, cx, cy, radius, startAngle, endAngle, anticlockwise, points);
  2582. return this;
  2583. };
  2584. /**
  2585. * Specifies a simple one-color fill that subsequent calls to other Graphics methods
  2586. * (such as lineTo() or drawCircle()) use when drawing.
  2587. * @param color - the color of the fill
  2588. * @param alpha - the alpha of the fill
  2589. * @returns - This Graphics object. Good for chaining method calls
  2590. */
  2591. Graphics.prototype.beginFill = function (color, alpha) {
  2592. if (color === void 0) { color = 0; }
  2593. if (alpha === void 0) { alpha = 1; }
  2594. return this.beginTextureFill({ texture: core.Texture.WHITE, color: color, alpha: alpha });
  2595. };
  2596. /**
  2597. * Begin the texture fill
  2598. * @param options - Object object.
  2599. * @param {PIXI.Texture} [options.texture=PIXI.Texture.WHITE] - Texture to fill
  2600. * @param {number} [options.color=0xffffff] - Background to fill behind texture
  2601. * @param {number} [options.alpha=1] - Alpha of fill
  2602. * @param {PIXI.Matrix} [options.matrix=null] - Transform matrix
  2603. * @returns {PIXI.Graphics} This Graphics object. Good for chaining method calls
  2604. */
  2605. Graphics.prototype.beginTextureFill = function (options) {
  2606. // Apply defaults
  2607. options = Object.assign({
  2608. texture: core.Texture.WHITE,
  2609. color: 0xFFFFFF,
  2610. alpha: 1,
  2611. matrix: null,
  2612. }, options);
  2613. if (this.currentPath) {
  2614. this.startPoly();
  2615. }
  2616. var visible = options.alpha > 0;
  2617. if (!visible) {
  2618. this._fillStyle.reset();
  2619. }
  2620. else {
  2621. if (options.matrix) {
  2622. options.matrix = options.matrix.clone();
  2623. options.matrix.invert();
  2624. }
  2625. Object.assign(this._fillStyle, { visible: visible }, options);
  2626. }
  2627. return this;
  2628. };
  2629. /**
  2630. * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
  2631. * @returns - This Graphics object. Good for chaining method calls
  2632. */
  2633. Graphics.prototype.endFill = function () {
  2634. this.finishPoly();
  2635. this._fillStyle.reset();
  2636. return this;
  2637. };
  2638. /**
  2639. * Draws a rectangle shape.
  2640. * @param x - The X coord of the top-left of the rectangle
  2641. * @param y - The Y coord of the top-left of the rectangle
  2642. * @param width - The width of the rectangle
  2643. * @param height - The height of the rectangle
  2644. * @returns - This Graphics object. Good for chaining method calls
  2645. */
  2646. Graphics.prototype.drawRect = function (x, y, width, height) {
  2647. return this.drawShape(new math.Rectangle(x, y, width, height));
  2648. };
  2649. /**
  2650. * Draw a rectangle shape with rounded/beveled corners.
  2651. * @param x - The X coord of the top-left of the rectangle
  2652. * @param y - The Y coord of the top-left of the rectangle
  2653. * @param width - The width of the rectangle
  2654. * @param height - The height of the rectangle
  2655. * @param radius - Radius of the rectangle corners
  2656. * @returns - This Graphics object. Good for chaining method calls
  2657. */
  2658. Graphics.prototype.drawRoundedRect = function (x, y, width, height, radius) {
  2659. return this.drawShape(new math.RoundedRectangle(x, y, width, height, radius));
  2660. };
  2661. /**
  2662. * Draws a circle.
  2663. * @param x - The X coordinate of the center of the circle
  2664. * @param y - The Y coordinate of the center of the circle
  2665. * @param radius - The radius of the circle
  2666. * @returns - This Graphics object. Good for chaining method calls
  2667. */
  2668. Graphics.prototype.drawCircle = function (x, y, radius) {
  2669. return this.drawShape(new math.Circle(x, y, radius));
  2670. };
  2671. /**
  2672. * Draws an ellipse.
  2673. * @param x - The X coordinate of the center of the ellipse
  2674. * @param y - The Y coordinate of the center of the ellipse
  2675. * @param width - The half width of the ellipse
  2676. * @param height - The half height of the ellipse
  2677. * @returns - This Graphics object. Good for chaining method calls
  2678. */
  2679. Graphics.prototype.drawEllipse = function (x, y, width, height) {
  2680. return this.drawShape(new math.Ellipse(x, y, width, height));
  2681. };
  2682. /**
  2683. * Draws a polygon using the given path.
  2684. * @param {number[]|PIXI.IPointData[]|PIXI.Polygon} path - The path data used to construct the polygon.
  2685. * @returns - This Graphics object. Good for chaining method calls
  2686. */
  2687. Graphics.prototype.drawPolygon = function () {
  2688. var arguments$1 = arguments;
  2689. var path = [];
  2690. for (var _i = 0; _i < arguments.length; _i++) {
  2691. path[_i] = arguments$1[_i];
  2692. }
  2693. var points;
  2694. var closeStroke = true; // !!this._fillStyle;
  2695. var poly = path[0];
  2696. // check if data has points..
  2697. if (poly.points) {
  2698. closeStroke = poly.closeStroke;
  2699. points = poly.points;
  2700. }
  2701. else if (Array.isArray(path[0])) {
  2702. points = path[0];
  2703. }
  2704. else {
  2705. points = path;
  2706. }
  2707. var shape = new math.Polygon(points);
  2708. shape.closeStroke = closeStroke;
  2709. this.drawShape(shape);
  2710. return this;
  2711. };
  2712. /**
  2713. * Draw any shape.
  2714. * @param {PIXI.Circle|PIXI.Ellipse|PIXI.Polygon|PIXI.Rectangle|PIXI.RoundedRectangle} shape - Shape to draw
  2715. * @returns - This Graphics object. Good for chaining method calls
  2716. */
  2717. Graphics.prototype.drawShape = function (shape) {
  2718. if (!this._holeMode) {
  2719. this._geometry.drawShape(shape, this._fillStyle.clone(), this._lineStyle.clone(), this._matrix);
  2720. }
  2721. else {
  2722. this._geometry.drawHole(shape, this._matrix);
  2723. }
  2724. return this;
  2725. };
  2726. /**
  2727. * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
  2728. * @returns - This Graphics object. Good for chaining method calls
  2729. */
  2730. Graphics.prototype.clear = function () {
  2731. this._geometry.clear();
  2732. this._lineStyle.reset();
  2733. this._fillStyle.reset();
  2734. this._boundsID++;
  2735. this._matrix = null;
  2736. this._holeMode = false;
  2737. this.currentPath = null;
  2738. return this;
  2739. };
  2740. /**
  2741. * True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and
  2742. * masked with gl.scissor.
  2743. * @returns - True if only 1 rect.
  2744. */
  2745. Graphics.prototype.isFastRect = function () {
  2746. var data = this._geometry.graphicsData;
  2747. return data.length === 1
  2748. && data[0].shape.type === math.SHAPES.RECT
  2749. && !data[0].matrix
  2750. && !data[0].holes.length
  2751. && !(data[0].lineStyle.visible && data[0].lineStyle.width);
  2752. };
  2753. /**
  2754. * Renders the object using the WebGL renderer
  2755. * @param renderer - The renderer
  2756. */
  2757. Graphics.prototype._render = function (renderer) {
  2758. this.finishPoly();
  2759. var geometry = this._geometry;
  2760. // batch part..
  2761. // batch it!
  2762. geometry.updateBatches();
  2763. if (geometry.batchable) {
  2764. if (this.batchDirty !== geometry.batchDirty) {
  2765. this._populateBatches();
  2766. }
  2767. this._renderBatched(renderer);
  2768. }
  2769. else {
  2770. // no batching...
  2771. renderer.batch.flush();
  2772. this._renderDirect(renderer);
  2773. }
  2774. };
  2775. /** Populating batches for rendering. */
  2776. Graphics.prototype._populateBatches = function () {
  2777. var geometry = this._geometry;
  2778. var blendMode = this.blendMode;
  2779. var len = geometry.batches.length;
  2780. this.batchTint = -1;
  2781. this._transformID = -1;
  2782. this.batchDirty = geometry.batchDirty;
  2783. this.batches.length = len;
  2784. this.vertexData = new Float32Array(geometry.points);
  2785. for (var i = 0; i < len; i++) {
  2786. var gI = geometry.batches[i];
  2787. var color = gI.style.color;
  2788. var vertexData = new Float32Array(this.vertexData.buffer, gI.attribStart * 4 * 2, gI.attribSize * 2);
  2789. var uvs = new Float32Array(geometry.uvsFloat32.buffer, gI.attribStart * 4 * 2, gI.attribSize * 2);
  2790. var indices = new Uint16Array(geometry.indicesUint16.buffer, gI.start * 2, gI.size);
  2791. var batch = {
  2792. vertexData: vertexData,
  2793. blendMode: blendMode,
  2794. indices: indices,
  2795. uvs: uvs,
  2796. _batchRGB: utils.hex2rgb(color),
  2797. _tintRGB: color,
  2798. _texture: gI.style.texture,
  2799. alpha: gI.style.alpha,
  2800. worldAlpha: 1
  2801. };
  2802. this.batches[i] = batch;
  2803. }
  2804. };
  2805. /**
  2806. * Renders the batches using the BathedRenderer plugin
  2807. * @param renderer - The renderer
  2808. */
  2809. Graphics.prototype._renderBatched = function (renderer) {
  2810. if (!this.batches.length) {
  2811. return;
  2812. }
  2813. renderer.batch.setObjectRenderer(renderer.plugins[this.pluginName]);
  2814. this.calculateVertices();
  2815. this.calculateTints();
  2816. for (var i = 0, l = this.batches.length; i < l; i++) {
  2817. var batch = this.batches[i];
  2818. batch.worldAlpha = this.worldAlpha * batch.alpha;
  2819. renderer.plugins[this.pluginName].render(batch);
  2820. }
  2821. };
  2822. /**
  2823. * Renders the graphics direct
  2824. * @param renderer - The renderer
  2825. */
  2826. Graphics.prototype._renderDirect = function (renderer) {
  2827. var shader = this._resolveDirectShader(renderer);
  2828. var geometry = this._geometry;
  2829. var tint = this.tint;
  2830. var worldAlpha = this.worldAlpha;
  2831. var uniforms = shader.uniforms;
  2832. var drawCalls = geometry.drawCalls;
  2833. // lets set the transfomr
  2834. uniforms.translationMatrix = this.transform.worldTransform;
  2835. // and then lets set the tint..
  2836. uniforms.tint[0] = (((tint >> 16) & 0xFF) / 255) * worldAlpha;
  2837. uniforms.tint[1] = (((tint >> 8) & 0xFF) / 255) * worldAlpha;
  2838. uniforms.tint[2] = ((tint & 0xFF) / 255) * worldAlpha;
  2839. uniforms.tint[3] = worldAlpha;
  2840. // the first draw call, we can set the uniforms of the shader directly here.
  2841. // this means that we can tack advantage of the sync function of pixi!
  2842. // bind and sync uniforms..
  2843. // there is a way to optimise this..
  2844. renderer.shader.bind(shader);
  2845. renderer.geometry.bind(geometry, shader);
  2846. // set state..
  2847. renderer.state.set(this.state);
  2848. // then render the rest of them...
  2849. for (var i = 0, l = drawCalls.length; i < l; i++) {
  2850. this._renderDrawCallDirect(renderer, geometry.drawCalls[i]);
  2851. }
  2852. };
  2853. /**
  2854. * Renders specific DrawCall
  2855. * @param renderer
  2856. * @param drawCall
  2857. */
  2858. Graphics.prototype._renderDrawCallDirect = function (renderer, drawCall) {
  2859. var texArray = drawCall.texArray, type = drawCall.type, size = drawCall.size, start = drawCall.start;
  2860. var groupTextureCount = texArray.count;
  2861. for (var j = 0; j < groupTextureCount; j++) {
  2862. renderer.texture.bind(texArray.elements[j], j);
  2863. }
  2864. renderer.geometry.draw(type, size, start);
  2865. };
  2866. /**
  2867. * Resolves shader for direct rendering
  2868. * @param renderer - The renderer
  2869. */
  2870. Graphics.prototype._resolveDirectShader = function (renderer) {
  2871. var shader = this.shader;
  2872. var pluginName = this.pluginName;
  2873. if (!shader) {
  2874. // if there is no shader here, we can use the default shader.
  2875. // and that only gets created if we actually need it..
  2876. // but may be more than one plugins for graphics
  2877. if (!DEFAULT_SHADERS[pluginName]) {
  2878. var MAX_TEXTURES = renderer.plugins[pluginName].MAX_TEXTURES;
  2879. var sampleValues = new Int32Array(MAX_TEXTURES);
  2880. for (var i = 0; i < MAX_TEXTURES; i++) {
  2881. sampleValues[i] = i;
  2882. }
  2883. var uniforms = {
  2884. tint: new Float32Array([1, 1, 1, 1]),
  2885. translationMatrix: new math.Matrix(),
  2886. default: core.UniformGroup.from({ uSamplers: sampleValues }, true),
  2887. };
  2888. var program = renderer.plugins[pluginName]._shader.program;
  2889. DEFAULT_SHADERS[pluginName] = new core.Shader(program, uniforms);
  2890. }
  2891. shader = DEFAULT_SHADERS[pluginName];
  2892. }
  2893. return shader;
  2894. };
  2895. /** Retrieves the bounds of the graphic shape as a rectangle object. */
  2896. Graphics.prototype._calculateBounds = function () {
  2897. this.finishPoly();
  2898. var geometry = this._geometry;
  2899. // skipping when graphics is empty, like a container
  2900. if (!geometry.graphicsData.length) {
  2901. return;
  2902. }
  2903. var _a = geometry.bounds, minX = _a.minX, minY = _a.minY, maxX = _a.maxX, maxY = _a.maxY;
  2904. this._bounds.addFrame(this.transform, minX, minY, maxX, maxY);
  2905. };
  2906. /**
  2907. * Tests if a point is inside this graphics object
  2908. * @param point - the point to test
  2909. * @returns - the result of the test
  2910. */
  2911. Graphics.prototype.containsPoint = function (point) {
  2912. this.worldTransform.applyInverse(point, Graphics._TEMP_POINT);
  2913. return this._geometry.containsPoint(Graphics._TEMP_POINT);
  2914. };
  2915. /** Recalculate the tint by applying tint to batches using Graphics tint. */
  2916. Graphics.prototype.calculateTints = function () {
  2917. if (this.batchTint !== this.tint) {
  2918. this.batchTint = this.tint;
  2919. var tintRGB = utils.hex2rgb(this.tint, temp);
  2920. for (var i = 0; i < this.batches.length; i++) {
  2921. var batch = this.batches[i];
  2922. var batchTint = batch._batchRGB;
  2923. var r = (tintRGB[0] * batchTint[0]) * 255;
  2924. var g = (tintRGB[1] * batchTint[1]) * 255;
  2925. var b = (tintRGB[2] * batchTint[2]) * 255;
  2926. // TODO Ivan, can this be done in one go?
  2927. var color = (r << 16) + (g << 8) + (b | 0);
  2928. batch._tintRGB = (color >> 16)
  2929. + (color & 0xff00)
  2930. + ((color & 0xff) << 16);
  2931. }
  2932. }
  2933. };
  2934. /** If there's a transform update or a change to the shape of the geometry, recalculate the vertices. */
  2935. Graphics.prototype.calculateVertices = function () {
  2936. var wtID = this.transform._worldID;
  2937. if (this._transformID === wtID) {
  2938. return;
  2939. }
  2940. this._transformID = wtID;
  2941. var wt = this.transform.worldTransform;
  2942. var a = wt.a;
  2943. var b = wt.b;
  2944. var c = wt.c;
  2945. var d = wt.d;
  2946. var tx = wt.tx;
  2947. var ty = wt.ty;
  2948. var data = this._geometry.points; // batch.vertexDataOriginal;
  2949. var vertexData = this.vertexData;
  2950. var count = 0;
  2951. for (var i = 0; i < data.length; i += 2) {
  2952. var x = data[i];
  2953. var y = data[i + 1];
  2954. vertexData[count++] = (a * x) + (c * y) + tx;
  2955. vertexData[count++] = (d * y) + (b * x) + ty;
  2956. }
  2957. };
  2958. /**
  2959. * Closes the current path.
  2960. * @returns - Returns itself.
  2961. */
  2962. Graphics.prototype.closePath = function () {
  2963. var currentPath = this.currentPath;
  2964. if (currentPath) {
  2965. // we don't need to add extra point in the end because buildLine will take care of that
  2966. currentPath.closeStroke = true;
  2967. // ensure that the polygon is completed, and is available for hit detection
  2968. // (even if the graphics is not rendered yet)
  2969. this.finishPoly();
  2970. }
  2971. return this;
  2972. };
  2973. /**
  2974. * Apply a matrix to the positional data.
  2975. * @param matrix - Matrix to use for transform current shape.
  2976. * @returns - Returns itself.
  2977. */
  2978. Graphics.prototype.setMatrix = function (matrix) {
  2979. this._matrix = matrix;
  2980. return this;
  2981. };
  2982. /**
  2983. * Begin adding holes to the last draw shape
  2984. * IMPORTANT: holes must be fully inside a shape to work
  2985. * Also weirdness ensues if holes overlap!
  2986. * Ellipses, Circles, Rectangles and Rounded Rectangles cannot be holes or host for holes in CanvasRenderer,
  2987. * please use `moveTo` `lineTo`, `quadraticCurveTo` if you rely on pixi-legacy bundle.
  2988. * @returns - Returns itself.
  2989. */
  2990. Graphics.prototype.beginHole = function () {
  2991. this.finishPoly();
  2992. this._holeMode = true;
  2993. return this;
  2994. };
  2995. /**
  2996. * End adding holes to the last draw shape.
  2997. * @returns - Returns itself.
  2998. */
  2999. Graphics.prototype.endHole = function () {
  3000. this.finishPoly();
  3001. this._holeMode = false;
  3002. return this;
  3003. };
  3004. /**
  3005. * Destroys the Graphics object.
  3006. * @param options - Options parameter. A boolean will act as if all
  3007. * options have been set to that value
  3008. * @param {boolean} [options.children=false] - if set to true, all the children will have
  3009. * their destroy method called as well. 'options' will be passed on to those calls.
  3010. * @param {boolean} [options.texture=false] - Only used for child Sprites if options.children is set to true
  3011. * Should it destroy the texture of the child sprite
  3012. * @param {boolean} [options.baseTexture=false] - Only used for child Sprites if options.children is set to true
  3013. * Should it destroy the base texture of the child sprite
  3014. */
  3015. Graphics.prototype.destroy = function (options) {
  3016. this._geometry.refCount--;
  3017. if (this._geometry.refCount === 0) {
  3018. this._geometry.dispose();
  3019. }
  3020. this._matrix = null;
  3021. this.currentPath = null;
  3022. this._lineStyle.destroy();
  3023. this._lineStyle = null;
  3024. this._fillStyle.destroy();
  3025. this._fillStyle = null;
  3026. this._geometry = null;
  3027. this.shader = null;
  3028. this.vertexData = null;
  3029. this.batches.length = 0;
  3030. this.batches = null;
  3031. _super.prototype.destroy.call(this, options);
  3032. };
  3033. /**
  3034. * New rendering behavior for rounded rectangles: circular arcs instead of quadratic bezier curves.
  3035. * In the next major release, we'll enable this by default.
  3036. */
  3037. Graphics.nextRoundedRectBehavior = false;
  3038. /**
  3039. * Temporary point to use for containsPoint.
  3040. * @private
  3041. */
  3042. Graphics._TEMP_POINT = new math.Point();
  3043. return Graphics;
  3044. }(display.Container));
  3045. var graphicsUtils = {
  3046. buildPoly: buildPoly,
  3047. buildCircle: buildCircle,
  3048. buildRectangle: buildRectangle,
  3049. buildRoundedRectangle: buildRoundedRectangle,
  3050. buildLine: buildLine,
  3051. ArcUtils: ArcUtils,
  3052. BezierUtils: BezierUtils,
  3053. QuadraticUtils: QuadraticUtils,
  3054. BatchPart: BatchPart,
  3055. FILL_COMMANDS: FILL_COMMANDS,
  3056. BATCH_POOL: BATCH_POOL,
  3057. DRAW_CALL_POOL: DRAW_CALL_POOL
  3058. };
  3059. exports.FillStyle = FillStyle;
  3060. exports.GRAPHICS_CURVES = GRAPHICS_CURVES;
  3061. exports.Graphics = Graphics;
  3062. exports.GraphicsData = GraphicsData;
  3063. exports.GraphicsGeometry = GraphicsGeometry;
  3064. exports.LineStyle = LineStyle;
  3065. exports.graphicsUtils = graphicsUtils;
  3066. Object.defineProperty(exports, '__esModule', { value: true });
  3067. return exports;
  3068. })({}, PIXI, PIXI, PIXI.utils, PIXI, PIXI);
  3069. Object.assign(this.PIXI, _pixi_graphics);
  3070. //# sourceMappingURL=graphics.js.map