前言
结合项目实际业务需求，在 Fabric、Konva 等图形化框架中，我选择了性能表现好的 Konva。首先去学习官方文档和示例，以下是 Konva 的相关文档地址：
我是在豆包的浏览器中打开 Konva 官网，其自带全文翻译功能，可以快速查看中文内容。
简介
什么是 Konva？
Konva 是一个 HTML5 画布 JavaScript 框架，它通过为桌面和移动应用程序实现画布交互性来扩展 2D 上下文。
Konva 可为桌面和移动应用程序实现高性能动画、过渡效果、节点嵌套、分层、过滤、缓存、事件处理等诸多功能。
你可以在舞台上绘制图形，为它们添加事件监听器，对它们进行移动、缩放和旋转操作，这些操作与其他形状相互独立，以支持高性能动画，即使你的应用程序使用了数千个图形。
安装 Konva
下面列出了三种安装命令，任选一种：
npm install konva --save
yarn add konva
pnpm add konva
概述
它是如何工作的？
所有内容都从 Konva.Stage 开始，它包含若干用户图层（Konva.Layer）。
每一层都有两个 <canvas> 渲染器：一个场景渲染器（Scene Canvas）和一个图像命中渲染器（Hit Canvas）。场景渲染器是你能看到的内容，而图像命中渲染器是一个特殊的隐藏画布，用于高性能的事件检测。
在 Hit Canvas 中，所有元素会被绘制为唯一颜色标识（如 rgb(1, 0, 0)对应 ID 为 1 的元素）。这种颜色与可视元素的样式无关，仅用于身份识别。当触发鼠标/触摸事件时，Konva 通过 context.getImageData()读取 Hit Canvas 对应坐标的像素值，将像素值转换为元素 ID，实现毫秒级事件目标识别。
每一层都可以包含形状、形状组或其他组的组。Stage（舞台）、layers（图层）、groups（组）和 shapes（图形）都是虚拟节点，类似于 HTML 页面中的 DOM 节点。
注意：创建一个 Layer（图层）时，会自动创建 2 个 Canvas 元素，从性能方面考虑，最多创建 3 个 Layer（图层）。
以下是一个节点结构示例层级：
Stage
|
+------+------+
| |
Layer Layer
| |
+-----+-----+ Shape
| |
Group Group
| |
+ +---+---+
| | |
Shape Group Shape
|
+
|
Shape
所有节点都可以设置样式和进行变换。虽然 Konva 有预构建的形状，如矩形、圆形、图像、精灵图、文本、线条、多边形、正多边形、路径、星形等，但你也可以通过实例化 Shape 类并创建一个绘制函数来创建自定义形状。
一旦你使用图层和形状搭建好了一个场景，就可以绑定事件监听器、变换节点、运行动画、应用滤镜等等。
最小代码示例：
// first we need to create a stage
var stage = new Konva.Stage({
container: 'container', // id of container <div>
width: 500,
height: 500,
})
// then create layer
var layer = new Konva.Layer()
// create our shape
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
})
// add the shape to the layer
layer.add(circle)
// add the layer to the stage
stage.add(layer)
基本形状
Konva.js 支持以下形状：矩形、圆形、椭圆、直线、多边形、样条曲线、不规则图形、图像、文本、文本路径、星形、标签、SVG 路径、正多边形。你还可以创建自定义形状：
var triangle = new Konva.Shape({
sceneFunc: function (context) {
context.beginPath()
context.moveTo(20, 50)
context.lineTo(220, 80)
context.quadraticCurveTo(150, 100, 260, 170)
context.closePath()
// special Konva.js method
context.fillStrokeShape(this)
},
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
})
样式
每个形状都支持以下样式属性：
- 填充。纯色、渐变或图像
- 描边（颜色，宽度）
- 阴影（颜色、偏移量、不透明度、模糊度）
- 不透明度
var pentagon = new Konva.RegularPolygon({
x: stage.width() / 2,
y: stage.height() / 2,
sides: 5,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
shadowOffsetX: 20,
shadowOffsetY: 25,
shadowBlur: 40,
opacity: 0.5,
})
事件
使用 Konva，你可以轻松监听用户输入事件（click、dblclick、mouseover、tap、dbltap、touchstart 等）、属性更改事件（scaleXChange、fillChange）以及拖放事件（dragstart、dragmove、dragend）。
circle.on('mouseout touchend', function () {
console.log('user input')
})
circle.on('xChange', function () {
console.log('position change')
})
circle.on('dragend', function () {
console.log('drag stopped')
})
参阅绑定事件示例
拖放
注意：拖拽 drag 和 拖放 drop 是不一样的。拖拽 drag 是指在画布上移动元素，而拖放 drop 是指在画布上将元素放置在某个位置。
Konva 有内置的拖拽支持。目前没有 drop 事件（drop、dragenter、dragleave、dragover），但通过框架实现它们非常容易，参阅拖放事件示例。
要启用拖放功能，只需将属性 draggable 设置为 true。
接下来你就可以参阅 drag&drop 事件和设置移动限制
滤镜
Konva 提供了多种滤镜：blur, invert, noise 等等。 参阅滤镜 API
动画
你可以通过两种方式创建动画：
选择器
在构建大型应用程序时，在元素中使用搜索功能非常有用。Konva 可帮助您通过选择器查找元素。您可以使用 find() 方法（返回集合）或 findOne() 方法（返回集合的第一个元素）。
var circle = new Konva.Circle({
radius: 10,
fill: 'red',
id: 'face',
name: 'red circle',
})
layer.add(circle)
// then try to search
// find by type
layer.find('Circle') // returns array of all circles
// find by id
layer.findOne('#face')
// find by name (like css class)
layer.find('.red')
序列化与反序列化
所有创建的对象都可以保存为 JSON 格式。你可以将其保存到服务器或本地存储中。
var json = stage.toJSON()
此外，你可以从 JSON 中恢复对象：
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')
性能
Konva 提供了一些提升性能的工具。
主要的方法有：
1.缓存
Caching 允许你在 buffer canvas 里绘制元素，然后再通过 buffer canvas 绘制到场景，它能提升绘制复杂节点例如：文本、包含阴影或者描边的图形。 Demo
shape.cache()
2.图层
框架支持创建任意数量的 <canvas>。如果你的应用包含复杂的背景和许多可以移动的图形，你可以使用一个图层显示背景,另一个图层显示图形，从而只更新图形而不更新背景。 Demo
你可以在此处找到所有可用的性能提示：https://konvajs.org/docs/performance/All_Performance_Tips.html