基于 Konva 实现Web PPT 编辑器（二）
动画系统
为了实现演示中复杂的动画效果，使用 Animation 类统一管理；切换动画通过 css animation 实现，并且是应用在 konvajs-content 上，动画则通过 gsap 实现，应用在 Konva.Node 上，实现思路如下：
/**
* 动画相关实现
* 1. 切换动画通过 css animation 实现
* 1.1 应用在 konvajs-content 上
* 1.2 对于 animation 来说，动画就是个类名，通过 style 来设置动画
* 1.3 动画结束后，需要移除动画类名，通过 style.animation = '' 实现
* 1.4 动画应用是通过 Layer.setAttrs 记录状态，在预览时，动态添加即可
*
* 2. 元素动画则通过 gsap 库实现，应用在 Konva.Node 上
* 2.1 这里的动画其实是一个时间线，从某个节点状态运行到另一个节点状态
* 2.2 官网： https://gsap.com/docs/v3/
* 2.3 官网上提供了很多动画，这里只使用 gsap 的 timeline 来实现动画
* 2.4 同样需要记录 动画状态，在预览时，通过动画状态来应用动画；
*
* 3. 切换应用动画的流程：
* 3.1 调用 setAnimation 给当前layer标记动画属性；
* 3.2 在预览时 调用 applyAnimation 应用动画；
* 3.3 动画结束后，调用clearTimeOut清除动画
* 3.4 如果是应用全部动画的话，通过 global 标识，每次新增幻灯片，都判断有没有全局动画，如果有，则应用全局动画
*/
应用到实例上效果如下：
经过研究探讨，发现原生的 Konva.Tween 难以满足应用中复杂的强调、入场、退场动画,对节点的属性控制、播放节点控制能力较弱，而Konva.Animation 则是通过request Animation实现的动画，对时间的控制不够精确，整个属性过渡的效果需要自行实现，因此，决定采用 gsap 动画实现。gasp 官网 具体的API我就不介绍了哈，大家自行前往官网查看，我就举个例子说明项目中的应用：
const timeline = gsap.timeline();
timeline.pause();
// 淡入
[KonvaAnimationMap.fadeIn]: () => {
const tween = gsap.fromTo(
node,
{
opacity: 0,
scaleX: 0,
scaleY: 0,
x: node.x() + node.width() / 2,
y: node.y() + node.height() / 2,
},
{
opacity: 1,
scaleX: 1,
scaleY: 1,
x: node.x(),
y: node.y(),
onComplete,
}
);
timeline.add(tween);
return timeline;
}这里只是创建了补间动画及时间轴，并且默认是暂停状态，因为幻灯片中的元素动画应用是有’单击时‘、’上个动画同时‘、’上个动画结束‘，因此，将动画对象返回，根据合适的时机进行执行是最合适的（这里仅是对动画进行应用展示哈，后续的如何在预览时，根据时机播放，我们放在预览中说明）
对齐辅助线
我们参考官网的实现案例：How to snap canvas shape to other shapes,通过监听 dragmove dragend 来实现对齐辅助线：
大致思路就是取拖动的六条线坐标，与当前画布节点进行比较，看是否有满足条件的节点，绘制直线即可，konva中的宽高在缩放后是不会改变的，因此，需要取其缩放比例，手动计算实际的宽高：
// 元素真实的宽高与缩放比例也有关系
const node = e.target;
const scaleX = node.scaleX() || 1;
const scaleY = node.scaleY() || 1;
const x = node.x();
const y = node.y();
const width = node.width() * scaleX;
const height = node.height() * scaleY; 
而磁吸效果实现的核心，就是在一定范围内，自动修正节点位置:
单选、多选、框选
单选通过监听 group.click 事件实现，多选就是用户按住 Ctrl Shift 键的时候，不清空之前的形变节点即可。
// 左键选中元素
if (e.evt.button === 0) {
const layer = draw.getLayer();
if (!layer) return;
const group = e.target.parent!;
const { shiftKey, ctrlKey } = e.evt;
// 是否多选
if (shiftKey || ctrlKey) {
// 标记激活状态
group.setAttr("selected", true);
groupMultiple(e, draw);
return;
}
// 清空所有的形变 包括取消选中节点属性
draw.clearTransformer({ selected: true });
// 标记激活状态
group.setAttr("selected", true);
// 为当前节点创建形变节点
groupTransformer(draw, group);
}通过创建的 Konva.Transformer ，会自动识别宽高尺寸，旋转角度等，不需要我们处理：
框选实现，则通过监听鼠标 mousedown mousemove mouseup 事件，绘制合适的选区，计算位置关系，得出被框选的元素：
// mousedown
// 记录初始位置
const ssx = e.evt.offsetX;
const ssy = e.evt.offsetY;
stage.setAttrs({
selecting: true,
ssx, // stage start x
ssy, // stage start y
});
const selectBoxCss = ".konva-root-container-frame_selected";
const selectBox = root.querySelector(selectBoxCss) as HTMLDivElement;
selectBox.style.left = ssx + "px";
selectBox.style.top = ssy + "px";
// mousemove
// 解析位置
const { offsetX, offsetY } = e.evt;
// 计算偏移量
const dx = offsetX - ssx;
const dy = offsetY - ssy;
const selectBoxCss = ".konva-root-container-frame_selected";
const selectBox = root.querySelector(selectBoxCss) as HTMLDivElement;
if (dx > 0) selectBox.style.width = dx + "px";
else {
// 如果小于 0 则反向框选，需要修改 left width
selectBox.style.left = offsetX + "px";
selectBox.style.width = Math.abs(dx) + "px";
}
if (dy > 0) selectBox.style.height = dy + "px";
else {
selectBox.style.top = offsetY + "px";
selectBox.style.height = Math.abs(dy) + "px";
}// mouseup
stage.setAttrs({
selecting: null,
ssx: null,
ssy: null,
});
const selectBoxCss = ".konva-root-container-frame_selected";
const selectBox = root.querySelector(selectBoxCss) as HTMLDivElement;
selectBox.style.top = "0px";
selectBox.style.left = "0px";
selectBox.style.width = "0";
selectBox.style.height = "0";
框选中判断节点是否被选中实现如下，则直接使用 Konva.Util.haveIntersection 工具函数即可：
/**
* 判断节点是否在范围内
* @param node 传入需要判断的Konva节点
* @param range 传入范围 {x,y,width,height}
*/
export function haveInterSection(
node: Konva.Node,
range: { x: number; y: number; width: number; height: number }
) {
return Konva.Util.haveIntersection(
{ x: node.x(), y: node.y(), width: node.width(), height: node.height() },
range
);
}
// mouseup 判断节点是否选中
layer.find(".konva-base-group").filter((node) => {
const range = { x: left, y: top, width, height };
const isIntersection = haveInterSection(node, range);
if (isIntersection) {
// 给节点添加selected状态
node.setAttrs({ selected: true });
// 选中节点
groupTransformer(draw, node);
}
});
拓展konva类型
图片
图片的处理上篇已经讲述过实现原理了哈，这里不再赘述；
媒体资源
媒体资源实现的方案是Konva.Image 实现的，因为Image的image属性支持类型如下，可参考官网案例：How to display video on Canvas：
表格
表格实现是基于Konva自定义图形，通过定义形状绘制方法与事件响应范围来实现：
// table - 表格
public Table(payload: IKonvaTableConfig & Konva.ShapeConfig) {
const group = this.getGroup(payload);
const data = [
["Name", "Age", "Gender"],
["Alice", 25, "Female"],
["Bob", 30, "Male"],
["Charlie", 35, "Male"],
["Diana", 28, "Female"],
];
const columnWidths = [100, 100, 100]; // 列宽
const rowHeight = 30; // 行高
const width = 300;
const height = 150;
// 自定义表格
var table = new Konva.Shape({
...payload,
width,
height,
fill: "#fff",
stroke: "#000",
/**
* 定义绘制方法 数据属性放置在 attrs 上，调用 render 即可重新渲染
* @param ctx
* @param shape
*/
sceneFunc: (ctx, shape) => {
ctx.beginPath();
for (let i = 0; i < data.length; i++) {
for (let j = 0; j < data[i].length; j++) {
const cellX = 100 * j;
const cellY = i * rowHeight;
const cellWidth = columnWidths[j];
const cellHeight = rowHeight;
// 绘制单元格边框 - 奇偶行实现斑马纹
ctx.fillStyle = i % 2 ? "#fafafa" : "#fff";
if (i === 0) ctx.fillStyle = "rgba(0,0,0,0.2)";
ctx.fillRect(cellX, cellY, cellWidth, cellHeight);
// 是否启用边框
ctx.strokeRect(cellX, cellY, cellWidth, cellHeight);
// 绘制单元格内容;
ctx.fillStyle = "#000"; // 设置文本颜色为黑色
ctx.font = "14px Arial"; // 设置字体样式
ctx.fillText(data[i][j].toString(), cellX + 5, cellY + 20); // 绘制文本内容
}
}
ctx.fillStrokeShape(shape); // (!) Konva specific method, it is very important
},
// 绘制事件响应区域
hitFunc: function (ctx, shape) {
ctx.beginPath();
ctx.rect(0, 0, width, height);
ctx.closePath();
ctx.fillStrokeShape(shape);
},
});
// 处理事件 - 双击进行数据编辑
group.on("dblclick", () => {
console.log("table dblclick");
});
group.add(table);
this.overwriteGraph(group);
return group;
}
表格的更新，通过自定义属性，记录初始数据，动态生成table，确认后再转为 shape 的属性：
统计图
本应用使用的统计图较为简单，就不引入其他库了，手动绘制实现，还是通过 Konva.Shaph 自定义图形哈，具体的绘制过程就不展示了，就是基础的canvas绘图能力。
文本
文本这里的处理有一个难点哈，也是前期的一个坑，现在来填一下，在我们最初设计的时候，文本是跟随group一起移动的对吧，但是缩放也会跟着缩放！如下：
但是，WPS 的效果可不是这样的哦：
因此，实现文本自适应是最重要的！网上查阅了相关资料，都没有好的办法处理，都说需要动态设置文本的缩放比例，太过复杂！ 既然是缩放过程中文本被迫缩放了，那么，不让他跟随缩放不就完了嘛？
大家要理解这里面的层级关系哈：外层 Group 负责draggable，Rect 负责缩放，文本才能自适应.
公式
公式的实现比较难，大家有什么好的库推荐下，这里使用的是 mathlive，很多的插件，都是提供 latex 编辑器，然后提供预览功能，其实这样是非常难用的，我们无法直观的查看及编辑公式内容；而 mathlive 则能够直接提供直观的公式编辑页面：
mathLive功能演示：
但是目前没有比较完善的文章将mathlive的使用、导出等功能进行讲解，只能自我摸索，边看文档边实践；同时，本文也不重点关注这块，如果感兴趣，后期可以出一篇文章讲解mathlive 的使用哈，我只重点讲述遇到的难点：
隐藏菜单、键盘：
我是不使用默认的功能哈，公式的插入手动实现，当然，大家也可以直接使用默认功能。
/** 隐藏公示栏的菜单及键盘按钮 **/
@media not (pointer: coarse) {
math-field::part(virtual-keyboard-toggle) {
display: none;
}
math-field::part(menu-toggle) {
display: none;
}
}引入样式文件：
转成 html：
这里是为了转图片做准备的哈
const html= convertLatexToMarkup(mfe.value);转图片：
这里使用的库是mathlive官网使用的：html-to-image :
toPng(div).then(function (dataUrl) {
/* do something */
console.log(dataUrl);
});插入公式：
官网给我们提供了 command 命令，可以执行一些常用的操作，比例插入，撤销重做等。同时，还提供了所有 LaTex command，将常见的公式也封装了，只需要执行响应的命令，就可以插入公式：
比如现在要插入（根号3）：
mfe.executeCommand("insert", "\\sqrt{3}");
注意：一定是 \ 转义一次哈，不然得到的可就不是 根号3 而是字符串了：
效果如下：
历史记录
历史记录的实现，大家可以参考官网给出的案例，在大型应用中，如果直接使用 toJSON 保存历史记录的话，会丢失很多关键信息，例如事件、过滤器等，因此我们不适用json保存。
看了官网的案例，是通过保存整个stage，然后撤销重做时，重新进行事件绑定，这种方案在我们的应用中，也是不可取的。我们封装了group ，为group 添加了这么多事件，如果都重写，那工作量可多了。
【解决方案】：在图层管理中，缓存的是layer数据，layer是可以直接进行赋值操作，事件也不会丢失，因此，采用layer进行历史记录缓存。
// undo 栈
private undoStack: Konva.Layer[] = [];
// redo 栈
private redoStack: Konva.Layer[] = [];
// 最大历史记录数
private maxRecordCount = maxRecordCount; /** 添加记录 */
public patchHistory() {
const layer = this.draw.getLayer()?.clone()!;
// 当前图层的JSON串 - 不直接使用 toJSON()，避免后续修改
const layerJson = JSON.stringify(layer?.toObject());
// 被添加图层与最后缓存的记录是否一致
const lastLayer = this.undoStack[this.undoStack.length - 1];
const lastLayerJson = JSON.stringify(lastLayer?.toObject());
if (layerJson === lastLayerJson) return console.error("记录已存在");
layer.find("Transformer").forEach((tr) => tr.destroy());
// 不然直接添加到 undoStack
console.log("patchHistory");
this.undoStack.push(layer);
// 如果记录数大于 maxRecordCount，则删除最前的记录
while (this.undoStack.length > this.maxRecordCount) this.undoStack.shift();
} // 撤销动作
public undo() {
// 需要保留背景图层，因此 撤销栈不能为0
if (this.undoStack.length <= 1) return console.log("不可撤销");
// 获取当前图层，放到 redoStack，并删除 undoStack
const layer = this.undoStack.pop()!;
this.redoStack.push(layer);
// 重新渲染图层
this.render();
} // 重做动作
public redo() {
if (this.redoStack.length <= 0) return console.log("不可重做");
// 获取当前图层，放到 undoStack，并删除 redoStack
const layer = this.redoStack.pop()!.clone();
this.undoStack.push(layer.clone());
// 重新渲染图层
this.render();
} /** 重新渲染图层 */
private render() {
// 取出上一次的图层，并添加到当前图层
const lastLayer = this.undoStack[this.undoStack.length - 1];
const layerClone = lastLayer.clone(); // 这里一定要 clone 避免图层引用导致的历史记录异常问题
// 进行图层更新
this.draw.clearLayer(); // 删除layer
this.draw.setLayer(layerClone); // 修正 layer
this.draw.getStage().add(layerClone);
this.draw.render({ patchHistory: false });
}
总结
经过这么多天的沉淀，现在已经大体实现了幻灯片新增、删除，支持元素-矩形、箭头、文字、统计图、表格、图片多媒体、公式类型的新增删除编辑操作；实现了基本的动画系统、历史记录管理器。
下一步将是对预览系统进行完善，并考虑预览中的动画播放问题，同时，还将提供设计功能，为整个幻灯片提供基础的配色方案及预设功能；将完善相关功能，优化用户体验。