konva: 笔记

[xvno]

Refs

• konva

[xvno]

是什么

HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

forked from Kinetic

特色

Konva enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes.

[xvno]

使用

npm install konva 或者 <script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script>

[xvno]

简单原理

The stage, layers, groups, and shapes are virtual nodes, similar to DOM nodes in an HTML page.

1. Every thing starts from Konva.Stage that contains several user’s layers (Konva.Layer).
2. Each layer has two <canvas> renderers: a scene renderer and a hit graph renderer.

   The scene renderer is what you can see, and the hit graph renderer is a special hidden canvas that’s used for high performance event detection.

3. Each layer can contain shapes, groups of shapes, or groups of other groups.
4. All nodes can be styled and transformed.

Here’s an example Node hierarchy:

5. Prebuilt shapes & custom shapes

   Prebuilt shapes: rectangles, circles, images, sprites, text, lines, polygons, regular polygons, paths, stars, etc Custom shapes: instantiating the Shape class and creating a draw function

6. layers and shapes can bind event listeners, transform nodes, run animations, apply filters, selectors, and much more.

   Styles, Events, Drag & Drop, Filters & Animation & Selectors