konva
- Version 9.3.20
- Published
- 1.42 MB
- No dependencies
- MIT license
Install
npm i konva
yarn add konva
pnpm add konva
Overview
HTML5 2d canvas library.
Index
Namespaces
Konva
- angleDeg
- Animation
- Animation
- Arc
- Arc
- ArcConfig
- Arrow
- Arrow
- ArrowConfig
- autoDrawEnabled
- capturePointerEventsEnabled
- Circle
- Circle
- CircleConfig
- Container
- Container
- ContainerConfig
- Context
- Context
- DD
- dragButtons
- dragDistance
- Easings
- Ellipse
- Ellipse
- EllipseConfig
- enableTrace
- FastLayer
- FastLayer
- Filters
- getAngle()
- Group
- Group
- GroupConfig
- hitOnDragEnabled
- Image
- Image
- ImageConfig
- isDragging()
- isDragReady()
- KonvaEventListener
- KonvaEventObject
- KonvaPointerEvent
- Label
- Label
- LabelConfig
- Layer
- Layer
- LayerConfig
- Line
- Line
- LineConfig
- Node
- Node
- NodeConfig
- Path
- Path
- PathConfig
- pixelRatio
- Rect
- Rect
- RectConfig
- RegularPolygon
- RegularPolygon
- RegularPolygonConfig
- Ring
- Ring
- RingConfig
- Shape
- Shape
- ShapeConfig
- shapes
- showWarnings
- Sprite
- Sprite
- SpriteConfig
- Stage
- Stage
- StageConfig
- stages
- Star
- Star
- StarConfig
- Tag
- Tag
- TagConfig
- Text
- Text
- TextConfig
- TextPath
- TextPath
- TextPathConfig
- Transform
- Transform
- Transformer
- Transformer
- TransformerConfig
- Tween
- Tween
- TweenConfig
- Util
- Vector2d
- Wedge
- Wedge
- WedgeConfig
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, U>(target: T, source: U): T & 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 (27)
- @parcel/transformer-image
- @size-limit/preset-big-lib
- @types/mocha
- canvas
- chai
- filehound
- gulp
- gulp-concat
- gulp-connect
- gulp-exec
- gulp-jsdoc3
- gulp-rename
- gulp-replace
- gulp-typescript
- gulp-uglify
- gulp-uglify-es
- gulp-util
- mocha
- mocha-headless-chrome
- parcel
- process
- rollup
- rollup-plugin-typescript2
- size-limit
- ts-mocha
- ts-node
- typescript
Peer Dependencies (0)
No peer dependencies.
Badge
To add a badge like this oneto 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[](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>
- Updated .
Package analyzed in 4468 ms. - Missing or incorrect documentation? Open an issue for this package.