SVG在Java application上的应用

Written by (待查证)    
2006-Oct-10 
关键字 svg、Java application、JavaScript、batik、swing
概要：
　　SVG 作为一种开源的矢量绘图标准，应用越来越广泛。SVG与WEB应用程序的结合较为常见，开发也相当方便（IE + SVGView + Script）。那么SVG是否可以与Java Application程序结合呢？答案当然是肯定的。本文就是简要介绍SVG在Java Application上的应用方法。
应用技术SVG、JavaScript、swing


SVG的插件包（batik）

　　在浏览器上浏览SVG文件，需要安装SVG的插件，例如SVGView。在Java Application程序上也需要有SVG的插件包，如batik（http://xmlgraphics.apache.org/batik/）。该包是apache项目组的一个开源项目，该包解析了SVG中的大部分标签，可以为开发人员提供相当的空间，用来实现用户和SVG文件的交互。


Java Application画面技术的选择（SWING）

　　用Java来做Application大致可用的技术有AWT、SWING、SWT等。这些技术
如何选择可以参考其他更权威的材料，我的开发经验也不多，无权发表意见。但就本文来讲，采用的技术是SWING。原因有以下方面：1、batik包本身使用 SWING技术实现的。2、据说SWING可以相对方便的移植到UNIX上(因为我们的项目需要在windows和UNIX上运行)。


用JSVGCanvas装载并显示SVG文件

　　batik包中，主要用的一个类就是JSVGCanvas。该类相当于一个容器，用来装载并显示SVG文件。
如下代码来自于batik包的联机帮助。

import java.awt.*;
import java.awt.event.*;
import java.io.*;
import javax.swing.*;

import org.apache.batik.swing.JSVGCanvas;
import org.apache.batik.swing.gvt.GVTTreeRendererAdapter;
import org.apache.batik.swing.gvt.GVTTreeRendererEvent;
import org.apache.batik.swing.svg.SVGDocumentLoaderAdapter;
import org.apache.batik.swing.svg.SVGDocumentLoaderEvent;
import org.apache.batik.swing.svg.GVTTreeBuilderAdapter;
import org.apache.batik.swing.svg.GVTTreeBuilderEvent;

public class SVGApplication {

    public static void main(String[] args) {
        JFrame f = new JFrame("Batik");
        SVGApplication app = new SVGApplication(f);
        f.getContentPane().add(app.createComponents());

        f.addWindowListener(new WindowAdapter() {
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
        f.setSize(400, 400);
        f.setVisible(true);
    }

    JFrame frame;
    JButton button = new JButton("Load...");
    JLabel label = new JLabel();
    JSVGCanvas svgCanvas = new JSVGCanvas();

    public SVGApplication(JFrame f) {
        frame = f;
    }

    public JComponent createComponents() {
        final JPanel panel = new JPanel(new BorderLayout());

        JPanel p = new JPanel(new FlowLayout(FlowLayout.LEFT));
        p.add(button);
        p.add(label);

        panel.add("North", p);
        panel.add("Center", svgCanvas);

        // Set the button action.
        button.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent ae) {
                JFileChooser fc = new JFileChooser(".");
                int choice = fc.showOpenDialog(panel);
                if (choice == JFileChooser.APPROVE_OPTION) {
                    File f = fc.getSelectedFile();
                    try {
                        svgCanvas.setURI(f.toURL().toString());
                    } catch (IOException ex) {
                        ex.printStackTrace();
                    }
                }
            }
        });

        // Set the JSVGCanvas listeners.
        svgCanvas.addSVGDocumentLoaderListener(new SVGDocumentLoaderAdapter() {
            public void documentLoadingStarted(SVGDocumentLoaderEvent e) {
                label.setText("Document Loading...");
            }
            public void documentLoadingCompleted(SVGDocumentLoaderEvent e) {
                label.setText("Document Loaded.");
            }
        });

