Konva基本处理流程和相关架构设计

前言

canvas是使用JavaScript基于上下文对象进行2D图形的绘制的HTML元素,通常用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。基于Canvas之上,诞生了例如 PIXI、ZRender、Fabric、Konva等 Canvas渲染引擎,兼顾易用的同时保证了优秀可靠的渲染性能。

虽然对PIXI、Fabric也有所了解,但个人最早接触的是Konva,之后的系列文章都是基于Konva进行学习总结,涉及到其相关架构设计、优化策略等方面,Konva版本是v9.2.1。

Konva的基本使用

Konva API非常清晰易用,代码组织层次清晰明了,这也是基于Konva学习总结的原因之一,使用起来很顺畅舒服。Konva的基本使用形式如下:

// 容器
const stage = new Konva.Stage({container: "root",width: window.innerWidth,height: window.innerHeight
});// 层
const layer = new Konva.Layer();// 圆
const circle = new Konva.Circle({x: stage.width() / 2,y: stage.height() / 2,radius: 10,fill: 'red',stroke: 'black',strokeWidth: 1
});layer.add(circle);
stage.add(layer);

代码结构非常清晰:

  • 容器对象Stage包含层对象Layer,支持多个层对象添加
  • 层对象包含图形对象,支持多个图形对象添加

Konva的代码组织结构通常如下图:

Konva代码结构
Konva封装了常用的图形对象,例如Rect、Circle、Text、TextPath等,同时还支持自定义Shape,每个图形对象都可以直接绑定对应的事件以及通过Group进行分组,Konva更多的用法可以去官网查看,这里就不在赘述了。

Konva部分架构设计

Konva整体代码的架构设计非常清晰,在Konva中无论是Stage、Layer、Group还是各种图形Shape都是节点,对应的结构图如下:

Konva部分架构设计
Container表示容器类,继承自该类Stage、Layer都具有容器特性,即可以添加子节点。

Stage的处理流程

Stage本质就是容器,实际上在内部的处理也是如此,主要的处理逻辑如下:

class Node {constructor(config) {...this.setAttrs(config);...}
}
class Container extends Node {constructor() {super(...arguments);this.children = [];}...
}
class Stage extends Container {constructor(config) {super(checkNoClip(config));...this._buildDOM();this._bindContentEvents();...}...
}

这里关心的Stage最主要的处理逻辑有三点:

  • 处理Stage配置属性
  • 调用buildDOM方法:创建新的div节点作为content挂载在根节点DOM下
  • 调用bindContentEvents:绑定一些事件到content DOM节点上

Stage主要逻辑就是创建一个content节点挂载到对应节点上,content节点会绑定一些事件,即content节点会作为事件响应层来接收事件并做相关处理,这里涉及到的事件主要是mouse相关事件、touch相关事件、pointer相关事件。

Stage创建的content节点内容如下:

<div class="konvajs-content" role="presentation" style="position: relative; user-select: none; width: 749px; height: 758px;"></div>

Layer处理流程

Stage仅仅创建内容容器作为事件接收层,Layer表示图层对象,实际上就是创建对应的canvas节点。Layer的具体处理逻辑如下:

class Layer extends Container {constructor(config) {super(config);this.canvas = new SceneCanvas();this.hitCanvas = new HitCanvas({ pixelRatio: 1 });this._waitingForDraw = false;...}
}

Layer类主要是创建两个Canvas图层:

  • SceneCanvas:表示场景Canvas图层,即绘制图形并显示出来的Canvas
  • HitCanvas:表示命中Canvas图层,用来支持后续图形选中的处理逻辑,这里暂不关心

这里主要关心的是SceneCanvas的处理逻辑,实际上在Konva内部针对Canvas的创建进一步抽象的架构设计如下图所示:

Konva Canvas架构设计
Konva中每一个Canvas对象的内部实际上就是调用对应的Context类实例化上下文对象,相关的处理逻辑这里就不在展开了。

实际上Layer对象创建后Canvas图层并没有挂载到Stage Content节点上,只有当Layer对象添加到Stage对象后才进行挂载,无论是Stage还是Layer的add实例方法都比较重要,涉及到Konva的渲染机制,后续进行。

