Konva 学习

关联文档

示例

节点层级结构

简介

动画 

var anim = new Konva.Animation(function (frame) {
  var time = frame.time,
    timeDiff = frame.timeDiff,
    frameRate = frame.frameRate;
  // update stuff
}, layer);
anim.start();

序列化 & 反序列化 

var json = stage.toJSON();
  
var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":100,"y":100,"sides":6,"radius":70,"fill":"red","stroke":"black","strokeWidth":4},"className":"RegularPolygon"}]}]}';

var stage = Konva.Node.create(json, 'container');

缓存 

shape.cache();

MCP (Model Context Protocol) 

npx crawl-chat-mcp --id=67d221efb4b9de65095a2579 --name=konva_documentation

架构

核心功能

  1. 形状：矩形（Rect）、圆形（Circle）、椭圆形（Ellipse）、直线（Line）、箭头（Arrow）、弧线（Arc）、环形（Ring）、扇形（Wedge）、星形（Star）、正多边形（RegularPolygon）、路径（Path）、文本（Text）、文本路径（TextPath）、图像（Image）、精灵图（Sprite）、标签（Label）以及自定义形状
  2. 事件系统：支持点击（Click）、双击（double-click）、鼠标悬停（mouseover）、鼠标移出（mouseout）、触摸开始（touchstart）、触摸移动（touchmove）、点击（tap）、拖动（drag）等事件，并具备冒泡和委托机制
  3. 拖放功能：内置拖放功能，包含边界限制、吸附对齐以及拖放事件
  4. 动画：通过 Konva.Animation 实现基于帧的动画，通过 Konva.Tween 实现属性补间动画，提供 30 多种缓动函数
  5. 滤镜：模糊（Blur）、亮度调整（Brighten）、对比度调整（Contrast）、灰度（Grayscale）、色调饱和度亮度调整（HSL）、反相（Invert）、添加噪点（Noise）、像素化（Pixelate）、复古色调（Sepia）、阈值调整（Threshold）以及自定义滤镜
  6. 序列化：使用 toJSON() 和 Konva.Node.create() 来保存和恢复整个画布状态
  7. 导出：通过 toDataURL() 和 toBlob() 实现高质量图像导出（支持 PNG、JPEG 格式），借助第三方库实现 PDF 导出
  8. 选择与变换：内置 Transformer 用于交互式的缩放、旋转和比例调整
  9. 性能：基于图层渲染、形状缓存以及优化 API，可处理数千个形状
  10. 跨平台：在桌面和移动浏览器上均可使用，全面支持触摸事件
  11. Node.js：通过 canvas npm 包实现服务器端画布渲染
  12. TypeScript：内置 TypeScript 类型定义

SVG 

Konva.Image.fromURL('/image.svg', (image) => {
  layer.add(image);
});