Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use ABAP to draw scalable vector graphics, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Jerry's article last year started to use ABAP Channel to develop gadgets to improve daily productivity. It introduced some entertainment Mini Program implemented in ABAP, such as drawing in SAPGUI using the old HPGL interface:

For information on how to draw this Doraemon in SAPGUI in SAP + HPGL language, refer to Jerry's article:

Drawing with SAPGUI

This article is going to introduce another way to draw with ABAP in SAPGUI. Vector image (Scalable Vector Graphics) is also an image format, which has many advantages compared with the traditional image format, so it has been used more and more widely in recent years.

SVG is an open standard based on XML and can be edited directly with plain text tools.

SVG is smaller and more compressible than image formats such as JPEG and GIF.

As the name implies, SVG is a Scalable image format, and the quality of the graphics will not be affected when the size of the graphics changes.

The text in SVG drawings is optional and searchable and is most suitable for mapping.

Look at a specific example. A rectangle consists of four sides, so the SVG implementation of a rectangle consists of four corresponding segments represented by the line tag.

From this example, we can also find that SVG tags can be embedded directly into HTML pages.

ABAP has a utility class, and CL_ABAP_BROWSER provides the SHOW_HTML method to open an embedded browser window in SAPGUI.

In this way, we pass the previously described HTML code with rectangular SVG format into the HTML_STRING parameter of SHOW_HTML, and find that it works perfectly in the SAPGUI environment:

Therefore, the proposition of "using ABAP to draw scalable vector graphics" is classified as "using ABAP to stitch the HTML source code corresponding to scalable vector graphics", reducing the complex graphic operation requirements to a relatively simple string splicing operation.

When Jerry was in elementary school, he took an enlightening course in programming and learned a programming language called Logo on 386. The word LOGO comes from Greek and originally means "text" or "thinking" or "thinking". It is a procedural language. In 1976, a research group under the guidance of Professor Seymour Papert of the Massachusetts Institute of Technology developed a programming language for children on the basis of lisp language. The teacher who taught the course at that time, an old man, directly described the cursor drawing in the language as "sea turtles", which can be described as a simple image.

The following picture is a pattern drawn in Logo language.

Interestingly, 30 years later, a developer of the SAP Czech Research Institute created an ABAP code repository on Github, encapsulating the common drawing operations of SVG into a library with the syntax of the LOGO-like language. the name of the library is ABAP Turtle, as if to pay homage to the traditional LOGO language.

The contact information of the ABAP developer is maintained on Github, and people who are interested can make friends on their own.

The SVG rectangle drawing code based on the ABAP Turtle library created by the SAP developer is as follows:

How is the following figure drawn? First of all, select a point on the screen as the center point of the graph, draw a regular decagonal from the central point, return to the origin, and then repeat the regular decagon 19 times. Each time you draw from the center point, offset 360 / 20 clockwise = 18 degrees.

The last figure we see is a superposition of 20 decimal polygons with an offset of 18 degrees.

Corresponding implementation code:

We can also edit some instruction sequences ourselves, such as using the symbol F to represent forward, the plus sign for turning right, and the minus sign for turning left. Some custom instructions can be assembled with these three symbols, and then the image drawing is performed according to the desired number of iterations specified by the parameter num_iterations.

Can you imagine that the following figure is made up of "|-|", the basic figure, which is iterated four times according to F+F-F-F+F?

Take a test, how to draw the following tree by constructing a custom SVG instruction?

Thank you for reading this article carefully. I hope the article "how to draw a scalable vector graph using ABAP" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.