总结

Konva API使用方便简单,内部架构设计也非常清晰明了,对本文的一些点做下总结:

  • Stage类会创建div节点作为事件接收层并挂载到挂载DOM节点上
  • Layer类内部会创建两类Canvas图层,SceneCanvas用于显示图形渲染结果并挂载到Stage创建的content dom上,HitCanvas用于后续图形选中处理逻辑,位于内存中不会挂载到页面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/145169.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【论文极速读】Prompt Tuning——一种高效的LLM模型下游任务适配方式

【论文极速读】Prompt Tuning——一种高效的LLM模型下游任务适配方式 FesianXu 20230928 at Baidu Search Team 前言 Prompt Tuning是一种PEFT方法&#xff08;Parameter-Efficient FineTune&#xff09;&#xff0c;旨在以高效的方式对LLM模型进行下游任务适配&#xff0c;本…

基于SpringBoot的服装生产管理系统的设计与实现

目录 前言 一、技术栈 二、系统功能介绍 登录界面的实现 系统主界面的实现 用户管理模块的实现 人事安排管理模块的实现 工资管理模块的实现 考勤管理模块的实现 样板管理模块的实现 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 本协力服装厂服装生…

AI编程助手 Amazon CodeWhisperer 全面解析与实践

目录 引言Amazon CodeWhisperer简介智能编程助手智能代码建议代码自动补全 提升代码质量代码质量提升安全性检测 支持多平台多语言 用户体验和系统兼容性用户体验文档和学习资源个性化体验系统兼容性 功能全面性和代码质量功能全面性代码生成质量和代码安全性 CodeWhisperer的代…

常见应用层协议

一.HTTP&#xff08;超文本传输协议&#xff09; HTTP 和 HTTPS 二.FTP&#xff08;文件传输协议&#xff09; 三.SMTP&#xff08;简单邮件传输协议&#xff09; 四.POP3&#xff08;邮局协议版本3&#xff09; 五.IMAP&#xff08;互联网消息访问协议&#xff09; 六.DNS&am…

《Python趣味工具》——ppt的操作(2)

在上次&#xff0c;我们对PPT进行了简单的处理&#xff1b;本次&#xff0c;我们要将PPT中的文本内容写入到 Word 文档中并添加标题&#xff0c;让 Word 文档看上去结构清晰&#xff0c;方便使用。 文章目录 一、安装docx模块&#xff1a;二、从PPT中转移文字&#xff1a;1. 创…

安卓机型不需要解锁bl 不需要root 即可安装模块 框架 VirtualXposed使用步骤分析

​​​​​​安卓玩机教程---全机型安卓4----安卓12 框架xp edx lsp安装方法【一】 安卓系列机型 框架LSP 安装步骤 支持多机型 LSP框架通用安装步骤 通过以上两个博文基本可以了解手机正常安装框架的步骤。但很多机型局限于不能解锁bl和root&#xff0c;那么这些机型能不能使…

Unity之Hololens如何实现3D物体交互

一.前言 什么是Hololens? Hololens是由微软开发的一款混合现实头戴式设备,它将虚拟内容与现实世界相结合,为用户提供了沉浸式的AR体验。Hololens通过内置的传感器和摄像头,能够感知用户的环境,并在用户的视野中显示虚拟对象。这使得用户可以与虚拟内容进行互动,将数字信…

MySQL体系结构和四层架构介绍

MySQL体系结构图如下&#xff1a; 四层介绍 1. 连接层&#xff1a; 它的主要功能是处理客户端与MySQL服务器之间的连接(比如Java应用程序通过JDBC连接MySQL)。当客户端应用程序连接到MySQL服务器时&#xff0c;连接层对用户进行身份验证、建立安全连接并管理会话状态。它还处理…

notepad++配置python2环境

&#xff08;1&#xff09;python2版本下载&#xff1a;Index of /ftp/python/2.7.8/https://www.python.org/ftp/python/2.7.8/ &#xff08;2&#xff09; 配置notepad环境 1.打开Notepad&#xff0c;点击“插件”-“插件管理器”&#xff0c;在“可用”选项卡中&#xff0c…

