API reference
Every public class, method, and event in @codexo/exojs. Generated from source.
classGraphics
Immediate-mode 2D shape API backed by Mesh children. Each draw call (e.g. `drawCircle`, `drawRectangle`, `drawLine`) appends a new Mesh child painted with the active fill or stroke style. A style is either a solid Color or a Gradient, assigned through fillStyle / strokeStyle. The fillColor / lineColor accessors are color-only conveniences over those styles. The active `lineWidth` controls stroke thickness for path and outline draws. Path commands (`moveTo`, `lineTo`, `quadraticCurveTo`, etc.) track a cursor point and flush a Mesh on each segment. Fill and stroke are both opt-in: a shape is filled only once a fill color/style is set (the fill defaults to transparent), and stroked only while `lineWidth > 0`. An outline-only shape therefore needs just `lineColor` + `lineWidth`, with no fill bleeding underneath. Gradient styles are rasterized once to a DataTexture via Gradient.toTexture and sampled across each shape's local bounding box, so LinearGradient and RadialGradient render through the same texture path as a textured Mesh. The textures are owned by the Graphics and released on clear / destroy. Call clear to remove all child meshes and reset pen state. Because each shape is a separate Mesh, `Graphics` inherits full filter, blend, tint, and mask support from Container.
import { Graphics } from '@codexo/exojs'Immediate-mode 2D shape API backed by Mesh children.
Each draw call (e.g. `drawCircle`, `drawRectangle`, `drawLine`) appends a new Mesh child painted with the active fill or stroke style. A style is either a solid Color or a Gradient, assigned through fillStyle / strokeStyle. The fillColor / lineColor accessors are color-only conveniences over those styles. The active `lineWidth` controls stroke thickness for path and outline draws. Path commands (`moveTo`, `lineTo`, `quadraticCurveTo`, etc.) track a cursor point and flush a Mesh on each segment.
Fill and stroke are both opt-in: a shape is filled only once a fill color/style is set (the fill defaults to transparent), and stroked only while `lineWidth > 0`. An outline-only shape therefore needs just `lineColor` + `lineWidth`, with no fill bleeding underneath.
Gradient styles are rasterized once to a DataTexture via Gradient.toTexture and sampled across each shape's local bounding box, so LinearGradient and RadialGradient render through the same texture path as a textured Mesh. The textures are owned by the Graphics and released on clear / destroy.
Call clear to remove all child meshes and reset pen state. Because each shape is a separate Mesh, `Graphics` inherits full filter, blend, tint, and mask support from Container.
new(): Graphics_collectContent(builder: RenderPlanBuilder): void_onChildListChanged(): voidarcTo(x1: number, y1: number, x2: number, y2: number, radius: number): thisbezierCurveTo(cpX1: number, cpY1: number, cpX2: number, cpY2: number, toX: number, toY: number): thisblur(): thisclear(): thisclearFilters(): thiscollect(builder: RenderPlanBuilder, seq?: number): voidcollidesWith(target: CollidableContract for objects that participate in collision detection. Implemented by all concrete shape classes as well as `SceneNode`.): CollisionResponseResult of a successful Collidable.collidesWith call. Contains the two participating shapes, the penetration depth, containment flags, and the minimum-translati… | nullcontains(x: number, y: number): booleandestroy(): voiddrawArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean): thisdrawCircle(centerX: number, centerY: number, radius: number): thisdrawEllipse(centerX: number, centerY: number, radiusX: number, radiusY: number): thisdrawLine(startX: number, startY: number, endX: number, endY: number): thisdrawPath(path: number[]): thisdrawPolygon(path: number[]): thisdrawRectangle(x: number, y: number, width: number, height: number): thisdrawRoundedRectangle(x: number, y: number, width: number, height: number, radius: number): thisdrawShape(path: GraphicsPathA reusable 2D path: a sequence of subpaths built from lines, Bézier curves and arcs, kept as commands rather than as vertices. ```ts const arrow = new Graphics…, tolerance?: number): thisdrawStar(centerX: number, centerY: number, points: number, radius: number, innerRadius: number, rotation: number): thisfocus(): thisgetBounds(out?: RectangleMutable axis-aligned rectangle defined by a top-left origin `(x, y)` and dimensions `(width, height)`. Implements Collidable with full SAT collision response f…): RectangleMutable axis-aligned rectangle defined by a top-left origin `(x, y)` and dimensions `(width, height)`. Implements Collidable with full SAT collision response f…invalidateCache(): thisinvalidateContent(): thislineTo(toX: number, toY: number): thismove(x: number, y: number): thismoveTo(x: number, y: number): thisproject(axis: VectorConcrete mutable 2D vector with full AbstractVector arithmetic and Collidable collision support (treated as a point collider). `Vector.temp` provides a shared…, result: IntervalA closed scalar interval `[min, max]` used by the SAT collision solver to represent the projection of a shape onto a separating axis. `Interval.temp` provides…): IntervalA closed scalar interval `[min, max]` used by the SAT collision solver to represent the projection of a shape onto a separating axis. `Interval.temp` provides…quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): thisremoveChildAt(index: number): thisremoveChildren(begin: number, end: number): thisrender(backend: RenderBackend): thisrotate(degrees: number): thissetChildIndex(child: RenderNodeSceneNode that can produce visual output. Adds the rendering pipeline features on top of the structural transform/bounds carried by SceneNode: post-process `fi…, index: number): thissetLocalBounds(x: number, y: number, width: number, height: number): thissetOrigin(x: number, y: number): thissetPosition(x: number, y: number): thissetRotation(degrees: number): thissetScale(x: number, y: number): thissetSkew(x: number, y: number): thisswapChildren(firstChild: RenderNodeSceneNode that can produce visual output. Adds the rendering pipeline features on top of the structural transform/bounds carried by SceneNode: post-process `fi…, secondChild: RenderNodeSceneNode that can produce visual output. Adds the rendering pipeline features on top of the structural transform/bounds carried by SceneNode: post-process `fi…): thisupdateBounds(): thisupdateParentTransform(): thisupdateTransform(): thiscursor: null | stringdraggable: booleanfocusable: booleanname: null | stringtabIndex: numberbottom: numbercacheAsTexture: booleancacheResolution: TargetResolutionclip: booleanclipShape: GeometryNon-renderable geometry data object used by advanced rendering paths. Geometry owns only vertex/index data and its layout metadata; it is not a scene node, has… | RectangleMutable axis-aligned rectangle defined by a top-left origin `(x, y)` and dimensions `(width, height)`. Implements Collidable with full SAT collision response f… | nullcullable: booleandestroyed: booleanfillStyle: Color32-bit RGBA color value with channel-wise accessors. Red, green, and blue are integers in 0..255; alpha is a float in 0..1. Out-of-range values are saturated o… | GradientCPU-rasterized gradient base. A Color-like paint value (not a Drawable): it owns a normalized list of color stops plus subclass geometry and supports the value…height: numberinteractive: booleanisAlignedBox: booleanleft: numberlineWidth: numberpreserveDrawOrder: booleanright: numberrotation: numberskewX: numberskewY: numberstrokeStyle: Color32-bit RGBA color value with channel-wise accessors. Red, green, and blue are integers in 0..255; alpha is a float in 0..1. Out-of-range values are saturated o… | GradientCPU-rasterized gradient base. A Color-like paint value (not a Drawable): it owns a normalized list of color stops plus subclass geometry and supports the value…top: numbervisible: booleanwidth: numberx: numbery: numberzIndex: numberonBlur: SignalLightweight typed event emitter. Each `Signal` represents one named notification channel (e.g. `onResize`, `onFrame`). Listeners are added with Signal.add or S…<[RenderNodeSceneNode that can produce visual output. Adds the rendering pipeline features on top of the structural transform/bounds carried by SceneNode: post-process `fi…]>onContextMenu: SignalLightweight typed event emitter. Each `Signal` represents one named notification channel (e.g. `onResize`, `onFrame`). Listeners are added with Signal.add or S…<[InteractionEventDOM-Event-shaped envelope dispatched by InteractionSystem to interactive scene nodes. Bubbles up the *entire* parent chain - `target` stays pinned to the hit-d…]>onDrag: SignalLightweight typed event emitter. Each `Signal` represents one named notification channel (e.g. `onResize`, `onFrame`). Listeners are added with Signal.add or S…<[InteractionEventDOM-Event-shaped envelope dispatched by InteractionSystem to interactive scene nodes. Bubbles up the *entire* parent chain - `target` stays pinned to the hit-d…]>onDragEnd: SignalLightweight typed event emitter. Each `Signal` represents one named notification channel (e.g. `onResize`, `onFrame`). Listeners are added with Signal.add or S…<[InteractionEventDOM-Event-shaped envelope dispatched by InteractionSystem to interactive scene nodes. Bubbles up the *entire* parent chain - `target` stays pinned to the hit-d…]>onDragStart: SignalLightweight typed event emitter. Each `Signal` represents one named notification channel (e.g. `onResize`, `onFrame`). Listeners are added with Signal.add or S…<[InteractionEventDOM-Event-shaped envelope dispatched by InteractionSystem to interactive scene nodes. Bubbles up the *entire* parent chain - `target` stays pinned to the hit-d…]>onFocus: SignalLightweight typed event emitter. Each `Signal` represents one named notification channel (e.g. `onResize`, `onFrame`). Listeners are added with Signal.add or S…<[RenderNodeSceneNode that can produce visual output. Adds the rendering pipeline features on top of the structural transform/bounds carried by SceneNode: post-process `fi…]>onKeyDown: SignalLightweight typed event emitter. Each `Signal` represents one named notification channel (e.g. `onResize`, `onFrame`). Listeners are added with Signal.add or S…<[KeyEventEnvelope dispatched by `app.interaction` to the focused RenderNode for keyboard input, then bubbled up its entire parent chain - same DOM-style shape as Intera…]>onKeyUp: SignalLightweight typed event emitter. Each `Signal` represents one named notification channel (e.g. `onResize`, `onFrame`). Listeners are added with Signal.add or S…<[KeyEventEnvelope dispatched by `app.interaction` to the focused RenderNode for keyboard input, then bubbled up its entire parent chain - same DOM-style shape as Intera…]>onPointerDown: SignalLightweight typed event emitter. Each `Signal` represents one named notification channel (e.g. `onResize`, `onFrame`). Listeners are added with Signal.add or S…<[InteractionEventDOM-Event-shaped envelope dispatched by InteractionSystem to interactive scene nodes. Bubbles up the *entire* parent chain - `target` stays pinned to the hit-d…]>onPointerMove: SignalLightweight typed event emitter. Each `Signal` represents one named notification channel (e.g. `onResize`, `onFrame`). Listeners are added with Signal.add or S…<[InteractionEventDOM-Event-shaped envelope dispatched by InteractionSystem to interactive scene nodes. Bubbles up the *entire* parent chain - `target` stays pinned to the hit-d…]>onPointerOut: SignalLightweight typed event emitter. Each `Signal` represents one named notification channel (e.g. `onResize`, `onFrame`). Listeners are added with Signal.add or S…<[InteractionEventDOM-Event-shaped envelope dispatched by InteractionSystem to interactive scene nodes. Bubbles up the *entire* parent chain - `target` stays pinned to the hit-d…]>onPointerOver: SignalLightweight typed event emitter. Each `Signal` represents one named notification channel (e.g. `onResize`, `onFrame`). Listeners are added with Signal.add or S…<[InteractionEventDOM-Event-shaped envelope dispatched by InteractionSystem to interactive scene nodes. Bubbles up the *entire* parent chain - `target` stays pinned to the hit-d…]>onPointerTap: SignalLightweight typed event emitter. Each `Signal` represents one named notification channel (e.g. `onResize`, `onFrame`). Listeners are added with Signal.add or S…<[InteractionEventDOM-Event-shaped envelope dispatched by InteractionSystem to interactive scene nodes. Bubbles up the *entire* parent chain - `target` stays pinned to the hit-d…]>onPointerUp: SignalLightweight typed event emitter. Each `Signal` represents one named notification channel (e.g. `onResize`, `onFrame`). Listeners are added with Signal.add or S…<[InteractionEventDOM-Event-shaped envelope dispatched by InteractionSystem to interactive scene nodes. Bubbles up the *entire* parent chain - `target` stays pinned to the hit-d…]>