前端使用 Konva 实现可视化设计器(20)- 性能优化、UI 美化
这一章主要分享一下使用 Konva 遇到的性能优化问题,并且介绍一下 UI 美化的思路。
至少有 2 位小伙伴积极反馈,发现本示例有明显的性能问题,一是内存溢出问题,二是卡顿的问题,在这里感谢大家的提醒。
请大家动动小手,给我一个免费的 Star 吧~
大家如果发现了 Bug,欢迎来提 Issue 哟~
github源码
gitee源码
示例地址
性能优化
内存溢出
根据官方文档 Konva Class: Node 的说明:
remove(): remove a node from parent, but don’t destroy. You can reuse the node later.
destroy(): remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy().
If the node is a container (Group, Stage or Layer) it will destroy all children too.
在本示例之前的版本中,只使用 remove() 是不正确的,只使用 remove,每次 redraw 都产生巨量的实例没有被清除,也就是内存溢出了,导致 JS heap size 随随便便干到几个 GB。
【简单判断内存溢出】
前往:Chrome -> Console 面板 -> 左侧更多 -> Performance monitor -> JS heap size
如果内存只升不降,基本可以认为内存溢出了。
在本示例中,大部分图形实例都是用完即弃的,所以大部分的 remove 都替换为 destory 后,JS heap size 将基本维持在几十上百 MB(根据内容复杂度)。
这里提个醒,除了使用 remove 的时候要注意,还有个容易忽略的 API 要注意,就是 Stage、Layer、Group 的 removeChildren(),如果子节点不再有用,建议先遍历子节点分别 destroy 一下。
初始状态,如下:
卡顿
在本示例之前的版本中,只要画面需要变化,都是重新 redraw 所有图形,这导致加载的素材过多的时候,交互会产生明显的卡顿,尤其是加载 gif 的时候,每一帧都会 redraw 一次。
因此,redraw 必须是可以选择性 draw 每一层 layer 的,主要调整如下:
// 重绘(可选择)redraw(drawNames?: string[]) {const all = [Draws.BgDraw.name, // 更新背景Draws.LinkDraw.name, // 更新连线Draws.AttractDraw.name, // 更新磁贴Draws.RulerDraw.name, // 更新比例尺Draws.RefLineDraw.name, // 更新参考线Draws.PreviewDraw.name, // 更新预览Draws.ContextmenuDraw.name // 更新右键菜单]if (Array.isArray(drawNames) && !this.debug) {// 选择性 draw 也要保持顺序for (const name of all) {if (drawNames.includes(name)) {this.draws[name].draw()}}} else {for (const name of all) {this.draws[name].draw()}}}
这里有几点细节考虑:
1、传哪些 drawNames 就 redraw 哪些 draw 的 group,除非当时是调试模式。
2、不传 drawNames 就全 redraw。
3、redraw 要按 all 的顺序执行。
举例:
-
拖动画布的时候:
this.render.redraw([Draws.BgDraw.name, Draws.RulerDraw.name, Draws.PreviewDraw.name])
因为这个交互只影响了 背景、比例尺、预览的 draw。
-
放大缩小的时候:
this.render.redraw([Draws.BgDraw.name,Draws.LinkDraw.name,Draws.RulerDraw.name,Draws.RefLineDraw.name,Draws.PreviewDraw.name])
此时影响的 draw 就比较多了。
根据不同交互的特点,做必要的 redraw 处理,就可以很好的提高交互性能,减少卡顿。
UI 美化
之前的重心都放在画布的交互上,界面得过且过就行了。
现在基础架构基本稳定了,是应该美化一下丑陋的 UI 了,简单美化后:
Naive UI
为了快速美化,这里用 Naive UI,比较清爽。
主要美化了一下 头部 和 素材 栏:
- src/components/main-header
- src/components/asset-bar
这里就不贴具体代码了,比较简单。
mitt - Emitter
之前是通过配置式,传入一些 方法 当作事件的 handler,没法动态订阅,太不方便了。
这里改造了一下 Render,使用 mitt 给它赋予 Emitter 能力:
// 略
import mitt, { type Emitter } from 'mitt'
// 略
export class Render {// 略protected emitter: Emitter<Types.RenderEvents> = mitt()on: Emitter<Types.RenderEvents>['on']off: Emitter<Types.RenderEvents>['off']emit: Emitter<Types.RenderEvents>['emit']// 略constructor(stageEle: HTMLDivElement, config: Types.RenderConfig) {// 略this.on = this.emitter.on.bind(this.emitter)this.off = this.emitter.off.bind(this.emitter)this.emit = this.emitter.emit.bind(this.emitter)// 略}
}
在外面的组件里,通过 render 实例,就可以方便订阅事件,例如:
props.render?.on('selection-change', (nodes: Konva.Node[]) => {selection.value = nodes})
Thanks watching~
More Stars please!勾勾手指~
源码
gitee源码
示例地址
相关文章:
前端使用 Konva 实现可视化设计器(20)- 性能优化、UI 美化
这一章主要分享一下使用 Konva 遇到的性能优化问题,并且介绍一下 UI 美化的思路。 至少有 2 位小伙伴积极反馈,发现本示例有明显的性能问题,一是内存溢出问题,二是卡顿的问题,在这里感谢大家的提醒。 请大家动动小手&a…...
ECharts平行坐标系-营养结构(平行坐标)-3,附视频讲解与代码下载
引言: 平行坐标系(Parallel Coordinates)是可视化高维几何和分析多元数据的常用方法。它通过在n维空间中显示一组点,绘制由n条平行线组成的背景(通常是垂直且等距的),并将描述不同变量的各点连…...
蓝桥杯刷题——day8
蓝桥杯刷题——day8 题目一题干解题思路代码 题目二题干解题思路代码 题目一 题干 N 架飞机准备降落到某个只有一条跑道的机场。其中第i架飞机在 Ti时刻到达机场上空,到达时它的剩余油料还可以继续盘旋 Di个单位时间,即它最早可以于 Ti时刻开始降落&am…...
WPF ControlTemplate 控件模板
区别于 DataTemplate 数据模板,ControlTemplate 是控件模板,是为自定义控件的 Template 属性服务的,Template 属性类型就是 ControlTemplate。 演示, 自定义一个控件 MyControl,包含一个字符串类型的依赖属性。 pub…...
【Git 常用操作:pull push】
Git 基本概念 Git 是一个先进的开源的分布式版本控制系统,常用于管理工作内容、项目代码等功能。 Git 工作流程 图片来源:https://www.runoob.com/git/git-basic-operations.html 说明: workspace:工作区staging areaÿ…...
初学stm32 --- 系统时钟配置
众所周知,时钟系统是 CPU 的脉搏,就像人的心跳一样。所以时钟系统的重要性就不言而喻了。 STM32 的时钟系统比较复杂,不像简单的 51 单片机一个系统时钟就可以解决一切。于是有人要问,采用一个系统时钟不是很简单吗?为…...
基于SpringBoot的图书管理系统(源码+数据库+报告)
一、项目介绍 358基于SpringBoot的图书管理系统,系统包含两种角色:管理员、用户,系统分为前台和后台两大模块 二、项目技术 编程语言:Java 数据库:MySQL 项目管理工具:Maven 前端技术:Vue 后端技术&#x…...
物理信息神经网络(PINN)八课时教案
物理信息神经网络(PINN)八课时教案 第一课:物理信息神经网络概述 1.1 PINN的定义与背景 物理信息神经网络(Physics-Informed Neural Networks,简称PINN)是一种将物理定律融入神经网络训练过程中的先进方…...
APM32F411使用IIS外设驱动es8388实现自录自播
前言: 从零开始学习I2s外设,配置Es8288寄存器实现录音播放。本文章使用主控芯片是APM32F411系类。音频相关的概念比较多,就不再次做过多的介绍,本文章只是简单实现边录边播功能。APM系类兼容st的芯片,所以用st的hal库来…...
flink SQL实现mysql source sink
接上文:一文说清flink从编码到部署上线 环境说明:MySQL:5.7;flink:1.14.0;hadoop:3.0.0;操作系统:CentOS 7.6;JDK:1.8.0_401。 1.代码实现 1.1 E…...
【C#】实现Json转Lua (Json2Lua)
关键词: C#、JsonToLua、Json2Lua、对象序列化Lua 前提需引入NewtonsofJson,引入方法可先在Visual Studio 2019 将Newtonsoft.Json.dll文件导入Unity的Plugins下。 Json格式字符串转Lua格式字符串,效果如下: json字符串 {"1": &q…...
使用 Vue3 实现摄像头拍照功能
参考资料:MediaDevices.getUserMedia() - Web API | MDN 重要: navigator.mediaDevices.getUserMedia 需要在安全的上下文中运行。现代浏览器要求摄像头和麦克风的访问必须通过 HTTPS 或 localhost(被视为安全的本地环境)进行,如果上传服务器地址是http…...
ARM学习(38)多进程多线程之间的通信方式
ARM学习(38)ARM学习(38)多进程多线程之间的通信方式 一、问题背景 笔者在调试模拟器的时候,碰到进程间通信的问题,一个进程在等另外一个进程ready的时候,迟迟等不到,然后通过调试发现,另外一个进程变量已经变化了,但是当前进程变量没变化,需要了解进程间通信的方式…...
CEF127 编译指南 MacOS 篇 - 拉取 CEF 源码(五)
1. 引言 在完成了所有必要工具的安装和配置后,我们进入到获取 CEF 源码的阶段。对于 macOS 平台,CEF 的源码获取过程需要特别注意不同芯片架构(Intel 和 Apple Silicon)的区别以及版本管理。本文将详细介绍如何在 macOS 系统上获…...
网络安全笔记
#### 网络各层安全协议 链路层:链路隧道协议、加密技术 网络层:包过滤机制、NAT、IPsec协议、 VPN 传输层/会话层 :SSL/TLS 协议 应用层:SHTTP、HTTPS、PGP、S/MIME等 ### 网络安全技术 第二代安全技术 - 保护 - 响应 - 检测…...
LNMP+discuz论坛
0.准备 文章目录 0.准备1.nginx2.mysql2.1 mysql82.2 mysql5.7 3.php4.测试php访问mysql5.部署 Discuz6.其他 yum源: # 没有wget,用这个 # curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo[rootlocalhost ~]#…...
python 曲线拟合,曲线拟合交点
目录 效果图: 源代码: 效果图: 源代码: import json import os import shutilimport cv2 import numpy as npfrom numpy.polynomial.polynomial import Polynomialdef calculate_distance(x1, y1, x2, y2):return np.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)def get_new_g…...
【2025最新计算机毕业设计】基于SSM框架的宠物领养系统【提供源码+答辩PPT+文档+项目部署】
作者简介:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容:🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…...
C语言经典100例
文章目录 前言123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525355565859606162636465 前言 以下题目大部分来自于C语言经典100例 1 题目:有1、2、3、4个数字,能组成多少个互不相同且无重复数字的…...
利用 Jsoup 进行高效 Web 抓取与 HTML 处理
Jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 JQuery 的操作方法来取出和操作数据。 官网:https://jsoup.org/ 中文文档:Jsou…...
线上问题——频繁 Full GC 问题的排查思路
文章目录 一、查看 GC 日志二、分析内存泄漏三、检查对象生命周期四、优化代码五、调整垃圾回收策略六、使用监控工具 一、查看 GC 日志 启用 GC 日志 在 Java 应用中,需要在启动参数中添加适当的参数来启用 GC 日志记录。可以使用-XX:PrintGCDetails、-XX:PrintGCD…...
ParrotOS,一个与kali类似的渗透测试操作系统
介绍 Parrot Security(ParrotOS,Parrot)是一个基于 Debian Stable 的免费开源 GNU/Linux 发行版,专为安全专家、开发人员和注重隐私的人设计。 它包括一个完整的便携式武器库,用于 IT 安全和数字取证操作。它还包括开…...
网络视频监控平台/安防监控/视频综合管理Liveweb视频汇聚平台解决方案
一、当前现状分析 当前视频资源面临以下问题: 1)不同单位在视频平台建设中以所属领域为单位,设备品牌众多,存在的标准不一,各系统之间也没有统一标准; 2)各单位视频平台建设分散、统筹性差&am…...
《Java核心技术I》Swing选择组件中的复选框
选择组件 除了输入,也需要选择组件,接下来介绍,复选框、单选按钮、选项列表以及滑块。 复选框 需要紧邻标签来说明其用途。 bold new JCheckBox("Bold"); 调用setSelected方法来选中或取消复选框 bold.setSelected(true); isSelec…...
ES6学习Generator 函数(生成器)(八)
这里写目录标题 一、基本概念二、代码三、Generator 函数的异步应用三级目录 一、基本概念 Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同,Generator 函数有多种理解角度。语法上,首先可以把它理解成&#x…...
练习题 最小栈
最小栈 最小栈 class MinStack {private Stack<Integer> stack;private Stack<Integer> minstack;public MinStack() {stacknew Stack<>();minstacknew Stack<>();}public void push(int val) {stack.push(val);if(minstack.empty()){minstack.push(…...
windows环境下pytorch安装踩坑
目录 1 前言2 安装Anaconda3 安装CUDA4 创建Python3.9环境5 安装Pytorch环境5.1 conda方式5.2 pip方式 6 验证是否安装成功7 注意事项7.1 no module named torch问题7.12 torch.cuda.is_available()返回False问题 8 最佳实践9 总结 1 前言 这两天由于要使用Genesis,…...
从图纸泄密到全面安全防护 —— 域智盾软件在设计公司的应用
从图纸泄密到全面安全防护 —— 域智盾软件在设计公司的应用 作为一家设计公司的老板,我深知设计图纸对公司来说有多么重要。每一份设计图纸不仅凝聚着我们团队的智慧和辛勤劳动,也代表着公司的技术创新和核心竞争力。 然而,前段时间的一次…...
【ELK】Filebeat采集Docker容器日志
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 介绍filebeat是如何工作的 使用部署filebeat 介绍 Filebeat 是一个用于转发和集中日志数据的轻量级传送器。 Filebeat 作为agent安装在服务器上,监视指…...
基于java web在线商城购物系统源码+论文
一、环境信息 开发语言:JAVA JDK版本:JDK8及以上 数据库:MySql5.6及以上 Maven版本:任意版本 操作系统:Windows、macOS 开发工具:Idea、Eclipse、MyEclipse 开发框架:SpringbootHTMLjQueryMysq…...
MONI后台管理系统-swagger3(springdoc-openapi)集成
springdoc-openapi Java 库有助于使用 Spring Boot 项目自动生成 API 文档。springdoc-openapi 通过在运行时检查应用程序来根据 Spring 配置、类结构和各种注释推断 API 语义。 该库会自动生成 JSON/YAML 和 HTML 格式的页面文档。生成的文档可以使用swagger-api注释进行补充。…...
常见八股文04
63.索引的优缺点 优点 1.提高了查询性能 2.支持唯一性约束,避免插入重复数据 3.支持唯一性约束:在多表连接时,索引能够减少连接所需的时间和资源 缺点 1.占用额外存储空间:特别是在大型数据表中,索引可能会占用大量的空间 …...
php各个版本的特性以及绕过方式
一.php各个版本的特性 二.绕过正则匹配的常见方式 1.绕过空格 a.空变量$ l$s b.环境变量IFS(默认情况下IFS为空格、制表符和换行符) l${IFS}s c.重定向符(<,>) cat < file.txt //把file.txt的内容给cat命令&…...
允许某段网络访问Linux服务器上的MariaDB
在Linux服务器上安装了MariaDB,默认情况下,只允许本机访问。在某些特殊的情况下,要允许外部访问。具体操作流程如下: 1 修改服务器配置 vi /etc/my.cnf.d/server.cnf取消下面的注释,以便允许外来的主机访问。 bind-…...
【C语言】信号
【C语言】信号 信号1. 信号状态2. 信号处理方式3. 信号注册相关函数4. 信号集相关函数 信号 1. 信号状态 信号有三种状态:产生、未决和递达 信号产生方式: 按键产生,ctrlc 产生 中断信号SIGINT,ctrl \ 产生退出信号 SIGQUIT并…...
2023年下半年软考信息安全工程师案例分析及答案解析
试题一(16分) 回答问题1至问题6,将解答填入答题纸对应的解答栏内。 问题1(4分) 已知DES算法S盒如下,请补全S盒空缺的数据(1)、(2)、(3)、(4)。 【参考答案】3、13、15、0 问题2(2分) 已知S盒的输入为110011,请计算经过S盒变换之后的二进制输出。 【参考…...
攻防世界easyphp
<?php highlight_file(__FILE__); $key1 0; $key2 0;$a $_GET[a]; $b $_GET[b];if(isset($a) && intval($a) > 6000000 && strlen($a) < 3){if(isset($b) && 8b184b substr(md5($b),-6,6)){$key1 1;}else{die("Emmm...再想想&quo…...
【WRF教程第3.6期】预处理系统 WPS 详解:以4.5版本为例
预处理系统 WPS 详解:以4.5版本为例 Geogrid/Metgrid 插值选项详解1. 插值方法的工作机制2. 插值方法的详细说明2.1 四点双线性插值(four_pt)2.2 十六点重叠抛物线插值(sixteen_pt)2.3 简单四点平均插值(av…...
图解HTTP-HTTP协议
HTTP HTTP是一种不保存状态,即无状态的协议。HTTP协议自身不对请求和响应之间的通信进行保存。为了保存状态因此后面也有一些技术产生比如Cookies技术。 HTTP是通过URI定位网上的资源,理论上将URI可以访问互联网上的任意资源。 如果不是访问特定的资源…...
Linux基本命令
Linux基本命令 一条Linux命令由:命令本身 [可选项] [参数] ls 展示 ls命令的选项: -a 选项,可以展示出隐藏的内容 以 . 开头的文件或文件夹默认被隐藏,需要-a才能显示出来 **-l **选项,以列表的形式展示内容,并展示更多细节-h 选项&…...
【win10+RAGFlow+Ollama】搭建本地大模型助手(教程+源码)
一、RAGFlow简介 RAGFlow是一个基于对文档深入理解的开源RAG(Retrieval-augmented Generation,检索增强生成)引擎。 主要作用: 让用户创建自有知识库,根据设定的参数对知识库中的文件进行切块处理,用户向大…...
.ejs 后缀文件 - 嵌入式JavaScript模板
嵌入式JavaScript模板(Embedded JavaScript templates)文件是以.ejs 后缀。它是一种模板引擎,它允许你在你的HTML文件中直接嵌入JavaScript代码。EJS模板可以包含HTML代码、JavaScript表达式、控制结构(如if语句和循环)…...
springboot461学生成绩分析和弱项辅助系统设计(论文+源码)_kaic
摘 要 传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,在计算机上安装学生成绩分析和弱项辅助系统软件来发挥其高效地信息处理的作…...
【从零开始入门unity游戏开发之——C#篇23】C#面向对象继承——`as`类型转化和`is`类型检查、向上转型和向下转型、里氏替换原则(LSP)
文章目录 一、as类型转化和is类型检查1、as 关键字使用场景:语法:示例:特点: 2、is 关键字使用场景:语法:示例:特点: 3、总结 二、向上转型和向下转型1、向上转型示例: 2…...
“魔法糖果盒的秘密:用朴素贝叶斯算法猜糖果颜色”
想象一下,你有一个神奇的糖果盒,这个糖果盒里有两种糖果:红色的和蓝色的。你闭上眼睛,从盒子里拿出一个糖果,然后尝一尝,你想知道这个糖果是红色的还是蓝色的。朴素贝叶斯算法就像是一个魔法规则࿰…...
使用“NodeMCU”、“红外模块”实现空调控制
项目思路 空调遥控器之所以能够实现对空调的控制,是因为它能够向空调发射出特定的红外信号。从理论上来说,任何能够发射出这种相同红外信号的红外发射器,都可以充当空调遥控器(这也正是手机能够控制多种不同品牌空调的原因所在&a…...
了解cuda的统一内存
1. CUDA 6中的统一内存 在CUDA 6中,从Kepler GPU架构(计算能力3.0或更高)开始,在64位Windows 7、8和Linux操作系统(内核2.6.18)上开始支持统一内存. 从CUDA 6开始,NVIDIA推出了CUDA平台历史上…...
MySQL索引
2.1 索引概述 2.1.1 介绍 索引(index)是帮助MySQL高效获取数据的数据结构(有序)。在数据之外,数据库系统还维护着满足 特定查找算法的数据结构,这些数据结构以某种方式引用(指向)数据, 这样就…...
会话控制(cookie、session 和 token)
1. 介绍 所谓会话控制就是 对会话进行控制HTTP 是一种无状态的协议,它没有办法区分多次的请求是否来自于同一个客户端, 无法区分用户,而产品中又大量存在的这样的需求,所以我们需要通过 会话控制 来解决该问题。 常见的会话控制…...
stm32 rtc 详解
目录 L151 RTC 唤醒代码 方式一 通过 RTC Alarm Interrupt:(基本和F1系列一样): L151 RTC 唤醒代码 方式二 通过 RTC WakeUp Interrupt F103VE RTC 闹钟唤醒代码 (103RC 没有闹钟中断): RTC(real time…...