学术论文插图绘制1: 基础知识

1 图的存储方式-矢量图、位图

   我们知道,计算机内存储空间(包括内存和磁盘等)是以字节(byte,8个二进制位)为单位的,可以理解为一个数目庞大的数组。要在计算机中表达图像,自然能想到的方法就是,把自然图像划分为整齐排列的“像素”点的集合,每个点可用几个字节(如3个字节,分别记录红、绿、蓝三色的相对比例,RGB表示法)表达,将所有“像素”点按一定顺序记录到存储空间,就能存储图像了。再现图像时,取出数据,按次序由显示设备(显示器、打印机)表达各个像素点,成为我们看到的图像。

   按照这种方法存储记录的图像,称为位图(Bitmap/raster)。表达图像时,所采用的点阵规模(宽多少个点,高多少个点)称为位图的尺寸(size)。我们的电脑桌面,实际上就是一个常驻显存的位图,其大小通常是1920*1080等。(桌面大小是可调的,如果是液晶显示器,桌面大小最好调节为和显示器的像素点规模一致,实现”点对点“显示)

   备注:位图的尺寸(size)在有些场合被称为位图的分辨率(resolution),这种叫法容易和出版发行时的印刷分辨率相混淆。我们要讲的是论文,需要跟出版打交道,就不要把大小称为分辨率了。

   在位图的发展过程中,不同企业针对具体硬件平台采用不同的数据压缩方法,形成了众多位图“文件格式”,如bmp格式位图文件、jpg格式、png格式等等。

   由于采用点阵取样的方式存储图像,一旦存储,点阵的规模就是固定的了,即使你强制转化图像文件的大小,信息量也不可能增加(只可能降低)。在显示图片的地方(如Word文件中),图片显示的区域大小(屏幕像素)一般比位图的点阵规模要小,因此看起来很清晰,但如果你把图片的显示区域拉大到比图片的点阵规模还要大,那在显示时,会计算采用最近位置的图片像素值填满屏幕像素,看起来就斑斑点点的了,很粗糙。如上图右方图示。

   除了位图之外,表达图像还有另一种方法,那就是记录“图形”,而不是“像素”。例如,直接用数学方法记录直线、方块、圆形、规则曲线、线条颜色、填充颜色等图形构成信息。由于在数学上,图形的表达用的是“矢量(有方向的箭头)”的概念,这种表达图形的方法称为矢量图(Vector Image)。很显然,矢量图适合记录线条画、原理图、数据图示等,而不适合记录风景、人像等照片类的图像。

   由于记录的是“图形/图元”,在显示时才落实占用区域,矢量图是可调(任意)大小的。因此,不管你将图片”放大“多少倍,负责矢量图绘制的电脑程序总能依据图形的形状数据,计算出每个像素点的颜值,完美表达图形细节。如上图右方所示。

   同样,矢量图在发展的过程中,也形成了很多文件格式,包括eps、wmf等。在Powerpoint、Acrobat等办公软件中,绘制的线条、图表等实际上也是矢量的,可以不失真的放大缩小。

   在表达由线条、图形构成的图像时,优选采用矢量图作为存储格式,方便调整修改。在最终使用时(出版、打印时),矢量图需要落实成为实际点阵,称为矢量图的“点阵化”,一旦点阵化,就成为位图了。

   实际上,矢量图和位图经常混合使用,例如Powerpoint的一个页面上可能既有矢量表达的线条插图,也有位图点阵表达的一副照片。

   常见的pdf文件,其基础架构是矢量的,因此放大后文字、线条等都很清楚,但对于其中嵌入的位图(如扫描录入的印刷版页面、扫描录入的印刷版插图),放大后就很粗糙了。

