Xembly学习（二）：Xembly脚本基本语法与几个XML生成实例

Xembly是一个类似汇编语言的命令式语言，可以用来操作XML文档。本文给出了Xembly从下载、编译、运行示例的详细方法。我电脑中的操作系统为 Windows7家庭普通版（Service Pack 1），JDK版本为jdk1.8，Eclipse版本为Luna Service Release 1 (4.4.1)。

Xembly的下载、编译步骤，可以参考我的上一篇Blog：

http://my.oschina.net/Tsybius2014/blog/614784

一、Xembly的语法

Xembly是一种命令式语言，它的语法类似于汇编语法，下面列出了Xembly的命令

1、ADD：在当前节点下新增一个新节点，游标（cursor）同时跟进到该节点

2、ADDIF：在当前节点下如果不存在指定名称的节点则新增一个新节点，游标同时跟进到该节点，本语句对大小写敏感

3、SET：使用指定文本修改节点值，不改变游标位置

4、XSET：使用指定XPath表达式修改节点值，不改变游标位置

5、ATTR：设置属性

6、UP：将游标移动到上级节点

7、XPATH：移动游标到指定XPath表达式位置

8、REMOVE：移除当前节点，并将游标重新指向父节点

9、STRICT：检查当前节点下的节点数是否与指定数字相符，不相符则提示异常，本语句不改变指针位置

10、PI：添加XML首部处理指令（processing instruction）

11、PUSH：将当前位置压入栈中

12、POP：从堆栈中取出第一个位置并跳转到该位置

13、NS：为指定节点添加命名空间

详情可见页面 https://github.com/yegor256/xembly 下Readme.MD文件的描述

二、执行Xembly脚本

为了执行Xembly脚本，我写了一个Java程序，代码如下：

import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;

import org.xembly.Directives;
import org.xembly.Xembler;

public class XemblyTester {
    public static void main(String[] args) {

        String scriptPath = "C:\\Users\\Tsybius\\Desktop\\XemblyScript\\America.xembly";
        String outputPath = "C:\\Users\\Tsybius\\Desktop\\XemblyScript\\America.xml";

        GenXmlByXembly(scriptPath,outputPath);
    }

