跳到主要内容

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