LewzenCore
文章平均质量分 88
Lewzen的组件与绘图核心部分
.d_p.
这个作者很懒,什么都没留下…
展开
-
【SDU Chart Team - Core】组件旋转模块、组件缩放模块、组件翻转模块
组件旋转模块、组件缩放模块、组件翻转模块这些组件模块解决了一些组件变换问题。其中组件旋转模块基于组件基础模块,并给出了实现;组件缩放模块和组件翻转模块是一个抽象的框架,需要留给具体的组件来实现。组件旋转模块解决了组件的旋转和多级旋转问题,并借助核心中提供的几何框架实现了组件坐标系。多级旋转旋转绑定组件旋转模块工作流组件缩放模块矩形的缩放缩放绑定组件翻转模块矩形的翻转翻转绑定......原创 2022-06-08 18:55:03 · 285 阅读 · 1 评论 -
【SDU Chart Team - Core】抽象组件接口 和 组件基础模块
抽象组件接口和基础组件模块抽象组件是对所有组件的泛化,也是所有组件的基类;基础组件模块是对这些抽象内容的基本实现。两者之间是继承关系。抽象组件接口固有属性反射式模块管理组件树形关系SVG图形几何学坐标系创建点点坐标系转换生命周期操作这些操作用于组件在生命周期中的各个状态间进行转移,这些操作被包含在画布管理,通过画布管理中的接口进行调用。初始化拷贝 & 克隆序列化反序列化 & 反序列化生成事件基础组件模块除了对组件抽象接口进行了完整的实现外,原创 2022-05-28 17:54:48 · 209 阅读 · 0 评论 -
【SDU Chart Team - Core】画布管理:维护画布 & 维护组件的生命周期
画布管理画布按照画布层次结构进行对象的维护,详见之前的文章:【SDU Chart Team - Core】画布层次结构。这篇文章主要讨论的是后端中如何进行画布管理:画布上下文上下文即一系列被维护的对象。其中主要包括:画布的SVG接口、二级层次中预定义域和组件图形域的SVG接口(前端域交给前端维护)、组件的集合(“后端Id-组件对象”映射关系)、预定义对象的集合(“SVG接口哈希-SVG接口”映射关系)、暂存区、画布范围。画布的SVG接口画布,即绘图区域,也是画布层次结构中的<svg&g原创 2022-05-26 21:41:38 · 293 阅读 · 0 评论 -
【SDU Chart Team - Core】组件的模块化设计和命令式接口
组件的模块化设计和命令式接口组件模块组件是个相当自由的内容,一切可移动可修改的图形在本项目中都被称为组件。由于组件的交互方式可以千变万化,行为也可以千差万别,所以要提出一种通用的框架来适应全部的变化很难。于是决定把修改方式和对应行为的实现交给用户,因此使用了一套非常自由的体系,这使得模块都是可插拔的。我们定义了一个基本的架构,实现了一些基本功能。用户需要的其他功能可以基于或部分基于这些功能,在这个架构上继续派生。 这个模型是增量的。框架框架图这是一个自底向上的设计思路。最底层是一个公共的接口,原创 2022-05-24 14:11:10 · 207 阅读 · 0 评论 -
【SDU Chart Team - Core】画布层次结构
画布层次结构画布的层次结构主要需要基于SVG的层次结构,但相比纯树形结构,做出了一些简化。二级层次结构画布最外层的<svg>表示画布,元素的坐标系也就是画布坐标系;关于画布的扩展、视角的移动缩放也都基于这个元素。为了方便管理,引入一系列组元素作为其第二级的结构,这些结构被称为域,拥有明确的分工。预定义域定义了一些需要预渲染的内容,其中的内容参与到部分组件的绘制,,是一个组元素<defs>。这些内容包括任何SVG元素,主要有表现箭头的<marker>、表现渐原创 2022-05-21 17:22:28 · 220 阅读 · 0 评论 -
【SDU Chart Team - Core】点的更新回调 & 基于回调传播图像更新
更新回调点的更新回调使用回调机制,允许设置回调函数:void Point2D::on_update(const std::function<void(const double &, const double &, const double &, const double &)> callback) { _callback = callback;}void Point2D::on_update() { _callback = [](co原创 2022-05-20 00:12:52 · 127 阅读 · 0 评论 -
【SDU Chart Team - Core】提交过程与提交算法
基于DOM Diff的提交算法提交过程SVGI中引入了提交过程,用于进一步优化渲染。提交过程提交指的是将此阶段被修改的内容提交到新的版本,得到所有更改,并对此进行优化。假设当前的DOM树为A,过去版本的DOM树为B,那么提交等价于A-B的Diff过程。但是显然,如果保存另一个过去版本DOM树B的拷贝,则开销太大了,因为此前的拷贝操作中将要拷贝全部的属性和树形结构,时间复杂度是 O(an)O(an)O(an) 的。由于提交的内容是对自身修改,我们不妨可以直接记录修改,提交被修改的内容。记录修改原创 2022-05-19 16:15:28 · 181 阅读 · 0 评论 -
【SDU Chart Team - Core】基于哈希的DOM Diff算法
基于哈希的DOM Diff算法DOM基本操作DOM基本操作类型对DOM的基本操作可概括如下:操作原语描述child i将游标设为当前的第iii个子节点parent将游标设为当前的父节点remove i移除第iii个子节点append html增加一个子节点,内容为htmlmodify attr x / reset attr修改或重置attr属性sort indices按照indices对子节点顺序重排其中child和parent对应原创 2022-05-19 00:21:16 · 209 阅读 · 0 评论 -
【SDU Chart Team - Core】DOM节点哈希
DOM节点哈希在项目实现过程中,经常涉及到基于内容进行比较的情况。所谓基于内容比较,其实就是推导出的HTML一致。原始方法显然计算一遍HTML是十分耗时的:对于最自然的,自顶向底的过程,遍历子树的复杂度是 O(n)O(n)O(n) 的,nnn为子树大小。当引入缓存机制后,计算自底向顶,需要遍历祖先,而且每个祖先需要重新使用儿子的缓存值,所以复杂度是 O(mh)O(mh)O(mh) 的,mmm为子节点个数,hhh为高度。然后进一步考虑比较的开销,对于生成字符串,其长度正比于子树大小,因此复杂度都是 O原创 2022-05-18 17:56:27 · 125 阅读 · 0 评论 -
【SDU Chart Team - Core】SVG和SVG接口类设计
SVG和SVG接口类设计SVG类SVG类用于在低层次表示一个树形的SVG结构。提供以下接口:标签属性子节点管理设置与获取原生HTML克隆与拷贝比较差异具体类定义SVG的抽象类,其中含有所有SVG元素使用到的公共内容,涵盖了上述所有接口。然后定义SVG的具体类,例如<rect>,<circle>等,它们在标签、设置属性、克隆拷贝、比较、差异这几个接口上具有多态性。接口定义标签一个虚函数get_tag。SVGElement中的实现是返回?。各个具体类中返原创 2022-05-18 17:03:40 · 356 阅读 · 0 评论 -
【SDU Chart Team - Core】关于本项目C++开发中的常见问题汇总
本项目C++开发中的常见问题汇总编译时OOP中的声明与定义问题模板元编程中的声明与定义问题OOP中的类型转换问题模板元编程中的类型推导问题指针与引用链接时运行时测试时原创 2022-05-18 12:58:39 · 144 阅读 · 0 评论 -
【SDU Chart Team - Core】SVG属性类设计之枚举
SVG属性类设计 (3)需求在SVG属性类设计(1)中,定义了基本SVG属性类,提供了泛型的实现方式。接下来我们需要让SVG属性能进一步适配枚举型属性,例如"a|b"的类型要求。(具体的例子:rect元素中的cx,其合法属性为"<number>|<length>")。由于其性质和元组一致,称之为属性元组。属性枚举的特点是包含多个不同的类型,且选取第一个非空合法类型值作为最终类型。设计属性枚举既有容器的性质又是属性,因此要包含泛型组件中的所有操作。底层容器仍然使用泛型原创 2022-04-23 16:49:58 · 1072 阅读 · 0 评论 -
【SDU Chart Team - Core】SVG属性类设计之元组
SVG属性类设计 (2)需求在SVG属性类设计(1)中,定义了基本SVG属性类,提供了泛型的实现方式。接下来我们需要让SVG属性能进一步适配组合型属性,例如"(a|b) (<number>)"的类型要求。(具体的例子:marker元素中的preserveAspectRatio,其合法属性为"(none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)")原创 2022-04-19 17:28:34 · 147 阅读 · 0 评论 -
【SDU Chart Team - Core】SVG属性类设计之泛型赋值、绑定、提交
SVG属性类设计 (1)这个类的设计是为了将C++类型适配为符合SVG规范的类型。为了简化使用方的操作,SVG属性类中将提供C++类型到SVG规范类型的自动转换,并且提供绑定操作。需求整个类的设计涵盖以下方面:构造构造时指定对应的getter、setter。此步骤由组合了该属性的SVG进行,getter、setter由SVG内部提供。(不直接使用属性的引用是为了实现封装,将两者从设计分离以降低两者耦合度)赋值直接将某个值赋给这个属性,其中C++类型到合法SVG规范类型的转换被内部实现。赋值将解原创 2022-04-17 16:50:43 · 630 阅读 · 0 评论 -
【SDU Chart Team - Core】通用坐标系转换
坐标系转换原始思路在上周的博客中记录了一种针对当前所定义的一些坐标系间如何进行转换的一个思路:https://blog.csdn.net/cyk0620/article/details/123902973。然而这个解决方案并不具有通用性,并且在转换中,甚至忽略了某些特殊情况间的转换。问题描述条件:现有七种坐标系:画布坐标系、组件坐标系及其相对坐标系、点坐标系及其相对坐标系、向量坐标系及其相对坐标系。每个坐标系有明确的几何意义。每个点除了坐标外还拥有一个坐标系。问题描述:实现一个函数,参数为在某坐标原创 2022-04-06 18:53:33 · 321 阅读 · 0 评论 -
【SDU Chart Team - Core】一些预置点函数
一些预置点函数变换相同坐标系下,由一个点到另一个点。线性变换给定一个2×22\times 22×2的方阵MMM,然后对点进行该变换。p′=Mpp'=Mpp′=Mp直线对称给定两个点a,ba,ba,b定一条直线,然后找到点相对于该直线的对称点。首先得到ab→=b−a=(xb−xa,yb−ya)\overrightarrow{ab}=b-a=(x_b-x_a,y_b-y_a)ab=b−a=(xb−xa,yb−ya),由于对称与直线方向无关,取x轴分量≥0\ge 0≥0的方向,得到新的向量原创 2022-04-02 17:58:51 · 94 阅读 · 0 评论 -
【SDU Chart Team - Core】几种坐标系定义与坐标系转换
几种坐标系定义与坐标系转换坐标系类型画布坐标系组件坐标系点坐标系向量坐标系坐标系转换点无关坐标系转换点相关坐标系坐标系链转换原创 2022-04-02 17:02:26 · 636 阅读 · 0 评论 -
【SDU Chart Team - Core】关于SVG和图形SVG
(对此前的文章进行了修改,使其更清晰化)矢量图坐标系 Coordinate描述一种坐标系坐标系说明画布坐标系画布的绝对坐标系组件坐标系以组件布局中心为原点的绝对坐标系组件相对坐标系以图形中心为原点,以图形矩形区域长宽为[−1,1][-1,1][−1,1]的相对坐标系点坐标系以一点aaa作为原点的绝对坐标系点相对坐标系以一点aaa作为原点,另一点bbb作为(1,1)(1,1)(1,1)的相对坐标系向量坐标系以一点aaa作为原点,ab→\ov原创 2022-03-20 21:58:18 · 631 阅读 · 0 评论 -
【SDU Chart Team - Core】关于组件、组件布局、二维点类
组件表示Lewzen中包含的一个组件,包含了一切行为、规则、上下文。一个组件由三个部分组成:矢量图、文字、布局。其中布局为组件整体在画布中的表现、矢量图描述了图形的样式与变化规则、文字描述了文字样式与内容。矢量图、文字中使用都是相对自己的图形坐标系。组件对其中的一些方法进一步封装,转化为画布坐标系。组件类 LZComponent属性组成arg: LZArrange *组件布局对象的指针。只读。vg: LZVectorGraph *组件矢量图对象的指针。只读。txt: LZ原创 2022-03-14 00:10:26 · 336 阅读 · 0 评论 -
【SDU Chart Team - Core】关于前端渲染svg的性能分析
性能原始svg在浏览器引擎中的呈现可以有如下三种方式:Decode为DOM对象’<svg>’通过base64编码为图像,然后在canvas上绘制转化为blob对象,生成url,然后在canvas上绘制关于选择这三种方式的理论基础:DOM对象一种最直观最先能想到的方式。由于原始svg就是基于XML,并且能直接由Html使用,因此前端能够直接将原始svg的代码嵌入网页中。这种方法的瓶颈之一是解码,即原始svg转换为DOM对象的过程。使用DOMParser的parseFromS原创 2022-03-10 14:35:46 · 2334 阅读 · 0 评论 -
【SDU Chart Team - Core】关于组件矢量图的概念分析
组件矢量图内概念分析坐标系坐标系说明画布坐标系画布的绝对坐标系图形坐标系相对图形的绝对坐标系点坐标系以另一点aaa作为原点的绝对坐标系向量坐标系以一点aaa作为原点,另一点bbb作为x轴上单位一的相对坐标系点关键点(蓝色点、黄色点)可由用户移动的点。根据关键点计算路径点。点的颜色:设计图形时自拟。一般维持图形轮廓的为蓝色点,确定图形细节的为黄色点。蓝色点一般无活动域,黄色点存在活动域。点的id和名称:用于区分各个点。关键点的活动域用户对原创 2022-03-06 23:49:43 · 304 阅读 · 0 评论