konva

  • Version 9.3.13
  • Published
  • 1.41 MB
  • No dependencies
  • MIT license

Install

npm i konva
yarn add konva
pnpm add konva

Overview

<p align="center"> <img src="https://konvajs.org/android-chrome-192x192.png" alt="Konva logo" height="180" /> </p>

Index

Namespaces

namespace Konva

namespace Konva {}

    variable angleDeg

    let angleDeg: boolean;

      variable Animation

      const Animation: typeof Animation;

        variable Arc

        const Arc: typeof Arc;

          variable Arrow

          const Arrow: typeof Arrow;

            variable autoDrawEnabled

            let autoDrawEnabled: boolean;

              variable capturePointerEventsEnabled

              let capturePointerEventsEnabled: boolean;

                variable Circle

                const Circle: typeof Circle;

                  variable Container

                  const Container: typeof Container;

                    variable Context

                    const Context: typeof Context;

                      variable DD

                      const DD: {
                      readonly isDragging: boolean;
                      justDragged: boolean;
                      readonly node: Node<NodeConfig>;
                      _dragElements: Map<
                      number,
                      {
                      node: Node<NodeConfig>;
                      startPointerPos: Vector2d;
                      offset: Vector2d;
                      pointerId?: number;
                      dragStatus: 'ready' | 'dragging' | 'stopped';
                      }
                      >;
                      _drag(evt: any): void;
                      _endDragBefore(evt?: any): void;
                      _endDragAfter(evt: any): void;
                      };

                        variable dragButtons

                        let dragButtons: number[];

                          variable dragDistance

                          let dragDistance: number;

                            variable Easings

                            const Easings: {
                            BackEaseIn(t: any, b: any, c: any, d: any): any;
                            BackEaseOut(t: any, b: any, c: any, d: any): any;
                            BackEaseInOut(t: any, b: any, c: any, d: any): any;
                            ElasticEaseIn(t: any, b: any, c: any, d: any, a: any, p: any): any;
                            ElasticEaseOut(t: any, b: any, c: any, d: any, a: any, p: any): any;
                            ElasticEaseInOut(t: any, b: any, c: any, d: any, a: any, p: any): any;
                            BounceEaseOut(t: any, b: any, c: any, d: any): any;
                            BounceEaseIn(t: any, b: any, c: any, d: any): any;
                            BounceEaseInOut(t: any, b: any, c: any, d: any): any;
                            EaseIn(t: any, b: any, c: any, d: any): any;
                            EaseOut(t: any, b: any, c: any, d: any): any;
                            EaseInOut(t: any, b: any, c: any, d: any): any;
                            StrongEaseIn(t: any, b: any, c: any, d: any): any;
                            StrongEaseOut(t: any, b: any, c: any, d: any): any;
                            StrongEaseInOut(t: any, b: any, c: any, d: any): any;
                            Linear(t: any, b: any, c: any, d: any): any;
                            };

                              variable Ellipse

                              const Ellipse: typeof Ellipse;

                                variable enableTrace

                                let enableTrace: number;

                                  variable FastLayer

                                  const FastLayer: typeof FastLayer;

                                    variable Filters

                                    const Filters: {
                                    Blur: typeof Blur;
                                    Brighten: typeof Brighten;
                                    Contrast: typeof Contrast;
                                    Emboss: typeof Emboss;
                                    Enhance: typeof Enhance;
                                    Grayscale: typeof Grayscale;
                                    HSL: typeof HSL;
                                    HSV: typeof HSV;
                                    Invert: typeof Invert;
                                    Kaleidoscope: typeof Kaleidoscope;
                                    Mask: typeof Mask;
                                    Noise: typeof Noise;
                                    Pixelate: typeof Pixelate;
                                    Posterize: typeof Posterize;
                                    RGB: typeof RGB;
                                    RGBA: typeof RGBA;
                                    Sepia: typeof Sepia;
                                    Solarize: typeof Solarize;
                                    Threshold: typeof Threshold;
                                    };

                                      variable Group

                                      const Group: typeof Group;

                                        variable hitOnDragEnabled

                                        let hitOnDragEnabled: boolean;

                                          variable Image

                                          const Image: typeof Image;

                                            variable Label

                                            const Label: typeof Label;

                                              variable Layer

                                              const Layer: typeof Layer;

                                                variable Line

                                                const Line: typeof Line;

                                                  variable Node

                                                  const Node: typeof Node;

                                                    variable Path

                                                    const Path: typeof Path;

                                                      variable pixelRatio

                                                      let pixelRatio: number;

                                                        variable Rect

                                                        const Rect: typeof Rect;

                                                          variable RegularPolygon

                                                          const RegularPolygon: typeof RegularPolygon;

                                                            variable Ring

                                                            const Ring: typeof Ring;

                                                              variable Shape

                                                              const Shape: typeof Shape;

                                                                variable shapes

                                                                const shapes: { [key: string]: Shape<ShapeConfig> };

                                                                  variable showWarnings

                                                                  let showWarnings: boolean;

                                                                    variable Sprite

                                                                    const Sprite: typeof Sprite;

                                                                      variable Stage

                                                                      const Stage: typeof Stage;

                                                                        variable stages

                                                                        const stages: Stage[];

                                                                          variable Star

                                                                          const Star: typeof Star;

                                                                            variable Tag

                                                                            const Tag: typeof Tag;

                                                                              variable Text

                                                                              const Text: typeof Text;

                                                                                variable TextPath

                                                                                const TextPath: typeof TextPath;

                                                                                  variable Transform

                                                                                  const Transform: typeof Transform;

                                                                                    variable Transformer

                                                                                    const Transformer: typeof Transformer;

                                                                                      variable Tween

                                                                                      const Tween: typeof Tween;

                                                                                        variable Util

                                                                                        const Util: {
                                                                                        _isElement(obj: any): obj is Element;
                                                                                        _isFunction(obj: any): boolean;
                                                                                        _isPlainObject(obj: any): boolean;
                                                                                        _isArray(obj: any): obj is any[];
                                                                                        _isNumber(obj: any): obj is number;
                                                                                        _isString(obj: any): obj is string;
                                                                                        _isBoolean(obj: any): obj is boolean;
                                                                                        isObject(val: any): val is Object;
                                                                                        isValidSelector(selector: any): boolean;
                                                                                        _sign(number: number): 1 | -1;
                                                                                        requestAnimFrame(callback: Function): void;
                                                                                        createCanvasElement(): HTMLCanvasElement;
                                                                                        createImageElement(): HTMLImageElement;
                                                                                        _isInDocument(el: any): boolean;
                                                                                        _urlToImage(url: string, callback: Function): void;
                                                                                        _rgbToHex(r: number, g: number, b: number): string;
                                                                                        _hexToRgb(hex: string): RGB;
                                                                                        getRandomColor(): string;
                                                                                        getRGB(color: string): RGB;
                                                                                        colorToRGBA(str: string): { r: number; g: number; b: number; a: number };
                                                                                        _namedColorToRBA(str: string): { r: number; g: number; b: number; a: number };
                                                                                        _rgbColorToRGBA(str: string): { r: number; g: number; b: number; a: number };
                                                                                        _rgbaColorToRGBA(str: string): { r: number; g: number; b: number; a: number };
                                                                                        _hex8ColorToRGBA(str: string): { r: number; g: number; b: number; a: number };
                                                                                        _hex6ColorToRGBA(str: string): { r: number; g: number; b: number; a: number };
                                                                                        _hex4ColorToRGBA(str: string): { r: number; g: number; b: number; a: number };
                                                                                        _hex3ColorToRGBA(str: string): { r: number; g: number; b: number; a: number };
                                                                                        _hslColorToRGBA(str: string): { r: number; g: number; b: number; a: number };
                                                                                        haveIntersection(r1: IRect, r2: IRect): boolean;
                                                                                        cloneObject<Any>(obj: Any): Any;
                                                                                        cloneArray(arr: any[]): any[];
                                                                                        degToRad(deg: number): number;
                                                                                        radToDeg(rad: number): number;
                                                                                        _degToRad(deg: number): number;
                                                                                        _radToDeg(rad: number): number;
                                                                                        _getRotation(radians: number): number;
                                                                                        _capitalize(str: string): string;
                                                                                        throw(str: string): never;
                                                                                        error(str: string): void;
                                                                                        warn(str: string): void;
                                                                                        each(obj: Object, func: Function): void;
                                                                                        _inRange(val: number, left: number, right: number): boolean;
                                                                                        _getProjectionToSegment(
                                                                                        x1: any,
                                                                                        y1: any,
                                                                                        x2: any,
                                                                                        y2: any,
                                                                                        x3: any,
                                                                                        y3: any
                                                                                        ): any[];
                                                                                        _getProjectionToLine(
                                                                                        pt: Vector2d,
                                                                                        line: Vector2d[],
                                                                                        isClosed: boolean
                                                                                        ): Vector2d;
                                                                                        _prepareArrayForTween(startArray: any, endArray: any, isClosed: any): number[];
                                                                                        _prepareToStringify<T>(obj: any): T;
                                                                                        _assign<T_1, U>(target: T_1, source: U): T_1 & U;
                                                                                        _getFirstPointerId(evt: any): any;
                                                                                        releaseCanvas(...canvases: HTMLCanvasElement[]): void;
                                                                                        drawRoundedRectPath(
                                                                                        context: Context,
                                                                                        width: number,
                                                                                        height: number,
                                                                                        cornerRadius: number | number[]
                                                                                        ): void;
                                                                                        };

                                                                                          variable Wedge

                                                                                          const Wedge: typeof Wedge;

                                                                                            function getAngle

                                                                                            getAngle: (angle: number) => number;

                                                                                              function isDragging

                                                                                              isDragging: () => boolean;

                                                                                                function isDragReady

                                                                                                isDragReady: () => boolean;

                                                                                                  type Animation

                                                                                                  type Animation = import('./Animation.js').Animation;

                                                                                                    type Arc

                                                                                                    type Arc = import('./shapes/Arc.js').Arc;

                                                                                                      type ArcConfig

                                                                                                      type ArcConfig = import('./shapes/Arc.js').ArcConfig;

                                                                                                        type Arrow

                                                                                                        type Arrow = import('./shapes/Arrow.js').Arrow;

                                                                                                          type ArrowConfig

                                                                                                          type ArrowConfig = import('./shapes/Arrow.js').ArrowConfig;

                                                                                                            type Circle

                                                                                                            type Circle = import('./shapes/Circle.js').Circle;

                                                                                                              type CircleConfig

                                                                                                              type CircleConfig = import('./shapes/Circle.js').CircleConfig;

                                                                                                                type Container

                                                                                                                type Container = import('./Container.js').Container<Node>;

                                                                                                                  type ContainerConfig

                                                                                                                  type ContainerConfig = import('./Container.js').ContainerConfig;

                                                                                                                    type Context

                                                                                                                    type Context = import('./Context.js').Context;

                                                                                                                      type Ellipse

                                                                                                                      type Ellipse = import('./shapes/Ellipse.js').Ellipse;

                                                                                                                        type EllipseConfig

                                                                                                                        type EllipseConfig = import('./shapes/Ellipse.js').EllipseConfig;

                                                                                                                          type FastLayer

                                                                                                                          type FastLayer = import('./FastLayer.js').FastLayer;

                                                                                                                            type Group

                                                                                                                            type Group = import('./Group.js').Group;

                                                                                                                              type GroupConfig

                                                                                                                              type GroupConfig = import('./Group.js').GroupConfig;

                                                                                                                                type Image

                                                                                                                                type Image = import('./shapes/Image.js').Image;

                                                                                                                                  type ImageConfig

                                                                                                                                  type ImageConfig = import('./shapes/Image.js').ImageConfig;

                                                                                                                                    type KonvaEventListener

                                                                                                                                    type KonvaEventListener<This, EventType> = import('./Node.js').KonvaEventListener<
                                                                                                                                    This,
                                                                                                                                    EventType
                                                                                                                                    >;

                                                                                                                                      type KonvaEventObject

                                                                                                                                      type KonvaEventObject<EventType> = import('./Node.js').KonvaEventObject<EventType>;

                                                                                                                                        type KonvaPointerEvent

                                                                                                                                        type KonvaPointerEvent = import('./PointerEvents.js').KonvaPointerEvent;

                                                                                                                                          type Label

                                                                                                                                          type Label = import('./shapes/Label.js').Label;

                                                                                                                                            type LabelConfig

                                                                                                                                            type LabelConfig = import('./shapes/Label.js').LabelConfig;

                                                                                                                                              type Layer

                                                                                                                                              type Layer = import('./Layer.js').Layer;

                                                                                                                                                type LayerConfig

                                                                                                                                                type LayerConfig = import('./Layer.js').LayerConfig;

                                                                                                                                                  type Line

                                                                                                                                                  type Line = import('./shapes/Line.js').Line;

                                                                                                                                                    type LineConfig

                                                                                                                                                    type LineConfig = import('./shapes/Line.js').LineConfig;

                                                                                                                                                      type Node

                                                                                                                                                      type Node = import('./Node.js').Node;

                                                                                                                                                        type NodeConfig

                                                                                                                                                        type NodeConfig = import('./Node.js').NodeConfig;

                                                                                                                                                          type Path

                                                                                                                                                          type Path = import('./shapes/Path.js').Path;

                                                                                                                                                            type PathConfig

                                                                                                                                                            type PathConfig = import('./shapes/Path.js').PathConfig;

                                                                                                                                                              type Rect

                                                                                                                                                              type Rect = import('./shapes/Rect.js').Rect;

                                                                                                                                                                type RectConfig

                                                                                                                                                                type RectConfig = import('./shapes/Rect.js').RectConfig;

                                                                                                                                                                  type RegularPolygon

                                                                                                                                                                  type RegularPolygon = import('./shapes/RegularPolygon.js').RegularPolygon;

                                                                                                                                                                    type RegularPolygonConfig

                                                                                                                                                                    type RegularPolygonConfig =
                                                                                                                                                                    import('./shapes/RegularPolygon.js').RegularPolygonConfig;

                                                                                                                                                                      type Ring

                                                                                                                                                                      type Ring = import('./shapes/Ring.js').Ring;

                                                                                                                                                                        type RingConfig

                                                                                                                                                                        type RingConfig = import('./shapes/Ring.js').RingConfig;

                                                                                                                                                                          type Shape

                                                                                                                                                                          type Shape = import('./Shape.js').Shape;

                                                                                                                                                                            type ShapeConfig

                                                                                                                                                                            type ShapeConfig = import('./Shape.js').ShapeConfig;

                                                                                                                                                                              type Sprite

                                                                                                                                                                              type Sprite = import('./shapes/Sprite.js').Sprite;

                                                                                                                                                                                type SpriteConfig

                                                                                                                                                                                type SpriteConfig = import('./shapes/Sprite.js').SpriteConfig;

                                                                                                                                                                                  type Stage

                                                                                                                                                                                  type Stage = import('./Stage.js').Stage;

                                                                                                                                                                                    type StageConfig

                                                                                                                                                                                    type StageConfig = import('./Stage.js').StageConfig;

                                                                                                                                                                                      type Star

                                                                                                                                                                                      type Star = import('./shapes/Star.js').Star;

                                                                                                                                                                                        type StarConfig

                                                                                                                                                                                        type StarConfig = import('./shapes/Star.js').StarConfig;

                                                                                                                                                                                          type Tag

                                                                                                                                                                                          type Tag = import('./shapes/Label.js').Tag;

                                                                                                                                                                                            type TagConfig

                                                                                                                                                                                            type TagConfig = import('./shapes/Label.js').TagConfig;

                                                                                                                                                                                              type Text

                                                                                                                                                                                              type Text = import('./shapes/Text.js').Text;

                                                                                                                                                                                                type TextConfig

                                                                                                                                                                                                type TextConfig = import('./shapes/Text.js').TextConfig;

                                                                                                                                                                                                  type TextPath

                                                                                                                                                                                                  type TextPath = import('./shapes/TextPath.js').TextPath;

                                                                                                                                                                                                    type TextPathConfig

                                                                                                                                                                                                    type TextPathConfig = import('./shapes/TextPath.js').TextPathConfig;

                                                                                                                                                                                                      type Transform

                                                                                                                                                                                                      type Transform = import('./Util.js').Transform;

                                                                                                                                                                                                        type Transformer

                                                                                                                                                                                                        type Transformer = import('./shapes/Transformer.js').Transformer;

                                                                                                                                                                                                          type TransformerConfig

                                                                                                                                                                                                          type TransformerConfig = import('./shapes/Transformer.js').TransformerConfig;

                                                                                                                                                                                                            type Tween

                                                                                                                                                                                                            type Tween = import('./Tween.js').Tween;

                                                                                                                                                                                                              type TweenConfig

                                                                                                                                                                                                              type TweenConfig = import('./Tween.js').TweenConfig;

                                                                                                                                                                                                                type Vector2d

                                                                                                                                                                                                                type Vector2d = import('./types.js').Vector2d;

                                                                                                                                                                                                                  type Wedge

                                                                                                                                                                                                                  type Wedge = import('./shapes/Wedge.js').Wedge;

                                                                                                                                                                                                                    type WedgeConfig

                                                                                                                                                                                                                    type WedgeConfig = import('./shapes/Wedge.js').WedgeConfig;

                                                                                                                                                                                                                      Package Files (1)

                                                                                                                                                                                                                      Dependencies (0)

                                                                                                                                                                                                                      No dependencies.

                                                                                                                                                                                                                      Dev Dependencies (30)

                                                                                                                                                                                                                      Peer Dependencies (0)

                                                                                                                                                                                                                      No peer dependencies.

                                                                                                                                                                                                                      Badge

                                                                                                                                                                                                                      To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                                                                      You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/konva.

                                                                                                                                                                                                                      • Markdown
                                                                                                                                                                                                                        [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/konva)
                                                                                                                                                                                                                      • HTML
                                                                                                                                                                                                                        <a href="https://www.jsdocs.io/package/konva"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>