技术栈
konva
xachary
2 个月前
前端
·
canvas
·
konva
前端使用 Konva 实现可视化设计器(23)- 绘制曲线、属性面板
本章分享一下如何使用 Konva 绘制基础图形:曲线,以及属性面板的基本实现思路,希望大家继续关注和支持哈(多求 5 个 Stars 谢谢)!
~朴:shu
2 个月前
konva
·
konva 文本自适应
·
web ppt
·
ppt在线编辑
·
在线制作ppt
·
konva redo undo
·
web latex 公式
基于 Konva 实现Web PPT 编辑器(二)
为了实现演示中复杂的动画效果,使用 Animation 类统一管理;切换动画通过 css animation 实现,并且是应用在 konvajs-content 上,动画则通过 gsap 实现,应用在 Konva.Node 上,实现思路如下:
xachary
3 个月前
canvas
·
konva
前端使用 Konva 实现可视化设计器(21)- 绘制图形(椭圆)
本章开始补充一些基础的图形绘制,比如绘制:直线、曲线、圆/椭形、矩形。这一章主要分享一下本示例是如何开始绘制一个图形的,并以绘制圆/椭形为实现目标。
xachary
3 个月前
前端
·
ui
·
konva
前端使用 Konva 实现可视化设计器(20)- 性能优化、UI 美化
这一章主要分享一下使用 Konva 遇到的性能优化问题,并且介绍一下 UI 美化的思路。至少有 2 位小伙伴积极反馈,发现本示例有明显的性能问题,一是内存溢出问题,二是卡顿的问题,在这里感谢大家的提醒。
xachary
4 个月前
javascript
·
vue
·
canvas
·
konva
前端使用 Konva 实现可视化设计器(19)- 连接线 - 直线、折线
本章响应小伙伴的反馈,除了算法自动画连接线(仍需优化完善),实现了可以手动绘制直线、折线连接线功能。请大家动动小手,给我一个免费的 Star 吧~
xachary
4 个月前
算法
·
canvas
·
konva
前端使用 Konva 实现可视化设计器(18)- 素材嵌套 - 加载阶段
本章主要实现素材的嵌套(加载阶段)这意味着可以拖入画布的对象,不只是图片素材,还可以是嵌套的图片和图形。
xachary
5 个月前
前端
·
vue
·
canvas
·
konva
前端使用 Konva 实现可视化设计器(16)- 旋转对齐、触摸板操作的优化
这一章解决两个缺陷,一是调整一些快捷键,使得 Mac 触摸板可以正常操作;二是修复一个 Issue,使得即使素材节点即使被旋转之后,也能正常触发磁贴对齐效果,有个小坑需要注意。
xachary
5 个月前
前端
·
最优路径
·
konva
前端使用 Konva 实现可视化设计器(15)- 自定义连接点、连接优化
前面,本示例实现了折线连接线,简述了实现的思路和原理,也已知了一些缺陷。本章将处理一些缺陷的同时,实现支持连接点的自定义,一个节点可以定义多个连接点,最终可以满足类似图元接线的效果。
xachary
5 个月前
vue
·
canvas
·
最优路径
·
konva
前端使用 Konva 实现可视化设计器(14)- 折线 - 最优路径应用【代码篇】
话接上回《前端使用 Konva 实现可视化设计器(13)- 折线 - 最优路径应用【思路篇】》,这一章继续说说相关的代码如何构思的,如何一步步构建数据模型可供 AStar 算法进行路径规划,最终画出节点之间的连接折线。
xachary
5 个月前
vue
·
最优路径
·
konva
前端使用 Konva 实现可视化设计器(13)- 折线 - 最优路径应用【思路篇】
这一章把直线连接改为折线连接,沿用原来连接点的关系信息。关于折线的计算,使用的是开源的 AStar 算法进行路径规划,启发方式为 曼哈顿距离,且不允许对角线移动。
xachary
6 个月前
vue
·
canvas
·
konva
前端使用 Konva 实现可视化设计器(12)- 连接线 - 直线
这一章实现的连接线,目前仅支持直线连接,为了能够不影响原有的其它功能,尝试了2、3个实现思路,最终实测这个实现方式目前来说最为合适了。
xachary
6 个月前
vue
·
canvas
·
konva
前端使用 Konva 实现可视化设计器(11)- 对齐效果
这一章补充一个效果,在多选的情况下,对目标进行对齐。基于多选整体区域对齐的基础上,还支持基于其中一个节点进行对齐。
xachary
6 个月前
前端
·
canvas
·
konva
前端使用 Konva 实现可视化设计器(10)- 对齐线
请大家动动小手,给我一个免费的 Star 吧~大家如果发现了 Bug,欢迎来提 Issue 哟~github源码
xachary
6 个月前
前端
·
canvas
·
konva
前端使用 Konva 实现可视化设计器(9)- 另存为SVG
请大家动动小手,给我一个免费的 Star 吧~大家如果发现了 Bug,欢迎来提 Issue 哟~github源码
xachary
7 个月前
前端
·
canvas
·
konva
前端使用 Konva 实现可视化设计器(8)- 预览框
请大家动动小手,给我一个免费的 Star 吧~大家如果发现了明显的 Bug,可以提 Issue 哟~这一章我们实现一个预览框,实时、可交互定位的。
xachary
7 个月前
前端
·
canvas
·
konva
前端使用 Konva 实现可视化设计器(7)- 导入导出、上一步、下一步
请大家动动小手,给我一个免费的 Star 吧~这一章实现导入导出为JSON文件、另存为图片、上一步、下一步。
xachary
7 个月前
前端
·
canvas
·
konva
前端使用 Konva 实现可视化设计器(6)
请大家动动小手,给我一个免费的 Star 吧~这一章处理一下复制、粘贴、删除、画布归位、层次调整,通过右键菜单控制。
xachary
7 个月前
前端
·
canvas
·
konva
前端使用 Konva 实现可视化设计器(5)
关于第三章提到的 selectingNodesArea,在后续的实现中已经精简掉了。而 transformer 的 dragBoundFunc 中的逻辑,也直接移动 transformer 的 dragmove 事件中处理。
xachary
7 个月前
前端
·
canvas
·
konva
前端使用 Konva 实现可视化设计器(4)
给上一章做一个补充,就是实现通过上下左右按键移动所选节点。继续求 Star ,希望大家多多一键三连,十分感谢大家的支持~
xachary
7 个月前
前端
·
canvas
·
konva
前端使用 Konva 实现可视化设计器(3)
github/gitee Star 终于有几个了!从这章开始,难度算是(或者说细节较多)升级,是不是值得更多的 Star 呢?!