2. 分辨率 (Resolution)

   分辨率(resolution)这个词,被多个情景下使用,容易混淆。

   在讲一张位图图片(bmp、jpg文件)的分辨率时,实际是指图片的尺寸(size),宽多少个像素、高多少个像素)。如手机拍照形成的照片文件,分辨率可以是4160*2336,3260*1840等多种选择。

   电脑桌面实际上是一张常驻显存的位图,于是会说,桌面的分辨率是1920*1080,指的是操作系统在画桌面时,位图点阵规模是多大,

   显示设备分两种情况了,过去的CRT显示器,其横向扫描和纵向扫描的点数是可以依据桌面的分辨率来调节的。桌面的分辨率是多少,显示器就能以多大的分辨率呈现。现在的液晶显示器,其液晶面板上的像素点是固定排列好的,不可能变。因此,有显示器的分辨率一说。如现在笔记本电脑的高清屏,分辨率是1920*1080。顺便说一下,如果是用液晶显示器,尽量将桌面分辨率设置成与显示器分辨率一致,避免操作系统做映射计算,既费电脑又显示效果差。

   制作论文插图时,需要跟出版、印刷行业打交道,则就牵涉到印刷分辨率问题了。其指标是dpi,意思是1英寸(2.54cm)尺寸内所呈现的像素个数。为了避免混淆,以下将图片的点阵规模称为尺寸(size),而“分辨率”则指印刷分辨率,即dpi数值

   杂志印刷通常要求插图分辨率为600dpi(或更高),而我们的显示器,分辨率大约只有100~200dpi(如4:3的15寸高清液晶显示器宽12.01,相当于于印刷分辨率1920/12=160),比杂志印刷需要的dpi小得多。 因此,制作的图片,(按印刷尺寸显示时)光显示清晰,远远不够

   可以自己估算,作一张要印8×4cm大的图片,印刷分辨率600dpi,其横向点阵数为600*(8/2.54)=1889点,纵向应有600*(4/2.54)=944点,即尺寸为1889×944。这样大尺寸的图片,按100%比率显示事,已经占据满了整个屏幕,虽然印出来只有小小的一块。

   下面计算一下,常见规则的论文插图需要的图片尺寸。

   编辑论文文稿时,常用的纸张大小有:

   Letter纸张: 21.5*28.0cm

   A4纸张: 21.0*29.7cm

   插图所占版面大体分为以下几种,在600dpi下,所需要的原始图片点数分别计算如下:

   专业的位图制作软件(如Photoshop),贯彻了印刷分辨率的概念。其图片大小设置的单位是cm/inch,其同时可设置dpi, 二者共同决定图片的点阵规模。

   某些位图软件,图片大小设置的单位是“pixel/点”,仅关注电脑上呈现,未贯彻dpi概念,需自行控制dpi ,即自己按以上方法计算点数。

   若是截图,也需要自己控制图片的点数了。为获得良好的印刷效果,需要将抓图对象放大显示至在屏幕上占据足够大区域,拥有足够多横向、纵向点数后,再实施截图。所截取的图片插入文档后,“缩小”图片大小,占据相应的印刷位置(如8cm*4cm)。

   矢量图制作软件(如Coreldraw),其图片大小的设置单位是cm/inch,再导出位图时,可制定dpi,选择的dpi越大,生成的位图尺寸越大。

3. 位图的压缩

   如果位图直接按顺序记录图像点阵,文件会比较庞大。

   例如1280*800点的位图,需要的文件字节数为: 1280*800*3=3,072,000 Byte ,约为2.93 MB。

   因此,常见的位图文件都带有特定的压缩/解压缩方案。在存储位图时可设置图片存储”质量“,将点阵数据压缩存储到文件。打开再现位图时,则执行解压缩,还原为点阵数据。

   位图压缩方案分为有损压缩和无损压缩两类。无损压缩,将能完整还原原始点阵,但压缩程度不够高。无损压缩,则会去掉一些视觉不敏感信息,以追求更高的压缩比率,使文件更小。

   常见的Jpg位图文件格式适合存储相片,不适合存储线条图。因此,论文插图建议采用png等采用无损压缩的文件格式。

PC Animation 技术细节

PC Animation的技术细节,参见2009年,老樵在某期刊上发表的非主流论文:

基于ActiveX和GDI+技术的数值动画开发演示环境

 Numerical animation development environment based on ActiveX and GDI+

2009

   摘要: 基于ActiveX控件技术、GDI+绘图技术,开发了能够嵌入PowerPoint等教学软件的演示动画制作及播放环境;该环境能利用通用开发语言提供的数值计算、逻辑推演、界面交互能力制作高度交互、实时计算的教学演示动画,并提供了将数值动画嵌入到流行课堂教学软件的途径,克服了常规演示动画功能单一、计算能力弱等缺点,丰富了课堂教学内容,提升教学效果。
关键词: ActiveX GDI+ 演示动画 数值计算 课堂教学

     Abstract: Base on ActiveX technique and GDI+ drawing technique, developed a software set that can develop numerical calculation animation file used in teaching demonstration , and play these animation file in teaching software such as powerpoint. The software set can make use of common development language’s ability, such as numerical calculation, logic deduction and interface interactive, to develop highly interactive, numeracy animation.
Keywords: ActiveX,GDI+, Animation, Numerical calculation, teaching