        svgCanvas.addGVTTreeBuilderListener(new GVTTreeBuilderAdapter() {
            public void gvtBuildStarted(GVTTreeBuilderEvent e) {
                label.setText("Build Started...");
            }
            public void gvtBuildCompleted(GVTTreeBuilderEvent e) {
                label.setText("Build Done.");
                frame.pack();
            }
        });

        svgCanvas.addGVTTreeRendererListener(new GVTTreeRendererAdapter() {
            public void gvtRenderingPrepare(GVTTreeRendererEvent e) {
                label.setText("Rendering Started...");
            }
            public void gvtRenderingCompleted(GVTTreeRendererEvent e) {
                label.setText("");
            }
        });

        return panel;
    }
}

　　上述代码中svgCanvas.setURI(f.toURL().toString());用来装载并显示一个SVG文件。


获得SVG中的某个element（getElementById(“”)）

　　经常要在程序中，对SVG中某个element的属性值进行改变，在改变之前当然要先获得这个element。SVGDocument提供了getElementByID()的方法。可以通过SVG中element的ID值获得该对象。
　　例如：

import org.w3c.dom.*;
Element eIcName = svgCanvas.getSVGDocument().getElementByID(“icname”);

　　接下来，获得的对象需要强制转换成SVG的元素。
假设上述代码获得的是ID=“icname”的一个Group元素。即

<g id=”icname” display = "inline" >
……
</g>

则转换代码：

import org.w3c.dom.svg.SVGGElement;
SVGGElement svggIcName = (SVGGElement)eIcName;

改变SVG中某个element的属性（setAttribute(“属性名称”,”属性值”)）

　　获得了某个元素后，就可用setAttribute方法修改某个属性的值。例如将上述元素的display值由“inline”修改成“none”。

代码：

svggIcName.setAttribute(“display”,”none”);

如果发现上述代码运行后，元素的属性变化并没有马上被表示。可以用下述代码试试。

import java.awt.geom.AffineTransform;
AffineTransform rat = svgCanvas.getRenderingTransform();
svggIcName.setAttribute(“display”,”none”);
svgCanvas.setRenderingTransform(rat);


监听SVG上某个element的鼠标事件

　　鼠标在某个element上的事件，可以在两个地方监听到。一个是用JavaScript直接写在SVG文件中。另一个是用Java代码在application中监听。前一种方式比较简单，这里就不再描述，下面举例说明如何在application中监听鼠标事件。

import org.w3c.dom.Element;
import org.w3c.dom.events.Event;
import org.w3c.dom.events.EventListener;
import org.w3c.dom.events.EventTarget;
import org.w3c.dom.svg.EventListenerInitializer;
import org.w3c.dom.svg.SVGDocument;

public class EventListenerInit implements EventListenerInitializer{
    public void initializeEventListeners(SVGDocument doc) {

            //JCT Windows SHOW
        ((EventTarget)doc.getElementById("testJCT")).
            addEventListener("click", new EventListener() {
                public void handleEvent(Event evt) {
              
                    ((Element)evt.getTarget()).setAttributeNS(null, "fill", "orange");
                    subwindws sw = new subwindws(evt);
                    sw.show();
                }
            }, false);
}
}

在JavaApplication中需要定义一个类实现EventListenerInitializer接口，重写handleEvent方法。
上述代码就是监听“testJCT”这个element的鼠标单击事件，当事件被触发后弹出一个窗口（subwindws）。



在JavaScript中调用Application的方法

　　SVG和JavaApplication的交互方式除了上述的以外，还可在SVG的脚本中调用JavaApplication的方法。


　　例如在SVG的JavaScript脚本中添加如下代码：

importPackage(Packages.包名);

function fortest(){
         SVGApplication.svggeIcName.setAttribute("display","inline");
                       SVGApplication.svggeAll.setAttribute("transform","translate(0,0)"); 
}

(全文结束)