图形系统开发实战课程：进阶篇（上）——前言

图形开发学院

已于 2024-03-11 18:04:54 修改

阅读量1.2k

点赞数 31

分类专栏：图形系统开发实战：进阶篇（上）文章标签：个人开发前端信息可视化 javascript canva可画

于 2024-02-02 16:00:00 首次发布

本文为博主原创文章，遵循CC BY-NC-ND 4.0版权协议，商业转载请联系作者获得授权，非商业转载请附上原文出处链接及本声明。

本文链接：https://blog.csdn.net/2301_81340430/article/details/135860375

版权

图形系统开发实战：进阶篇（上）专栏收录该内容

11 篇文章 0 订阅

订阅专栏

图形开发学院｜GraphAnyWhere

课程名称：图形系统开发实战课程（进阶篇）
课程章节：“前言”
原文地址：https://graphanywhere.com/graph/advanced/2-0.html

前言

在图形系统开发实战——基础篇中我们学习了在Canvas中绘制文本和常见的几何图形，并学习了如何实现各种渲染效果，包括填充、描边、渐变、图案、阴影、透明度等方法。

然而在许多图形应用领域，不仅仅是要求将图形绘制出来，还需提供各种图形交互功能，例如对图形进行平移和缩放、图形的拾取、图形的视点控制、突出显示图形中的某个对象、图形的编辑等需求。

在图形绘制过程中采用的绘图模式有两种，第一种是保留模式(retained-mode), 第二种是立即模式(immediate-mode)。保留模式发出绘制图形指令后，会在内存中维护一份所绘图形对象的列表，因此后续可通过修改该对象列表的属性实现对图形的修改。而立即模式发出绘制图形指令后，并不会在内存中维护一份所绘图形对象的列表。

我们知道 canvas 采取的是立即模式来绘制图形，不会在内存中维护一份所绘图形对象的列表，因此它仅负责将图形直接渲染到屏幕上，其绘制的几何形状成为了屏幕像素不可分割的一部分，Canvas 没有提供对图形中的几何对象进行操作的上下文接口。

1 目标

MVVM 是目前比较流程的用于构建用户界面的软件架构模式，它将应用程序的逻辑和用户界面进行分离，以提高代码的可维护性和可测试性。其核心思路是通过数据绑定与视图模型进行关联，并通过事件或命令将用户的行为交给视图模型处理。视图模型则通过操作模型来获取和更新数据，并将数据状态反映到视图中。

在图形系统中亦可采用这种思路，将图形与模型(矢量数据)进行绑定，由视图模型来操作图形与模型(矢量数据)，并保持图形与模型间的一致性。这也是 矢量图形 采用的技术思路，矢量图形是一种面向对象的图像，它根据几何特性（形状、点、线和多边形）来绘制图形，并可支持交互性操作。

在图形系统开发实战—进阶篇中，我们将一步一步讲解图形系统中的一些的重要概念，设计和实现一款WEB前端图形开发引擎，在该组件中封装各种基本形状的绘制接口，并在内存中管理这些对象模型，通过操作模型来获取和更新数据，并将数据状态反映到图形中。

该WEB前端图形开发引擎定位为一个灵活、可扩展的图形开源JavaScript库，可用于在任何网页中创建和显示动态图形。我们将该前端图形组件命名为 anyGraph。在图形系统开发实战—进阶篇中我们还将学习绘制更加复杂的图形，并实现对图形的放大、缩小、平移、旋转等交互性操作，同时我们还将学习对图形中的对象进行突出显示、点图查询、空间分析等交互性操作功能，并将这些功能封装到该引擎中。