The first parameter must be the Environment that this
CanvasRenderer will render.
The second parameter specifies options, which can include:
autoPosition (boolean = false) — For Environments using a Network, whether to automatically position the Agents.background (string = "transparent") — The background color to draw before rendering any Agents.connectionColor (string = "black") — For Environments using a Network, the color of linesconnectionOpacity (number = 1) — For Environments using a Network, the opacity of linesconnectionWidth (number = 1) — For Environments using a Network, the width of linesheight (number = 500) — The height, in pixels, of the canvas on which to renderinteractive (boolean = false) — Enables interactive features (click/hover detection, selection, pan, zoom)onSelect (function) — Optional callback when an agent is selected or deselectedorigin ({ x: number; y: number } = { x: 0, y: 0 }) — The coordinate of the upper-left point of the space to be renderedscale (number = 1) — The scale at which to render (the larger the scale, the smaller the size of the space that is actually rendered)trace (boolean = false) — If true, the renderer will not clear old drawings, causing the Agents to appear to trace their paths across spacewidth (number = 500) — The width, in pixels, of the canvas on which to renderzoomMin (number = 0.1) — Minimum scale when zoomingzoomMax (number = 10) — Maximum scale when zoomingPoints to the Environment that this
renderer is tied to. This is automatically set when the
renderer is created.
The currently selected agents (only used when interactive is true).
Mount this renderer to a DOM element. Pass either a string representing a CSS selector matching the element or the element itself.
// mounts the renderer to the element with the ID `container`
renderer.mount('#container');
// mounts the renderer to the element itself
const container = document.getElementById('container');
renderer.mount(container);
Register a callback for an interactive event.
Supported event names: "click", "hover", "unhover".
renderer.on("click", (agent, event) => {
console.log("Clicked agent:", agent.id);
});
The event to listen for.
The callback, invoked with the Agent and the MouseEvent.
A
CanvasRendererrenders anEnvironmentspatially in two dimensions. Importantly, it expects that allAgents in theEnvironmenthave numeric"x"and"y"values associated with them.CanvasRenderers will render allAgents that are visible in the renderedEnvironmentspace, with the color of their"color"value (defaulting to black). Depending on the"shape"of theAgent, additional data might be needed.Agent"shape"s can be:"circle"(default) — Draws a circle centered at theAgent's"x"/"y"values.Agenthas a"size"value, uses that for the circle radius (defaults to 1px)."arrow"— Draws an arrow centered at theAgent's"x"/"y"values.Agents"vx"/"vy"values. For example, anAgentwith"vx" = 1and"vy" = 0will be rendered as an arrow pointing to the right."rect"— Draws a rectangle with the upper-left corner at"x"/"y".Agent's"width"and"height"values for the dimensions of the rectangle."triangle"— Draws a triangle centered at theAgent's"x"/"y"values."size"value.When
interactiveis set totruein the options, the renderer supports:onto listen for"click","hover", and"unhover"events on agents.selected.zoomMin/zoomMax).Since
0.0.11