使用ABAP绘制可伸缩矢量图
Jerry去年的文章 动手使用ABAP Channel开发一些小工具,提升日常工作效率 里曾经介绍过一些用ABAP实现的可供娱乐的小程序,比如用古老的HPGL接口在SAPGUI里绘图:
关于如何用SAP + HPGL语言在SAPGUI里画出这只哆啦A梦来,参考Jerry的文章:
本文要介绍的是另一种在SAPGUI里用ABAP绘图的方式。矢量图(Scalable Vector Graphics)也是一种图像格式,和传统的图像格式相比具有很多优点,因此近些年使用越来越广泛:
- SVG是开放的标准,基于XML,可以直接用纯文本工具编辑;
- SVG与JPEG和GIF等图像格式比起来,尺寸更小,可压缩性更强;
- SVG顾名思义,是一种可伸缩(Scalable)的图像格式,在图形尺寸发生改变的情况下,图形质量也不会受到影响。
- SVG图形中的文字是可选可搜索的,最适合用于绘制地图。
看个具体的例子。一个矩形由四条边组成,所以一个矩形的SVG实现,则是由对应的四条由line标签代表的线段构成。
从这个例子我们也能发现,SVG标签可以直接被嵌入HTML网页里。
而ABAP有一个工具类,CL_ABAP_BROWSER提供了SHOW_HTML方法,可以在SAPGUI里打开一个嵌入的浏览器窗口。
这样,我们将前面介绍的包含有矩形的SVG格式的HTML代码传入SHOW_HTML的HTML_STRING参数,发现可以在SAPGUI环境下完美工作:
因此,“使用ABAP绘制可伸缩矢量图”这个命题,就划归为“使用ABAP拼接可伸缩矢量图对应的HTML源代码”,一下子就把复杂的图形操作需求,降维成相对简单的字符串拼接操作了。
Jerry小学的时候,上的编程启蒙课,在386上学习过一门名叫Logo的编程语言。LOGO一词源于希腊文,原意为“文字”或“思考”、“想法”,是一种过程性语言,1976年由美国麻省理工学院佩帕特(Seymour Papert)教授指导下的一个研究小组, 在LISP语言基础上,专门为儿童研制开发的编程语言。当时教这门课的老师,一位老大爷,直接把语言里画图的cursor说成是“海龟”,可谓简单形象。
下图是用Logo语言画出来的图案。
有趣的是,30年之后,SAP捷克研究院一位开发人员,在Github上创建了一个ABAP代码仓库,将SVG常用的绘图操作用类LOGO语言的语法封装成库,库的名称就叫ABAP Turtle,仿佛是在向传统的LOGO语言致敬。
这位ABAP开发人员的联系方式维护在Github上,大家感兴趣的可以自行去交友。
基于这位SAP开发人员创建的ABAP Turtle库的SVG矩形绘制代码如下:
下面这个图形又是如何画出来的呢?首先选屏幕某个点作为图形的中心点,从中心点出发画一个正十边形,回到原点,然后重复绘制19次正十边形。每次绘制从中心点出发时,顺时针偏移360 / 20 = 18度角。
最后我们看到的图形,是由20个正十边形施加了18度角的偏移量后叠加而成。
对应的实现代码:
我们还可以自己编辑一些指令序列,比如用符号F代表前进,加号代表右转,减号代表左转。用这三个符号就可以组装一些自定义指令,然后通过参数num_iterations指定,按照我们期望的迭代次数执行图像绘制。
你能想象下面这个图形,是由"|—|"这个基础图形按照F+F-F-F+F迭代四次构成的么?
考一考大家,下面这棵树如何通过构造自定义的SVG指令画出来?
答案在FreHu的github里:https://github.com/FreHu/abap-turtle-graphics
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
使用ABAP绘制可伸缩矢量图的更多相关文章
- D3.js (v3)+react框架 基础部分之认识选择集和如何绘制一个矢量图
首先需要下载安装d3.js : yarn add d3 然后在组建中引入 : import * as d3 from 'd3' 然后定义一个方法,在componentDidMount()这个钩子 ...
- 【译】在Asp.Net中操作PDF - iTextSharp - 绘制矢量图
原文 [译]在Asp.Net中操作PDF - iTextSharp - 绘制矢量图 在上一篇iTextSharp文章中讲述了如何将现有的图片插入PDF中并对其进行操作.但有时,你需要在PDF中绘制不依 ...
- MeteoInfoLab脚本示例:风场矢量图
读取风场U/V变量数据,可以从U/V计算出风速:speed = sqrt(u*u+v*v).quiverm函数用来绘制风场矢量图,参数中包括U/V变量,如果要绘制彩色风场还需要第三个变量,这里是风速s ...
- 矢量图绘制工具Svg-edit调整画布的大小
矢量图绘制工具Svg-edit调整画布的大小 ------------------------------ ------------------------
- svg矢量图绘制以及转换为Android可用的VectorDrawable资源
项目需要 要在快速设置面板里显示一个VoWiFi图标(为了能够区分出来图形,我把透明的背景填充为黑色了) 由于普通图片放大后容易失真,这里我们最好用矢量图(SVG(Scalable Vector Gr ...
- Python游戏引擎开发(七):绘制矢量图
今天来完毕绘制矢量图形. 没有读过前几章的同学,请先阅读前几章: Python游戏引擎开发(一):序 Python游戏引擎开发(二):创建窗体以及重绘界面 Python游戏引擎开发(三):显示图片 P ...
- Qt使用QPainter绘制矢量图并保存为svg文件
位图和矢量图: Bitmap: Usually a larger file size Cannot be enlarged into a higher resolution as the image ...
- Android中使用SVG矢量图(一)
SVG矢量图介绍 首先要解释下什么是矢量图像,什么是位图图像? 1.矢量图像:SVG (Scalable Vector Graphics, 可伸缩矢量图形) 是W3C 推出的一种开放标准的文本式矢量图 ...
- ps中的位图,矢量图,颜色模式
什么是位图?什么是矢量图? 位图是由像素组成的图像,在缩放和旋转的时候容易失真,同时文件容量较大 矢量图是根据几何特性来绘制的图形,通过数学公式计算获得的,不易制作色彩变化太多的图象 颜色模式 RGB ...
随机推荐
- 【Python】解析Python模块与包
模块 模块是非常简单的Python文件,单个Python文件就是一个模块,两个文件就是两个模块. import语句是用来导入模块或者从模块里导入特定的类或者函数.如前面我们用过的math模块,从而可以 ...
- 字典的key都可以是什么
一个对象能不能作为字典的key,就取决于其有没有__hash__方法.所以所有python自带类型中,除了list.dict.set和内部至少带有上述三种类型之一的tuple之外,其余的对象都能当ke ...
- UPDATE REPLACE 替换"\\"
UPDATE Working_InterfaceToManager SET StudyPhotoInfoList = REPLACE(StudyPhotoInfoList,"\\\\&quo ...
- 将旧版本jQuery升级到新版本的jQuery
需要将项目中的旧版本jQuery升级到新版本的jQuery,为解决兼容性问题得下载一个js兼容包.例子:升级的项目中jQuery1.x到jquery3.x,需要一个jquery-migrate-3.1 ...
- HTML+CSS编写五环居中案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- BIO,NIO,AIO到NETTY
NIO 近期接触了几个产品都触及NIO,要么应用,要么改造项目,听多了也有些了解,但仍然不能真正理解,工期比较赶,还是要潜心下来看看. NIO是什么呢,应该是NOT-BLOCKING IO的意思,不阻 ...
- mac node配置path
一.查看node安装路径 whitch node 二.打开配置文件 vi ./.bash_profile 三.添加一行PATH(按i进入insert才能编辑) export NODE_HOME=&qu ...
- numtodsinterval 函数用法
numtodsinterval(<x>,<c>) ,x是一个数字,c是一个字符串,表明x的单位,这个函数把x转为interval day to second数据类型 常用的单位 ...
- jquery checkbox全选和取消
$("#allcheck").click(function(){ var allcheck=$('#allcheck').is(':checked'); $.each($(&quo ...
- centos7 中查看log_bin是否开启以及开启log_bin
1.查看是否开启的命名: 在mysql客户端执行:show variables like 'log_bin'; ON:代表开启 OFF:代表未开启 2. 开启log_bin 在配置文件vi ...