    public static void GenXmlByXembly(String scriptPath,String outputPath) {
        try {
            String script = ""; // 用来保存每行读取的内容
            StringBuilder buffer = new StringBuilder();
            InputStream is = new FileInputStream(scriptPath);
            String line;
            BufferedReader reader = new BufferedReader(
                new InputStreamReader(is));
            line = reader.readLine();
            while (line != null) {
                buffer.append(line);
                buffer.append("\n");
                line = reader.readLine();
            }
            script = buffer.toString();
            reader.close();
            is.close();

            System.out.println("读取到Xembly代码");
            System.out.println(script);

            String xml = new Xembler(new Directives(script)).xml();

            System.out.println("生成的XML文件");
            System.out.println(xml);
            
            BufferedWriter bufferedWriter  = null;
            File file = new File(outputPath);
            bufferedWriter = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(file),"UTF-8"));
            bufferedWriter.append(xml);
            bufferedWriter.flush();
            bufferedWriter.close();
            
        } catch (FileNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

其中scriptPath变量用于指定Xembly脚本的路径，outputPath变量用于指定生成后的XML保存到的路径

三、示例1：生成法国国旗的SVG图像

法国国旗是三色旗，它的SVG图像比较容易绘制，它的绘制脚本France.xembly如下：

ADD "svg";
ATTR "xmlns","http://www.w3.org/2000/svg";
ATTR "width","900";
ATTR "height","600";
ADD "rect";
ATTR "width","600";
ATTR "fill","#ED2939";
UP;
ADD "rect";
ATTR "width","600";
ATTR "height","#fff";
UP;
ADD "rect";
ATTR "width","300";
ATTR "height","#002395";

生成的SVG文件France.svg如下：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="600" width="900">
<rect fill="#ED2939" height="600" width="900"/>
<rect fill="#fff" height="600" width="600"/>
<rect fill="#002395" height="600" width="300"/>
</svg>

将生成的SVG文件用浏览器打开，就可以看到效果了。本文中的列举的5个国旗的SVG文件，都参考了Wikipedia上各国国旗的SVG文件。

四、示例2：生成俄罗斯国旗的SVG图像

俄罗斯国旗也是三色旗，它的SVG图像绘制方法与法国国旗类似，脚本Russia.xembly如下：

ADD "svg";
ATTR "xmlns","http://www.w3.org/2000/svg";
ATTR "viewBox","0 0 9 6";
ATTR "width","600";
ADD "rect";
ATTR "fill","#fff";
ATTR "width","9";
ATTR "height","3";
UP;
ADD "rect";
ATTR "fill","#d52b1e";
ATTR "y","3";
ATTR "width","#0039a6";
ATTR "y","2";
ATTR "width","2";

生成的SVG文件Russia.svg如下：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="600" viewBox="0 0 9 6" width="900">
<rect fill="#fff" height="3" width="9"/>
<rect fill="#d52b1e" height="3" width="9" y="3"/>
<rect fill="#0039a6" height="2" width="9" y="2"/>
</svg>

五、示例3：生成中国国旗的SVG图像

中国国旗是五星红旗，需要绘制五颗不同角度的星星，脚本China.xembly如下：

ADD "svg";
ATTR "xmlns","http://www.w3.org/2000/svg";
ATTR "xmlns:xlink","http://www.w3.org/1999/xlink";
ATTR "width","600";
ATTR "viewBox","0 0 30 20";
PUSH;
ADD "defs";
ADD "path";
ATTR "id","s";
ATTR "d","M0,-1 0.587785,0.809017 -0.951057,-0.309017H0.951057L-0.587785,0.809017z";
ATTR "fill","#ffde00";
POP;
ADD "rect";
ATTR "width","30";
ATTR "height","20";
ATTR "fill","#de2910";
UP;
ADD "use";
ATTR "xlink:href","#s";
ATTR "transform","translate(5,5) scale(3)";
UP;
ADD "use";
ATTR "xlink:href","translate(10,2) rotate(23.036243)";
UP;
ADD "use";
ATTR "xlink:href","translate(12,4) rotate(45.869898)";
UP;
ADD "use";
ATTR "xlink:href",7) rotate(69.945396)";
UP;
ADD "use";
ATTR "xlink:href",9) rotate(20.659808)";

生成的SVG文件China.svg如下：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="600" viewBox="0 0 30 20" width="900">
<defs>
<path d="M0,0.809017z" fill="#ffde00" id="s"/>
</defs>
<rect fill="#de2910" height="20" width="30"/>
<use transform="translate(5,5) scale(3)" xlink:href="#s"/>
<use transform="translate(10,2) rotate(23.036243)" xlink:href="#s"/>
<use transform="translate(12,4) rotate(45.869898)" xlink:href="#s"/>
<use transform="translate(12,7) rotate(69.945396)" xlink:href="#s"/>
<use transform="translate(10,9) rotate(20.659808)" xlink:href="#s"/>
</svg>

六、示例4：生成英国国旗的SVG图像

英国国旗是米字旗，需要建立一个clipPath，然后按照蓝底背景、白色斜十字、红色斜十字、白色十字、红色十字的顺序绘制，脚本Bratain.xembly如下：

