在Batik中使用DOM MutationEvent实现SVG绘图的Undo/Redo
2007-4-6
创建
2007-4-9 文字修改
基础
命令的撤消(Undo)和恢复(Redo)在绘图程序中十分必要,在Javax.swing.undo库中提供了撤消和恢复的基础类结构,简化了Java程序Undo/Redo功能的实现。这些类库不仅仅能够在Swing程序中使用,也可以在其它应用类型中使用。其基本使用方法包括:
1. 定义一个保存程序状态的可恢复编辑的类,一般为
AbstractUndoableEdit
的子类,并根据实际应用实现其中的Undo/Redo方法。
2. 创建恢复管理器,一般使用类库中的
UndoManager定义就可以满足要求,特殊情况下可以定制。该管理器提供了对用户Undo/Redo操作的接口。
3. 在状态改变时,创建可恢复编辑的类的实例,并保存到恢复管理器。
4. 在界面中实现对恢复管理器Undo/Redo的调用,一般通过用户界面上的按钮操作。
网上有很多对这些类库的详细描述,包括绘图的应用,文本编辑的应用以及命令模式结合的使用。其中比较有名的是一个实现Undo/Redo功能的简单的绘图示例程序,下载地址在 http://www.java2s.com/Code/Java/Swing-JFC/UndoDrawing.htm。本文不再详细描述这个方面的内容。
DOM MutationEvent
在基于状态模式的绘图程序中,为了实现Undo/Redo功能,需要每个状态子类记录其操作的内容。因为实际的绘图操作发生在具体的子类中,在上下文中只知道绘图应用现在所处的状态。如果要结合命令模式,也必然要将每个子类的动作重写为可保存的命令,这样才能保存操作状态。
如果是一般的绘图程序,似乎也没有别的选择,但是对基于XML的SVG应用,情况就不同了。因为所有的绘图操作最终是对DOM树的操作,只要能够记录DOM的变化,就可以得到任意时刻的绘图状态,而这个变化就是DOM MutationEvent。
DOM MutationEvent是DOM2.0中增加,记录了所有对DOM树操作的事件。其中包括:
l 类型(type),包括节点添加、删除,节点属性改变,文本改变等。
l 目标节点(target)
l 相关节点(relatedNode),例如在节点删除时,相关节点记录的是目标节点的父节点。
l 属性名称
l 旧属性值
l 新属性值
由此可以看出,只要保存了该事件,就可以记录图形的改变,并可以根据这些记录进行撤消和恢复。
实现
具体实现的步骤包括:
1.
定义可恢复编辑的类
,包含一个MutationEvent
事件。
public
class
CanvasUndoEdit
extends
AbstractUndoableEdit {
private
DOMMutationEvent
mevt
=
null
;
实现基于MutationEvent事件的Undo/Redo操作
private
void
updateUndoCanvas()
{
JSVGCanvas svgCanvas = Context.getInstance().getSvgCanvas();
svgCanvas.getUpdateManager().getUpdateRunnableQueue().invokeLater(
new
Runnable()
{
public
void
run(){
if
(
mevt
.getType().equals(Context.
DOM_NODE_INSERTED
))
{
mevt
.getRelatedNode().removeChild((Node)
mevt
.getTarget());
}
else
if
(
mevt
.getType().equals(Context.
DOM_NODE_REMOVED
))
{
mevt
.getRelatedNode().appendChild((Node)
mevt
.getTarget());
}
else
if
(
mevt
.getType().equals(Context.
DOM_ATTR_MODIFIED
))
{
((Element)
mevt
.getTarget()).setAttributeNS(
null
,
mevt
.getAttrName(),
mevt
.getPrevValue());
}
}
});
}
private
void
updateRedoCanvas()
{
JSVGCanvas svgCanvas = Context.getInstance().getSvgCanvas();
svgCanvas.getUpdateManager().getUpdateRunnableQueue().invokeLater(
new
Runnable(){
public
void
run()
{
if
(
mevt
.getType().equals(Context.
DOM_NODE_INSERTED
))
{
mevt
.getRelatedNode().appendChild((Node)
mevt
.getTarget());
}
else
if
(
mevt
.getType().equals(Context.
DOM_NODE_REMOVED
))
{
mevt
.getRelatedNode().removeChild((Node)
mevt
.getTarget());
}
else
if
(
mevt
.getType().equals(Context.
DOM_ATTR_MODIFIED
))
{
((Element)
mevt
.getTarget()).setAttributeNS(
null
,
mevt
.getAttrName(),
mevt
.getNewValue());
}
}
});
}
2.
侦听DOM MutationEvent
事件
EventTarget objects = (EventTarget)
svgCanvas
.getSVGDocument().getElementById(
"canvas"
);
objects.addEventListener(
"DOMNodeInserted"
,
context
,
true
);
objects.addEventListener(
"DOMNodeRemoved"
,
context
,
true
);
objects
.addEventListener(
"DOMAttrModified"
,
context
,
true
);
3.
在侦听器中创建恢复管理器UndoManager
,
UndoManager undoManager = new UndoManager();
在接收到事件时,根据DOM MutationEvent创建可以恢复的对象,并将对象记录到恢复管理器
undoManager.addEdit(new CanvasUndoEdit(mevt));
4.
最后,
在界面中添加按钮
,调用恢复管理器的Undo/Redo
操作
undoBtn
.addActionListener(
new
ActionListener() {
public
void
actionPerformed(ActionEvent ae) {
context
.getCue().undo();
}
});
redoBtn
.addActionListener(
new
ActionListener() {
public
void
actionPerformed(ActionEvent ae) {
context
.getCue().redo();
}
});
结论
使用
DOM Event
方式进行Undo/Redo也
存在一些问题,例如
1
,对使用鼠标,移动
/
拖动进行绘图时产生大量的DOM修改事件,以至于用户无法有效的使用
UNDO/REDO
。
2, 如何将
一次进行多个
DOM修改
操作作为一个事务进行撤消和恢复,以避免出现中间状态。
对这些问题,可以通过一些技巧性的方法加以解决,例如增加事务保存点事件等。
总之,基于
XML
的
SVG
绘图的特点,以及在
Java
强大的基础类库支持下,创建支持Undo/Redo功能的绘图程序变得十分简便。