[go: up one dir, main page]
Skip to main content

Konva

Classes​

Namespaces​

Properties​

static autoDrawEnabled​

Should Konva automatically update canvas on any changes. Default is true.

Default value: true

Example:

Konva.autoDrawEnabled = true;

static hitOnDragEnabled​

Should we enable hit detection while dragging? For performance reasons, by default it is false. But on some rare cases you want to see hit graph and check intersections. Just set it to true.

Default value: false

Example:

Konva.hitOnDragEnabled = true;

static capturePointerEventsEnabled​

Should we capture touch events and bind them to the touchstart target? That is how it works on DOM elements. The case: we touchstart on div1, then touchmove out of that element into another element div2. DOM will continue trigger touchmove events on div1 (not div2). Because events are "captured" into initial target. By default Konva do not do that and will trigger touchmove on another element, while pointer is moving.

Default value: false

Example:

Konva.capturePointerEventsEnabled = true;

static legacyTextRendering​

Use legacy text rendering. with "middle" baseline by default.

Default value: false

Example:

Konva.legacyTextRendering = true;

static pixelRatio​

Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device. But you may override such property, if you want to use your value. Set this value before any components initializations.

Default value: window.devicePixelRatio || 1

Example:

// before any Konva code:
Konva.pixelRatio = 1;

static dragDistance​

Drag distance property. If you start to drag a node you may want to wait until pointer is moved to some distance from start point on either axis, only then start dragging. Default is 3px.

Default value: 3

Example:

Konva.dragDistance = 10;

static angleDeg​

Use degree values for angle properties. You may set this property to false if you want to use radian values.

Default value: true

Example:

node.rotation(45); // 45 degrees
Konva.angleDeg = false;
node.rotation(Math.PI / 2); // PI/2 radian

static showWarnings​

Show warnings about wrong API usage (Konva.Util.warn). Errors are always printed

Default value: true

Example:

Konva.showWarnings = false;

static dragButtons​

Configure what mouse buttons can be used for drag and drop. Default value is [0, 1] - left and middle mouse buttons.

Default value: [0, 1]

Example:

// enable left and right mouse buttons
Konva.dragButtons = [0, 2];

static releaseCanvasOnDestroy​

Should Konva release canvas elements on destroy. Default is true. Useful to avoid memory leak issues in Safari on macOS/iOS.

Default value: true

Example:

Konva.releaseCanvasOnDestroy = true;

Own Methods​

isDragging()​

returns whether or not drag and drop is currently active

isTransforming()​

returns whether or not a Transformer is currently transforming a node

isDragReady()​

returns whether or not a drag and drop operation is ready, but may not necessarily have started

beginUpdateBatch()​

Defer automatic Konva.Transformer updates across many synchronous node changes and run them once when the returned function is called. A Transformer normally updates after every change of an attached node, so a loop over N selected nodes costs N updates, each measuring all N nodes. In a batch it costs one. A single setAttrs(), position(), destroyChildren(), removeChildren() call or animation frame is already batched; use this for anything else, for example a React commit or an undo. Attributes and change events stay synchronous. Inside the batch, the Transformer's own x(), y(), width(), height() and getClientRect() are computed on read; its anchors are laid out when the batch finishes, or earlier if something draws or measures them. Change events fire inside the batch, so a listener sees the new attributes and the Transformer's box, but not its anchors; call transformer.update() there if it needs them. Batches nest. Call the returned function in a finally block, and do not keep a batch open across an await or an animation frame.

Returns: function finishes the batch and runs the pending updates

Example:

const finish = Konva.beginUpdateBatch();
try {
  selectedNodes.forEach((node) => node.width(100));
} finally {
  finish();
}