ADD "svg";
ATTR "xmlns","0 0 60 30";
ATTR "width","1200";
ATTR "height","600";
PUSH;
ADD "clipPath";
ATTR "id","t";
ADD "path";
ATTR "d","M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z";
POP;
ADD "path";
ATTR "d",0 v30 h60 v-30 z";
ATTR "fill","#00247d";
UP;
ADD "path";
ATTR "d",0 L60,30 M60,0 L0,30";
ATTR "stroke","#fff";
ATTR "stroke-width","6";
UP;
ADD "path";
ATTR "d",30";
ATTR "clip-path","url(#t)";
ATTR "stroke","#cf142b";
ATTR "stroke-width","4";
UP;
ADD "path";
ATTR "d",0 v30 M0,15 h60";
ATTR "stroke","10";
UP;
ADD "path";
ATTR "d","6";

生成的SVG文件Britain.svg如下：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="600" viewBox="0 0 60 30" width="1200">
<clipPath id="t">
<path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/>
</clipPath>
<path d="M0,0 v30 h60 v-30 z" fill="#00247d"/>
<path d="M0,30" stroke="#fff" stroke-width="6"/>
<path clip-path="url(#t)" d="M0,30" stroke="#cf142b" stroke-width="4"/>
<path d="M30,15 h60" stroke="#fff" stroke-width="10"/>
<path d="M30,15 h60" stroke="#cf142b" stroke-width="6"/>
</svg>

七、示例5：生成美国国旗的SVG图像

美国的星条旗较难绘制，最难的部分在于左上角的51颗星星，脚本America.xembly如下：

ADD "svg";
ATTR "xmlns","1235";
ATTR "height","650";
ATTR "viewBox","0 0 7410 3900";
ADD "rect";
ATTR "width","7410";
ATTR "height","3900";
ATTR "fill","#b22234";
UP;
ADD "path";
ATTR "d",450H7410m0,600H0m0,600H7410m0,600H0";
ATTR "stroke","300";
UP;
ADD "rect";
ATTR "width","2964";
ATTR "height","2100";
ATTR "fill","#3c3b6e";
UP;
ADD "g";
ATTR "fill","#fff";
PUSH;
ADD "g";
ATTR "id","s18";
PUSH;
ADD "g";
ATTR "id","s9";
PUSH;
ADD "g";
ATTR "id","s5";
PUSH;
ADD "g";
ATTR "id","s4";
ADD "path";
ATTR "id","M247,90 317.534230,307.082039 132.873218,172.917961H361.126782L176.465770,307.082039z";
UP;
ADD "use";
ATTR "xlink:href","#s";
ATTR "y","420";
UP;
ADD "use";
ATTR "xlink:href","840";
UP;
ADD "use";
ATTR "xlink:href","1260";
POP;
ADD "use";
ATTR "xlink:href","1680";
POP;
ADD "use";
ATTR "xlink:href","#s4";
ATTR "x","247";
ATTR "y","210";
POP;
ADD "use";
ATTR "xlink:href","#s9";
ATTR "x","494";
POP;
ADD "use";
ATTR "xlink:href","#s18";
ATTR "x","988";
UP;
ADD "use";
ATTR "xlink:href","1976";
UP;
ADD "use";
ATTR "xlink:href","#s5";
ATTR "x","2470";

生成的SVG文件America.svg如下：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="650" viewBox="0 0 7410 3900" width="1235">
<rect fill="#b22234" height="3900" width="7410"/>
<path d="M0,600H0" stroke="#fff" stroke-width="300"/>
<rect fill="#3c3b6e" height="2100" width="2964"/>
<g fill="#fff">
<g id="s18">
<g id="s9">
<g id="s5">
<g id="s4">
<path d="M247,307.082039z" id="s"/>
<use xlink:href="#s" y="420"/>
<use xlink:href="#s" y="840"/>
<use xlink:href="#s" y="1260"/>
</g>
<use xlink:href="#s" y="1680"/>
</g>
<use x="247" xlink:href="#s4" y="210"/>
</g>
<use x="494" xlink:href="#s9"/>
</g>
<use x="988" xlink:href="#s18"/>
<use x="1976" xlink:href="#s9"/>
<use x="2470" xlink:href="#s5"/>
</g>
</svg>

END

原文链接：https://www.f2er.com/xml/295540.html