{"id":20596062,"url":"https://github.com/davidfig/pixi-dashed-line","last_synced_at":"2025-04-14T03:52:55.671Z","repository":{"id":42083189,"uuid":"386055601","full_name":"davidfig/pixi-dashed-line","owner":"davidfig","description":null,"archived":false,"fork":false,"pushed_at":"2024-06-21T20:06:13.000Z","size":682,"stargazers_count":37,"open_issues_count":9,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T17:51:57.296Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidfig.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-14T19:33:54.000Z","updated_at":"2025-03-21T10:24:14.000Z","dependencies_parsed_at":"2024-06-18T21:53:09.567Z","dependency_job_id":null,"html_url":"https://github.com/davidfig/pixi-dashed-line","commit_stats":{"total_commits":43,"total_committers":1,"mean_commits":43.0,"dds":0.0,"last_synced_commit":"4ee7e0d3313f2f10449141fbd9a046cbf52ef6ef"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidfig%2Fpixi-dashed-line","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidfig%2Fpixi-dashed-line/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidfig%2Fpixi-dashed-line/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidfig%2Fpixi-dashed-line/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidfig","download_url":"https://codeload.github.com/davidfig/pixi-dashed-line/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248819359,"owners_count":21166474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T08:14:54.707Z","updated_at":"2025-04-14T03:52:55.649Z","avatar_url":"https://github.com/davidfig.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pixi-dashed-line\r\n\r\nA pixi.js implementation to support dashed lines in PIXI.Graphics.\r\n\r\n* Two implementations of a dashed line for pixi.js: lineTo/moveTo w/gaps (preferred), and texture-based (using a dashed-line texture when drawing the line)\r\n* Dashed support for lineTo, drawCircle, drawEllipse, drawPolygon\r\n* Dashed lines can be scaled (allows for dashed lines to remain the same size regardless of zoom level)\r\n\r\n## Live Demo\r\n\r\n[https://davidfig.github.io/pixi-dashed-line](https://davidfig.github.io/pixi-dashed-line/) ([source code](https://github.com/davidfig/pixi-dashed-line/blob/main/demo/index.ts))\r\n\r\n## Documentation\r\n\r\n### class DashLine\r\n#### constructor(graphics: PIXI.Graphics, options?.DashLineOptions)\r\n```js\r\nDashLine.DashLineOptions = {\r\n    useTexture?=false - whether to use a texture or moveTo/lineTo (see notes below in README.md)\r\n    dashes?=[10, 5] - an array holding one or more [dash, gap] entries, eg, [10, 5, 20, 10, ...])\r\n    width?=1 - width of the dashed line\r\n    color?=0xffffff - color of the dashed line\r\n    alpha?=1 - alpha of the dashed line\r\n    options.cap? - add a PIXI.LINE_CAP style to dashed lines (only works for useTexture: false)\r\n    options.join? - add a PIXI.LINE_JOIN style to the dashed lines (only works for useTexture: false)\r\n    options.alignment? - change alignment of lines drawn (0.5 = middle, 1 = outer, 0 = inner)\r\n}\r\n```\r\n#### moveTo(x: number, y: number)\r\nMoves cursor to location\r\n\r\n#### lineTo(x: number, y: number, closePath?: boolean)\r\nDraws a dashed line. If closePath = true, then lineTo will leave a proper gap if its destination is the first point (ie, if this line closes the shape)\r\n\r\n#### drawCircle(x: number, y: number, radius: number, points=80, matrix?: PIXI.Matrix)\r\nwhere x,y is the center of circle, and points are the number of points used to draw the circle; matrix is applied before the draw (this adds a shape-specific transform to pixi's DisplayObject transforms)\r\n\r\n#### drawEllipse(x: number, y: number, radiusX: number, radiusY: number, points=80, matrix?: PIXI.Matrix)\r\nwhere x,y is the center of ellipse, and points are the number of points used to draw the ellipse; matrix is applied before the draw (this adds a shape-specific transform to pixi's DisplayObject transforms)\r\n\r\n#### drawRect(x: number, y: number, width: number, height: number, matrix?: PIXI.Matrix)\r\ndraws a dashed rectangle; matrix is applied before the draw (this adds a shape-specific transform to pixi's DisplayObject transforms)\r\n\r\n#### drawPolygon(PIXI.Point[] | number[], matrix?: PIXI.Matrix)\r\ndraws a dashed polygon; matrix is applied before the draw (this adds a shape-specific transform to pixi's DisplayObject transforms)\r\n\r\n#### setLineStyle()\r\nchanges line style to the proper dashed line style -- this is useful if the graphics element's lineStyle was changed\r\n\r\n## Simple Example\r\n\r\n```js\r\nimport { DashLine } from 'pixi-dashed-lines'\r\n\r\n...\r\nconst g = stage.addChild(new PIXI.Graphics())\r\n\r\nconst dash = new DashLine(g, {\r\n    dash: [20, 10],\r\n    width: 5,\r\n    color: 0xff0000,\r\n})\r\n\r\n// draws a dashed triangle\r\ndash.moveTo(0, 0)\r\n    .lineTo(100, 100)\r\n    .lineTo(0, 100)\r\n    .lineTo(0, 0)\r\n\r\n```\r\n## When to use options.useTexture = true\r\n\r\nFor most use-cases, the lineTo/moveTo (`options.useTexture = false`) is better because it provides a more accurate implementation and supports cap and join styles.\r\n\r\nThe texture-based approach (`options.useTexture = true`) is useful when the geometry is very large or very small as PIXI.Graphics does not handle those cases well (see https://www.html5gamedevs.com/topic/24876-weird-lines-when-using-extreme-coordinate-values/). You'll know you need this if zooming in and out on the dashed line causes out of memory errors :)\r\n\r\n### Technical Notes on options.useTexture = true\r\n`options.useTexture=true` does not use pixi.js's line joins and caps for connecting lines (see https://mattdesl.svbtle.com/drawing-lines-is-hard): instead it uses `Graphics.lineTextureStyle` to supply a texture to draw the dashed lines. The texture needs a custom matrix to properly rotate the dash based on the angle of the next line (and to translate the texture so it starts properly (see https://www.html5gamedevs.com/topic/45698-begintexturefill/)). Without the matrix, the dash's length will change as the line's angle changes.\r\n\r\nRegrettably, pixi.js does not provide a mechanism to change the matrix of a texture without breaking the current line with a moveTo command. (This was my key insight that finally got this working. I banged my head many hours trying to figure out why the texture did not rotate properly. The answer was that you have to moveTo before changing the matrix.)\r\n\r\n### Future work\r\nIdeally, the dashed line functionality should be built directly into pixi.js's Graphics line drawing module w/logic that separates the triangles of the dashed line to take into account changes in the angle of the line. I thought about adding it, but decided the amount of work was not worth it. (Especially since the use case for useTexture is limited to strange PIXI.Graphics geometries.) Maybe someone does a different calculus and adds this feature directly into pixi.js and makes this library obsolete.\r\n\r\n## License\r\nMIT License\r\n(c) 2021 [David Figatner](https://yopeyopey.com/)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidfig%2Fpixi-dashed-line","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidfig%2Fpixi-dashed-line","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidfig%2Fpixi-dashed-line/lists"}