基于 Konva 实现Web PPT 编辑器(二)

2024-09-06 09:12
文章标签 实现 编辑器 web ppt konva

本文主要是介绍基于 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 xssy, // 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 widthselectBox.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());// 不然直接添加到 undoStackconsole.log("patchHistory");this.undoStack.push(layer);// 如果记录数大于 maxRecordCount,则删除最前的记录while (this.undoStack.length > this.maxRecordCount) this.undoStack.shift();}
  // 撤销动作public undo() {// 需要保留背景图层,因此 撤销栈不能为0if (this.undoStack.length <= 1) return console.log("不可撤销");// 获取当前图层,放到 redoStack,并删除 undoStackconst layer = this.undoStack.pop()!;this.redoStack.push(layer);// 重新渲染图层this.render();}
  // 重做动作public redo() {if (this.redoStack.length <= 0) return console.log("不可重做");// 获取当前图层,放到 undoStack,并删除 redoStackconst 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(); // 删除layerthis.draw.setLayer(layerClone); // 修正 layerthis.draw.getStage().add(layerClone);this.draw.render({ patchHistory: false });}

总结

        经过这么多天的沉淀,现在已经大体实现了幻灯片新增、删除,支持元素-矩形、箭头、文字、统计图、表格、图片多媒体、公式类型的新增删除编辑操作;实现了基本的动画系统、历史记录管理器。

        下一步将是对预览系统进行完善,并考虑预览中的动画播放问题,同时,还将提供设计功能,为整个幻灯片提供基础的配色方案及预设功能;将完善相关功能,优化用户体验。

这篇关于基于 Konva 实现Web PPT 编辑器(二)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1141604

相关文章

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

AI一键生成 PPT

AI一键生成 PPT 操作步骤 作为一名打工人,是不是经常需要制作各种PPT来分享我的生活和想法。但是,你们知道,有时候灵感来了,时间却不够用了!😩直到我发现了Kimi AI——一个能够自动生成PPT的神奇助手!🌟 什么是Kimi? 一款月之暗面科技有限公司开发的AI办公工具,帮助用户快速生成高质量的演示文稿。 无论你是职场人士、学生还是教师,Kimi都能够为你的办公文

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用,主要通过Java EE(Enterprise Edition)平台来实现。  主要特点和技术包括: 1. Servlets和JSP:     Servlets 是Java编写的服务器端程序,用于处理客户端请求和生成动态网页内容。     JSP(JavaServer Pages)

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注,收藏不迷路💖 Kubernetes的PodSecurityPolicy(PSP)是一个关键的安全特性,它在Pod创建之前实施安全策略,确保P

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点:弱密码字典爆破 四种方法:   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩,我们先查看源代码