0.        引言

     理工科课程是关于客观世界的基本规律性的学科,其教学内容无不是对现实规律的描述。若能应用实际规律、通过仿真、计算获得由输入条件确定的实际规律表观,则以此制作的教学媒体无疑是最有说服力和直接性的。

   现有媒体资源,如Flash动画等,制作水平参差不齐、基本上不具备数值计算、层次交互功能,或计算过程、交互水平粗糙,有些甚至是牵强、错误的。而进行客观规律的仿真计算和结果的表示,不乏专业软件可以做到[1],但这些软件的计算过程及其结果显示方式往往不方便课堂演示,在教学实施过程中,操作专业软件往往费时费力,难以达到预期的效果。

   针对以上问题,本文作者在教学实践中和教学媒体制作工作中,设计并制作了基于ActiveX技术和GDI+技术的数值动画开发演示环境。在该环境下用通用开发语言C++,开发了大量课堂教学数值计算演示动画。该环境利用Window操作系统提供的对象链接与嵌入技术,提供了在PowerPoint等中嵌入所编写的数值演示动画的方法,简化并规范了数值动画的开发。

   使用该环境提供的理工类演示动画绘制引擎,可以借助通用开发语言提供的数值计算、逻辑推演、界面交互能力,仿真计算演示内容,并描述性定义演示画面和动画,以面向内容的方式编写数值演示动画。

   使用该播放环境提供的ActiveX播放器,不仅可以在PowerPoint中以多种方式播放常规媒体,而且能演示、播放编制的数值演示动画,提供参数输入、条件设置、分步演示、课堂设疑等高度与课堂教学设计相配合的教学动画播放环节。以丰富、真实的动画内容、以逐步展开、层层逼近的方式,讲述、演示客观规律。极大提高课堂教学效果。

图1 嵌入到PowerPoint中的数值动画

1.        数值动画开发演示环境的设计

1.1.        ActiveX技术

   为了符合在PowerPoint等中播放的需要,教学动画采用仿真计算和屏幕表现相分离的设计,仿真计算部分,以可执行代码片段的方式存在,对外表现为动画文件。而屏幕表现与交互部分则基于ActiveX技术[2, 3],制作为可以嵌入PowerPoint等中的播放器控件。在PowerPoint等的“插入对象”菜单项下,可以找到播放器。
ActiveX技术是Windows平台下对象链接与嵌入的实现技术,用不同开发语言编写的程序、代码片段可以无缝的嵌入到其他程序中去。PowerPoint等软件中大量使用了ActiveX技术。现有的Windows程序开发环境(Visual C++、Delphi等,均可开发ActiveX控件)。

1.2.        GDI+技术

      教学演示动画的绘制需要强大的绘图引擎的支持,GDI+[4]是Window环境提供的新的绘图函数集合,采用了面向对象技术,提供了更强大的二维绘图支持、包括比例缩放、旋转等等。数值动画的计算结果的屏幕表现部分,借助GDI+技术实现了丰富的图像效果。在GDI+的基础上,数值动画开发演示环境还扩充了3维演示图[5]绘制部分,开发了支持适合于教学演示的2D、3D绘图引擎。

1.3.        软件体系结构

1.3.1.       总体结构

     为了实现在PowerPoint等环境下的嵌入播放,数值动画播放软件采用两层结构,其上层为嵌入到其他软件中的ActiveX控件、或独立执行的播放器程序,而下层则是具体数值动画内容,包括场景绘制、动画组织和仿真计算部分。为了使场景绘制尽量公用,绘制接口和代码(演示动画绘制引擎)由上层程序提供。其层级结构如下图所示:

图2 体系结构

   播放器程序及播放器ActiveX控件中包含了演示动画绘制引擎,提供绘制演示动画的常用绘图功能、包括基本形状、扩展形状、和标示符号(包括公式)的绘制代码,对外提供一个绘图接口。此外,播放器程序及播放器ActiveX控件还提供场景文件加载、卸载、播放控制和参数编辑支持。

     当场景文件被加载后,相关接口被连接;当播放场景文件时,参数的编辑值被传递给场景文件,并按当前帧号调用场景绘制函数。场景绘制函数中,通过绘图接口驱动演示动画绘制引擎绘制内容场景,并依据演示帧号和当前参数数值控制内容场景的变化。

1.3.2.       基于接口的层间关联

     播放器和场景文件之间存在双向关联,播放器需要调用场景文件中的场景绘制代码、并获取场景文件中定义的场景参数信息;场景文件中需要使用播放器程序中提供的绘制引擎。因此,数值动画开发演示环境采用基于接口的层间关联设计。上层的播放控制层程序和下层的场景文件均提供预先规范好的接口的实现。当播放控制程序加载场景文件后,相关接口被连接,实现两部分程序的双向关联。

图3 播放器与场景文件的关系

