云亦纵-CSDN博客

原创 2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析第十三篇绘画系统分析（4）：变换（transform）

2021SC@SDUSC大概是我负责的最后一篇了，最后的最后，我们来看一下绘画系统中的图形变换功能（transform）。原本前面应该是还有个图形部分，但这一部分的内容与线的绘制等方式大同这个类是为 Element 类提供变换功能，例如：平移、缩放、扭曲、旋转、翻转、形状、样式。通过用新的事件机制和继承机制，把 Element 类里面与变形有关的逻辑移到本类中来，保持 Element 干净整洁。在我们研究转换方法之前，让我们先看看另外两种方法，一旦要开始生成更复杂的绘图，它们就必不可.

2021-12-26 11:00:00 152

原创 2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析第十二篇绘画系统分析（3）：连线（line）

这是绘画系统的第三个大部分，连线，连线的内容包括最上层的链接线抽象类，和细分的直线，折线，贝塞尔曲线以及内外旋轮曲线五个部分。首先是连接线抽象类。连接线抽象类，需要成为连接线的类都可以混入此抽象类的实现。为了方便实现一些复杂的连接场景，特别注意：1.连接线总是画在全局坐标系中。2.连接线可以移动位置，但不能缩放、旋转、斜切。3.连接线只有两个端点，即使是折线，也是两个端点，不会有更多。4.连线不属于任何分组。5.混入此实现的类默认假定已经混入了 Eventful ，因为我们需要事件系统。

2021-12-24 18:14:17 182

原创 2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析第十一篇绘画系统分析（2）：渐变（Gradient）

