图形系统开发实战课程：进阶篇（上）——2.图形管理类（Graph）

2024-02-09 07:12
文章标签 实战 开发 进阶篇 管理 graph 图形 课程 图形系统

本文主要是介绍图形系统开发实战课程：进阶篇（上）——2.图形管理类（Graph），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！


[

图形开发学院｜GraphAnyWhere

  • 课程名称：图形系统开发实战课程：进阶篇(上)
  • 课程章节：“图形管理类（Graph）”
  • 原文地址：https://graphanywhere.com/graph/advanced/2-2.html

第二章：图形管理类（Graph）

\quad 本章以 anyGraph 中图形管理类的设计为例讲述图形管理类的作用。

1 Graph类概述

\quad 图形管理类是 anyGraph 图形开发引擎核心组件之一，是一个创建和管理图形的容器类。提供了以下几部分功能：

  • 图层管理
  • 图形渲染
  • 图形操作
  • 图形对象管理
  • 控件和事件管理

2 Graph类的设计

(1) 类的关系

\quad 图形管理相关的类包括：Graph类、Layer类、View类、GraphRenderer类，其中Graph类是这几个类的核心，负责构建另外几个类，并提供外部访问api接口；GraphRenderer类是负责图形的渲染、Layer类负责图层属性、图层数据和图层的渲染、View类负责图形的视点控制。这几个类的关系如下：
Graph
name:String
layers:Array
addLayer(layer)
removeLayer(layer)
render()
setView(view)
getCoordinateFromPixel(pixel)
getPixelFromCoordinate(coordinate)
GraphRenderer
mainCanvas:Canvas
getSize()
prepareFrame()
composeBuffer(frameState)
renderFrame()
filter()
View
center: [float,float]
resolutions:float
zoom: int
fill()
calculateCenterZoom()
getState()
Layer
source: Source
renderer: LayerRenderer
setStyle(style)
getVisible()
visibleAtResolution()
setOffset(x, y)

(2) 图层管理

\quad 在图形系统中，图层（Layers）是一种用于组织和管理图像内容的办法。图层可以将不同的图像元素分开，使得它们可以独立地进行绘制、编辑和操作。每个图层都可以包含一个或多个图像对象，这些对象可以是几何对象、文本、图像等。图层可以互相叠加，并且可以通过控制透明度、颜色和大小等属性来创建各种视觉效果。

\quad 你可以在同一个画板上绘制所有你需要的内容，也可以有选择性地将不同类别的元素分散于不同的画板上；例如在下图的场景中，将静态的地理背景与动态的人或动物分离，以及将地理背景中的草地、湖泊、树木置于不同的图层中，便能够在需要时实现精准修改与控制。

在这里插入图片描述

\quad 通过对图层的分层管理，继而控制图层的可见性，在绘图时快速隐藏暂时用不到的图层，在画布上仅显示需要的图层，更有利于排除绘图过程中的重叠元素与干扰项，让制图工作更简单和便捷。

(3) 图形渲染思路

\quad 在 anyGraph 中图形渲染的核心思路是各个图层分别对应独立的Canvas画布，在画布中渲染各自图层中的数据，最后按图层顺序将各图层合并为完整的图形。

在这里插入图片描述

\quad 在各图层渲染后，将其合并到图形的时候可采用 ctx.drawImage() 或 ctx.putImageData() 两种方式。第一种方式渲染效率会更高，第二种方式可对像素进行处理，实现更为灵活的渲染效果。

1. ctx.drawImage()
2. ctx.putImageData()

(4) 图形渲染过程

\quad anyGraph 的图形渲染过程如下：
API:异步刷新
渲染主程序
API:立即刷新
API:重绘图形
API:重绘图层
事件:RenderBefore
计算矩阵
合成图形
渲染图形
事件:RenderAfter
逐个图层合成

\quad 上图可以清晰看出图形渲染过程中，最重要的是三个步骤：

  1. 计算矩阵：在该过程中根据图形的视点范围和当前显示的viewPort计算矩阵变换参数，为图形合成时的坐标转换做好准备。

  2. 合成图形：逐个图层的将图层中的几何对象渲染至图层Canvas中。

  3. 渲染图形：将各个图层Canvas合并至图形的Canvas中，并呈现出来。

Graph 类提供了四个发起图形渲染的API，分别为立即刷新、异步刷新、刷新图层。

立即刷新

\quad 顾名思义，立即刷新就是通知主线程立即开始图形渲染，立即刷新主要应用在当前视点范围内的数据发生变化后执行。

异步刷新

\quad 异步刷新是利用HTML中Window对象的RequestAnimalFrame特性，在窗口下一次刷新的时候执行图形渲染。异步刷新应用场景非常广泛，在图形窗口属性发生了改变后，在图层属性发生了变换后，在图形对象属性发生了变换后，都可以调用该方法，通知浏览器在下一次刷新的时候重新渲染图形，这么做的好处是，不论调用了多少次异步刷新命令，浏览器仅会在下一次窗口刷新时调用一次图形渲染命令。

重绘图层

\quad 重绘图层指仅仅重新绘制某一层，其他层仍使用上一次渲染后留下的缓存图像，从而在大数据量的场景中提高图像渲染效率，例如在图形的浮动层绘制橡皮线或拉框的场景中，仅仅只是重新绘制橡皮线或拉框，而不用重新绘制图形内容本身，从而提供了渲染效率。

重绘图形

\quad 重绘图形是指根据新的参数重新绘制整个图形，发出这个命令后，anyGraph 将会重新获取各个图层中指定视点的数据，重新计算矩阵，重新进行坐标转换，重新将这些数据绘制至各个图层中，最后由GraphRenderer将图形合成为图形并显示出来。

(5) 图形事件

\quad 图形事件分为两种情况，一种情况是指图形在渲染过程中触发的事件，既有图形相关事件，也有图形相关事件， anyGraph 1.0触发的事件类型包括以下事件：

  • EventType.RenderBefore: 图形渲染之前
  • EventType.RenderAfter: 图形渲染之后
  • EventType.ComposeBefore: 图层渲染之前
  • EventType.ComposeAfter: 图层渲染之后
  • EventType.LayerModified: 图层属性发生变化之后
  • EventType.Loader: 图层数据装载之后

\quad 另一种事件类型是指对Canvas操作的键盘、鼠标、触摸、系统等类型事件，目前可支持的事件包括：

  • wheel
  • click
  • dblclick
  • mouseUp
  • mouseDown
  • mouseMove
  • mouseout
  • mouseenter
  • mouseover
  • keydown
  • touchstart
  • touchmove
  • touchend

3 Graph类的使用

类名为：Graph，位于src根目录。

\quad Graph类是 anyGraph 最核心的类，是图形处理的唯一入口，所有的图形渲染均通过该类产生。

(1) 初始化

constructor(options)

\quad 该类的构造函数接受一个 Object 类型的参数，其值包括：

名称类型说明
targetStringHTML页面容器ID
layersArray图层集合
mouseBoolean是否允许鼠标交互操作，缺省值为true
defaultFullViewBoolean初始化后是否显示全图，缺省值为false
enabledGeomEventBoolean是否允许对象事件，缺省值为false
originAtLeftTopBoolean图形坐标系是否为卡迪尔坐标系，缺省值为true
viewView图形显示选项
bgColorColorString背景颜色

说明：

  • target: 该参数为必填值，指的是 HTML页面中的容器对象， anyGraph 将在此容器对象中创建Canvas对象和其他辅助对象。在初始化前需先建立该容器对象，并指定容器宽和高属性；
  • layers: 图层列表，该属性为可选，在初始化之后可通过 addLayer() 增加图层；
  • mouse: 缺省值为true，图形对象构建后将具有通过鼠标进行缩放和漫游的功能；
  • defaultFullView: 缺省值为false，图形数据加载之后优先根据 view 属性显示图形指定位置，如果没有指定view 属性，则判断该属性的值，如果该属性的值为 true则显示全图，否则显示Canvas画布坐标内的图形；
  • originAtLeftTop：缺省值为true，图形坐标系是否为卡迪尔坐标系；
  • view: 图形显示选项, 图形数据加载之后优先根据该属性显示指定的位置；
  • bgColor：图形背景颜色，默认为透明色；
  • enabledGeomEvent：是否允许对象事件，缺省值为false；当该值为true时，图形中的每个 Geometry 对象均可提供各类鼠标事件，当数据量较大时可能会影响系统性能，因此建议在大数据量的情况下将该值设置为false；
HTML

\quad 在初始化时需在HTML中建立一个<div>容器，并指定该容器的大小，HTML如下所示：

<body style="overflow: hidden; margin:0px;"><div id="graphWrapper" style="width:1200px; height:800px;"></div>
</body>
创建图形实例

\quad 在HTML中的<script>中通过以下js程序初始化图形对象，如下所示：

let graph = new Graph({"target": "graphWrapper",
});

\quad 创建图形实例后 anyGraph 将会在上述HTML页面的graphWrapper容器内生成Canvas对象，该对象用于显示图形结果，如下图所示：

在这里插入图片描述

\quad 该容器中不仅仅包含生成的Canvas对象，还会包含一系列控件，这个可将根据需要通过graph提供的API添加和移除。

\quad 下面这段代码在初始化图形时，建立一个图层，并设置了图层的属性和数据文字的Url，还指定显示图形的视点范围。

let graph = new Graph({"target": "graphWrapper","layers": [new Layer({source: new VectorSource({ "fileUrl": "../data/mydata.json", }),name: "数据层",visible: true,style: { "color": "#515151", "fillColor": "#CCCCCC", "fillStyle":1 }})],"view": new View({center: [1268.46, 2576.57],resolutions: [11.20, 5.60, 2.80, 1.40, 0.70, 0.35, 0.175, 0.0875],zoom: 5}),
});

该代码执行后的效果如下图所示：

在这里插入图片描述

(2) 图层管理

\quad 在Graph类中提供了以下几个与图层管理相关的API：

名称说明
addLayer(layer)增加图层
removeLayer(layer)移除图层
removeLayers()移除所有图层
getLayer(id)获取指定图层
getLayers()获取所有图层
queryGeomList(coord)查询图形中“包含”该坐标位置的点
removeGeom(geom)移除某个图层中的Geometry对象
新建图层

新建图层可采用下面两种方式：

  • 方式一:
let layer = graph.addLayer({"name":"背景层"});
  • 方式二:
let layer = new Layer({"name":"背景层"});
graph.addLayer(layer);
获取图层
  • 获取指定图层
let layer = graph.getLayer(layerId)
  • 获取所有图层
let layerArray = graph.getLayers()
删除图层
  • 删除指定图层
graph.removeLayer(layer);
  • 删除所有图层
graph.removeLayers();

(3) 图形渲染

Graph类中通过GraphRenderer调用Canvas类的API进行图形绘制。

Graph类提供了以下几个与图形渲染相关的API：

名称说明
render()异步图形渲染
renderSync()同步图形渲染
renderLayer(layer)重绘指定图层
showExtent(extent)设置图形的视点范围，并重绘图形
setView(view)设置中心点和密度，并重绘图形
图形刷新

\quad 图形刷新是指不改变图形显示的范围而重新渲染图形， anyGraph 提供了三种方式刷新图形：

  • 同步刷新当前图形

\quad 例如在绘制图形后，继续执行某些代码时可使用该方式。

graph.renderSync()
  • 异步刷新当前图形

\quad 该方法通过 requestAnimationFrame() 调用刚刚介绍的renderSync()方法绘制图形，因此仅会在下次屏幕刷新时绘制图形。使用该方法不用担心多次调用 render() 会造成重复绘制图形的问题。

graph.render()
  • 立即刷新指定图层。

\quad 该方法仅会刷新指定图层，如果存在其他图层，则其他图层会使用上一次绘制的结果。适合于当数据量非常大的时候，可以减少其他图层的绘制时间，从而提高图形的渲染效率。

graph.renderLayer(layer)
显示图形指定位置

\quad anyGraph 还提供了两个根据指定位置显示图形的api。

  • 按范围显示图形
graph.showExtent(extent)
  • 按中心点和分辨率进行图形显示
let view = graph.getView();
view.setCenter([10000, 6000]);
view.setZoom(3);
graph.setView(view);

(4) 图形信息

名称说明
getFrameState()获取图形信息
getExtent()获取当前图形显示范围
getSize()获取图形的宽度和高度
getRenderObject()渲染画板对象
setBgColor(color)设置图形的背景颜色
getBgColor()获取背景颜色
getRenderer()获取渲染器
getView()返回当前视图

(5) 坐标转换

名称说明
getCoordinateFromPixel(pixel)像素坐标转图形坐标
getPixelFromCoordinate(coordinate)图形坐标转像素坐标

使用这两个方法可以将屏幕坐标转换为图形坐标，或者将图形坐标转换为屏幕坐标，示例如下：

// 将屏幕坐标转换为图形坐标
graph.getCoordinateFromPixel([100,50]);
// 将图形坐标转换为屏幕坐标
graph.getPixelFromCoordinate([18806.23, 335358.47]);

需注意的是这里的图形坐标指的是当前打开图形的坐标。

\quad “图形系统实战开发-进阶篇 第二章 图形管理类” 的内容讲解到这里就结束了，如果觉得对你有帮助有收获，可以关注我们的官方账号，持续关注更多精彩内容。

相关资料

▶ 系列教程及代码资料：https://GraphAnyWhere.com
▶ 图形系统开发实战课程：进阶篇（上）——前言
▶ 图形系统开发实战课程：进阶篇（上）——1.基础知识

作者信息

作者 ： 图形开发学院
CSDN： https://blog.csdn.net/2301_81340430?type=blog
官网：https://graphanywhere.com

这篇关于图形系统开发实战课程：进阶篇（上）——2.图形管理类（Graph）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/693503。

相关文章

网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动，这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升：减少抖动，提高图像的清晰度和细节表现力，使得监控画面更加真实可信。 - 细节增强：在低光条件下，抖
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2