1.3.3.       场景接口设计与实现

图4 场景接口设计及场景实现

        场景接口由场景文件提供,播放器加载场景时,通过场景接口读取场景属性,包括画面尺寸、背景色、坐标系设置等等信息、场景参数设置等等信息,并建立相应的播放窗口、坐标系统、参数设置界面等等。当用户播放场景文件时,播放器将周期性通过场景接口调用场景文件中的绘制代码。

1.3.4.       场景绘制接口设计与实现

图5 绘制接口设计与实现

     绘制接口由播放器提供,场景文件加载后,获得此绘制接口,在其后的场景绘制中,使用绘制接口操作播放器中的二维、三维图形绘制引擎实现场景绘制。实际绘制工作由绘制引擎实现,场景文件中关注的主要是场景、动画的组织。

   绘制接口提供的绘图功能包括以下几个方面:

  • 绘图工具的选择。包括画笔、画刷、字体等等。
  • 二维坐标变换。包括坐标系平移、缩放、旋转等。
  • 三维坐标变换。包括坐标系平移、缩放、旋转等。
  • 基本图形的绘制。包括二维、三维直线、弧线、贝塞尔曲线、矩形、椭圆形等的绘制。
  • 表达式绘制。绘图引擎中定义了表达式描述脚本语言,场景文件中可通过该语言绘制包含上下标、分式、矢量等等形式的符号、公式。
  • 扩展二维、三维图形的绘制。矢量箭头、含标识的箭头、斜线标识的线段等等教学课程中常用的图形符号。

图5 使用三维引擎绘制的演示动画

2.        数值动画开发实例

   麦克斯韦气体分子速率分布律[6]是大学物理中分子动理论的教学难点,学生往往无法适应用速率区间描述速率分布的思维逻辑,而造成对速率分布的理解不到位。针对以上问题,采用数值计算方法,制作了仿真气体分子运动及其速率分布律的演示动画。

图6 气体分子运动速率分布仿真演示

       在此演示动画中,依据分子量、温度等输入参数,依据分子运动的刚性小球模型,计算运动过程中因碰撞而发生的速度改变,得到各时刻各分子的位置和速度,绘出容器内气体分子的运动情况,形成分子运动图像。

   输入速率区间后,将用着重颜色(红色)标出速率位于该区间内的气体分子,通过尝试选择不同的区间,可以直观的看出,尽管分子运动非常的复杂,但其在不同速率区间内的分子数目是有规律的,而此规律由速率分布曲线加以描述。

   通过更改气体分子种类(更改分子量数值)、改变温度设置,可以形象的演示气体分子运动速率分布函数与分子种类、温度等的关系。

   为了使该动画配合不同内容的讲解。还设置了若干选项,用户可以选择是否绘制速度矢量,可以着重(蓝色)显示某一分子,便于在讲述时追踪单一分子的运动。

3.        结论

   基于ActiveX控件技术和GDI+图形绘制技术,开发了教学用数值演示动画制作及播放环境;该环境能利用通用开发语言提供的数值计算、逻辑推演、界面交互能力,仿真计算演示内容,并描述性定义演示画面和动画,以面向内容的方式制作高度交互、实时计算的教学演示动画;并提供了将数值动画嵌入到流行课堂教学媒体的途径,实现了与PowerPoint等的无缝集成,克服了常规演示动画功能单一、计算能力弱等缺点,丰富了课堂教学内容,提升教学效果。

   作者简介: 略,主要研究方向:物理学、检测设备与自动化装置、软件技术

参考文献

[1] 李保源. 物理过程的动画演示[J]. 大学物理, 2004.2, 23(2): 59~62.
[2] 潘爱民. COM原理与应用[M]. 北京: 清华大学出版社, 1999.
[3] Microsoft. ActiveX Control[EB/OL]. http://msdn.microsoft.com/en_us/library/aa136657.aspx. 2006.
[4] Microsoft. GDI+[EB/OL]. http://msdn.microsoft.com/en_us/library/ms533798(vs.85).aspx. 2006.
[5] David F. Rogers. 计算机图形学的算法基础(第二版)[M]. (石教英彭群生), 2002.
[6] 东南大学等七所工科院校. 物理学(第5版)[M]. 北京: 高等教育出版社, 2006.
[7] Douglas C. Schmidt, Micheal Stal, Hans Rohnert, Frank Buschmann. Pattern-Oriented Software Architecture: Patterns for Concurrent and Networked Objects[M]. 2000
[8] James Rumbaugh, Ivar Jacobson, Grady Booch. The Unified Modeling Language Reference Manual[M]. Addison-Wesley Longman, Inc. 1998