使用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 ...
随机推荐
- Mysql 排序规则选择
排序规则:是指对指定字符集下不同字符的比较规则.其特征有以下几点: 1. 两个不同的字符集不能有相同的排序规则 2. 两个字符集有一个默认的排序规则 3. 有一些常用的命名规则.如_ci结尾表示大小写 ...
- Filebeat的使用
前言 logstash本身就可以具有文件数据采集的功能了,为什么还需要在前面加一层filebeat?理由如下:logstash是使用Java编写,插件是使用JRuby编写,对机器的资源要求会比较高,在 ...
- 【转载】 tf.ConfigProto和tf.GPUOptions用法总结
原文地址: https://blog.csdn.net/C_chuxin/article/details/84990176 -------------------------------------- ...
- squid4
主机上的squid一直是傻瓜型使用,yum安装.默认配置.千年不动.突然漏扫出来3.X版本不能用了,搜了下,得升4.神奇的发现centos7的源(阿里源)里面竟然最高只有3.网上搜使用yum装的也都是 ...
- js:如何在iframe重载前执行特定动作
问题说明: 点击左侧菜单时,右侧页面中的iframe加载菜单内容,在iframe加载的页面A中使用了websocket.点击其它菜单时,无法主动关闭websocket, 可能会造成websocket链 ...
- go 调度机制简介
goroutine是go中最重要的功能之一,正是因为有了goroutine这样强大的工具,go在并发方面表现的特别优秀. 那么goroutine和普通的线程和协程有什么区别呢?首先,我们需要明白线程和 ...
- 锈迹材质全流程实例:Blender-》SP-》UE4
转自:https://dawnarc.com/2018/03/next-gen%E9%94%88%E8%BF%B9%E6%9D%90%E8%B4%A8%E5%85%A8%E6%B5%81%E7%A8% ...
- 【转】解决深入学习PHP的瓶颈?
转自:https://www.cnblogs.com/aksir/p/6774115.html PHP给学习者的感觉是:初学的时候很容易,但是学了2-3年,就深刻感觉遇到了瓶颈,很难深入,放弃又可惜. ...
- ajax处理csrf的三种方式
方式一: $.post({ url: '/get_result/', data: { value0: $('#v1').val(), value1: $('#v2').val(), csrfmiddl ...
- SQL Server 参数嗅探问题
摘要 MSSQL Server参数嗅探既是一个涉及知识面非常广泛,又是一个比较难于解决的课题,即使对于数据库老手也是一个比较头痛的问题.这篇文章从参数嗅探是什么,如何产生,表象是什么,会带来哪些问题, ...