【C/C++】C/C++面试八股

C/C面试八股 C和C语言的区别简单介绍一下三大特性多态的实现原理虚函数的构成原理虚函数的调用原理虚表指针在什么地方进行初始化的&#xff1f;构造函数为什么不能是虚函数虚函数和纯虚函数的区别抽象类类对象的对象模型内存对齐是什么&#xff1f;为什么要内存对齐static关键…

2023年上海市安全员B证证模拟考试题库及上海市安全员B证理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年上海市安全员B证证模拟考试题库及上海市安全员B证理论考试试题是由安全生产模拟考试一点通提供&#xff0c;上海市安全员B证证模拟考试题库是根据上海市安全员B证最新版教材&#xff0c;上海市安全员B证大纲整理…

金融生产存储亚健康治理:升级亚健康 3.0 ,应对万盘规模的挑战

随着集群规模的不断扩大&#xff0c;硬盘数量指数级上升&#xff0c;信创 CPU 和操作系统、硬盘多年老化、物理搬迁等多种复杂因素叠加&#xff0c;为企业的存储亚健康管理增加了新的挑战。 在亚健康 2.0 的基础上&#xff0c;星辰天合在 XSKY SDS V6.2 实现了亚健康 3.0&#…

git之merge和rebase的区别

准备 创建仓库 test-01文件 test-02文件 创建test01分支和test02分支 这里我们使用idea打开源代码 test02分支同操作 大致操作 test01分支对文件test01文件操作&#xff1a; 1.添加内容&#xff1a;test01第一次修改1 2.git commit 3.添加内容&#xff1a; test01第二次…

基于监督学习的多模态MRI脑肿瘤分割,使用来自超体素的纹理特征(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

picoctf_2018_got_shell

picoctf_2018_got_shell Arch: i386-32-little RELRO: Partial RELRO Stack: No canary found NX: NX enabled PIE: No PIE (0x8048000)32位&#xff0c;只开了NX int __cdecl __noreturn main(int argc, const char **argv, const char **envp) {_DWOR…

蓝桥杯打卡Day15天

文章目录 买不到的数目错误票据 一、买不到的数目OJ链接 本题思路:引理&#xff1a;给定a&#xff0c;b&#xff0c;若dgcd(a,b)>1 ,则一定不能凑出最大数。结论&#xff1a;如果 a,b均是正整数且互质&#xff0c;那么由 axby,x≥0,y≥0 不能凑出的最大数是 ab−a−b。 证…

什么是Spring Bean?作用域有哪些

Spring Bean详解&#xff1a;作用域与示例 Spring框架是一个强大的Java开发框架&#xff0c;它提供了大量的功能和组件来简化企业级应用程序的开发。其中&#xff0c;Spring Bean是Spring框架中的一个核心概念&#xff0c;它扮演着重要的角色&#xff0c;用于管理和组织应用程…

FreeRTOS(以STM32F1系列为例子)

目录 任务管理任务函数任务控制块顶层任务状态创建任务xTaskCreatexTaskCreateStaticxTaskCreateRestricted 任务优先级和心跳设置心跳设置优先级概述vTaskPrioritySetuxTaskPriorityGet 非运行态扩充阻塞态vTaskDelay挂起状态vTaskSuspend就绪状态完整的状态转换图延迟函数vTa…

redis-设置从节点

节点结构 节点配置文件 主节点 不变 6380节点 port 6380 slaveof 127.0.0.1 63796381节点 port 6381 slaveof 127.0.0.1 6380启动 指定配置文件的方式启动 D:\jiqun\redis\Redis-6380>redis-server.exe redis.windows.conf启动时&#xff0c;会触发同步数据命令 主节点…

在Qt中,怎么获取到在mainwindow.ui文件中添加的控件

2023年9月30日&#xff0c;周六晚上 假设我在mainwindow.ui中添加了一个名为textEdit的QTextEdit对象 在mainwindow.cpp中&#xff0c;可以通过ui对象来获取到这个控件