今天来看一下绘画系统的第二个部分“渐变”，这一部分主要有三个文件组成，借由这三个文件来实现我们平时见到的颜色渐变的同类功能。首先就是渐变主文件var Gradient = function Gradient(colorStops) { this.colorStops = colorStops || [];};一开头是一个非常常见的声明，当获取到该指令时便会调用渐变。Gradient.prototype = { constructor: Gradient, addColorS

2021-12-18 10:47:42 139

原创 2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析第十篇绘画系统分析（1）：拖动（Draggable）

2021SC@SDUSC前面分析了几何类，几何类中实际上只提供了基础的点和线，而要用点和线构建出完整的图形实际上是调用了绘画系统，绘画系统的功能就是提供对点和线的操作以及图形的生成。今天来看绘画系统的第一个功能，拖拽。通常用draggable 属性规定元素是否可拖动。自然也就对draggable进行了定义，draggable提供拖拽功能，所有需要拖拽功能的元素都可以 mixin 此类的实现。此实现依赖事件机制，mixin 此实现的类需要预先 mixin eventful 接口的默认实现，才能提供事件

2021-12-11 11:41:51 581

原创 2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析第九篇几何系统分析（2）：线几何对象类（geoline）

2021SC@SDUSC今天继续来看几何部分的另一个重要组件，线几何对象类（geoine），这个也是从 diagramo中的同类改进而来（链接：http://diagramo.com/），这个类中的线是何学意义上的直线，它不可见，没有宽度，用来进行数学运算。实际上在封装中，这个类是在上一期的点类的前面的，但为了便于理解先对点进行了分析。var GeoLine = /*#__PURE__*/function () { function GeoLine(startPoint, endPoint)

2021-12-04 18:59:58 122

原创 2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析第八篇几何系统分析（1）：点几何对象类（geopoint）

2021SC@SDUSC前面分析的的一直是动画系统，也就是动画播放的支持组件，今天我们转过来看一下几何也就是图形系统。首先就是geopoint类，geopoint是几何学意义上的点，它不可见，没有大小，用于进行数学运算。此实现从 diagramo 中的同类改进而来，详情可参考：http://diagramo.com/。geopoint一般派生于 Geometry 类。该类一般用于描述点状地理实体。point2d和GeoPoint都可用来表示二维点，所不同的是GeoPoint描述的是地物实体.

2021-11-27 20:57:16 3295

原创 2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析第七篇动画系统分析（6）：requestAnimationFrame和track

首先是requestanimationframe，兼容多种运行环境的 requestAnimationFrame 方法。有两个重要的地方会依赖此方法：1.元素的渲染机制，在 Painter 类中会调用 2.元素的动画效果，在 Animation 类中会调用。这个是直接调用的，只要准备好更新屏幕上的动画，就应该调用此方法。这将要求在浏览器执行下一次重绘之前调用您的动画函数。回调方法传递一个参数 a DOMHighResTimeStamp，它指示当前时间（基于自时间origin以来的毫秒数）。当多个排..

2021-11-20 10:04:55 570

原创 2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析第六篇动画系统分析（5）：时间轴

2021SC@SDUSC今天来看看时间线。时间线，其作用是用来计算元素上的某个属性在指定时间点上的数值，以便于动画的稳定有序播放，也便于处理动画过程中的操作。首先是创建时间线。function Timeline(options) { _classCallCheck(this, Timeline); this.element = options.element; this.lifeTime = options.lifeTime || 1000; this.de

2021-11-13 22:41:04 102

原创 2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析第五篇动画系统分析（4）：全局图像管理器

2021SC@SDUSC今天来看一下动画过程中的另一个组件：全局图像管理器GlobalAnimationMgr动画管理器，全局单例，控制和调度所有动画过程。每个 qrenderer 实例中会持有一个GlobalAnimationMgr 实例。GlobalAnimationMgr 会管理 qrenderer 实例中的所有正在进行动画的元素。function GlobalAnimationMgr(options) { _classCallCheck(this, GlobalAnimati

2021-11-07 16:53:46 218

原创 2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析第四篇动画系统分析（3）：补间引擎

2021SC@SDUSC 前面两篇我们主要说了动画的主要驱动，然而，在动画过程中还有一个很重要的部分，那就是缓动引擎。补间动画指的是做动画时，在两个关键帧中间需要做“补间动画”，才能实现图画的运动；插入补间动画后两个关键帧之间的插补帧是由计算机http://=自动运算而得到的。 ...

2021-10-31 20:13:11 180

原创 2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析第三篇动画系统分析（2）

2021SC@SDUSCAnimationProcess.js 上一次我们AnimationProcess.js文件的内容讲了个开篇，接下来继续其余内容 AnimationProcess中动画功能的主要元素上一篇内已经讲过了，接下来的部分主要是动画过程的一些操作定义。when(time, config) { let flattenMap = new Map(); dataUtil.flattenObj(config, flattenMap); ...

2021-10-24 14:20:49 129

原创 2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析第二篇动画系统分析（1）

2021SC@SDUSC一、总述前面说过了animation（动画）包中的几个类大题都是完成什么功能的，接下来就详细的对代码进行一些分析，这一篇主要是里面的Animatable和AnimationProcess两个JS文件，其中AnimationProcess内容较多，会分开来讲，这里主要开个头。二、Animatable.js 首先是animatable，动画抽象类。任何需要动画功能的类都可以 mixin 此实现。要明确，混入Animatable 的类必须同时混入 ...

2021-10-17 20:10:15 142

原创 2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析第一篇总述+动画系统总述

2021SC@SDUSC目录2021SC@SDUSC一、总述二、animation（动画）1.animatable2.AnimationProcess3.easing4.GlobalAnimationMgr5.requestAnimationFrame6.timeline7.track一、总述前面说过quark-renderer是由开发者从 ZRender 魔改而来。从整体的结构来看，分成动画系统、渲染、事件、基本形状接口、Canvas渲染器...

2021-10-09 22:12:47 270

原创 2021SC@SDUSC山东大学软件学院软件工程应用与实践--quark renderer代码分析开篇环境配置及基本分工

2021SC@SDUSC目录一、GitHub代码地址二、下载代码三、环境配置四、运行演示五、总结一、GitHub代码地址quark-renderer: 一款轻量且强大的 Canvas(&SVG) 渲染引擎，从 ZRender 改进而来。二、下载代码注册GitHub账号后可免费下载代码压缩包下载完毕后进行解压三、环境配置首先要确保电脑已经安装了node.js，因为需要用到npm进行安装相关依赖。测试可以打开cmd并输入node --ver..

2021-09-29 12:13:09 246

Poerking的博客