基于MVC的Canvas框架的设计与实现

发布时间：2024-05-16 02:11

　　作为HTML5标准中新推出的元素,Canvas有着较为广泛的应用。开发者使用它能够在浏览器网页中开辟一片区域,继而可以通过JavaScript脚本在这片区域中绘制各种内容。适当地使用Canvas元素会使得应用软件的交互性和表现力得到极大的提升,然而在开发Canvas脚本的过程中也存在一些明显的问题亟待解决。例如Canvas绘图API较为底层,使得开发者往往需要做一些上层的封装工作,并不能直接进行开发;通过Canvas绘制动画时,开发者需要同时关心动画元素的数据模型更新和视图更新;开发Canvas脚本时结构混乱,代码段职责不清晰等。因此,为了帮助开发者提升工作效率,本文提出了一个用于解决以上问题的前端Canvas框架。框架主要特性包含了一套开箱即用的图形基础库、响应式重绘机制和允许开发者通过模板定义绘制内容的能力。开箱即用的图形基础库使得开发者通过声明和组合的方式就可以完成绘制任务,响应式重绘机制使得开发者只需要维护动画元素的数据模型,无需手动更新画布视图,减轻了开发者的负担。通过模板定义图形组件,终止了“结构-样式-行为”混杂的开发模式,有利于日后的快速维护。同时为了提升框架的渲染性能...

【文章页数】：69 页

【学位级别】：硕士

【部分图文】：

图２－ＵａｖａＳｃｒｉｐｔ中类、原型、实例间的关系图??Ｆｉｇｕｒｅ?２－１?Ｄｉａｇｒａｍ?ｏｆ?ｃｌａｓｓｅｓ，?ｐｒｏｔｏｔｙｐｅｓ，?ａｎｄ?ｉｎｓｔａｎｃｅｓ?ｉｎ?ＪａｖａＳｃｒｉｐｔ??

下面介绍通过原型链是如何实现继承的。当使用一个实例的属性或方法时，??首先会现在该实例中搜索，如果没有找到，则会沿着原型链继续搜索，直到找到??或者到达原型链的末端，这就是原型搜索机制。以图２－１的例子来说，调用??ｇｅｏｍｌｎｓｔａｎｃｅ．ｔｏＳｔｒｉｎｇＯ会经历三个搜索步骤：....

图２－３?ＭＶＣ组件协作方式图??

发者的欢迎［１５］。从概念诞生至今，ＭＶＣ也在被不断拓展和创新，例如ＭＶＰ、ＭＶＶＭ??等ＭＶ＊类模式［１６］。ＭＶＣ并不是一种特定的技术，而是一种代码编写的理念，尽??管一直在发展，但核心没有改变，一种典型的ＭＶＣ组件协作方式如图２－３所示。??＾?ＭＯＤＥＬ??ＵＰＤＡＴＥＳ....

图２－４事件监听实现原理图??Ｆｉｇｕｒｅ?２－４?Ｅｖｅｎｔ?ｍｏｎｉｔｏｒ?ｉｍｐｌｅｍｅｎｔａｔｉｏｎ?ｓｃｈｅｍａｔｉｃ??

１．?＜ｃｉｒｃｌｃ?＼＝＂１０＂?＼＝＂１０＂?ｉ－＝＇，２（）＂?／＞??代码片段２－１标签语法??ＤＳＬ编译器最重要的功能就是将源代码转换成目标语言代码。如图２－５所示，??编译过程需要经过词法分析器、语法分析器、中间代码生成器、目标代码生成器ｔｌ９１。??其中，经过词法分....

图２－５编译流程图??Ｆｉｇｕｒｅ?２－５?Ｃｏｍｐｉｌａｔｉｏｎ?ｆｌｏｗｃｈａｒｔ??词法分析器，也可以形象地称它为扫描器

??图２－４事件监听实现原理图??Ｆｉｇｕｒｅ?２－４?Ｅｖｅｎｔ?ｍｏｎｉｔｏｒ?ｉｍｐｌｅｍｅｎｔａｔｉｏｎ?ｓｃｈｅｍａｔｉｃ??２．３?ＤＳＬ编译器??ＤＳＬ是领域特定语言（ｄｏｍａｉｎ－ｓｐｅｃｉｆｉｃ?ｌａｎｇｕａｇｅ）的缩写，它指的是专注于某??个应用程序领域的计算....

本文编号：3974543