图像编辑工具的高级设计模式

Question

我最近开始创建一个图像编辑工具，它将满足非常具体的需求。 这既是为了我自己的娱乐，也是为了将要使用它的人。 然而，我很早就遇到了一些架构上的障碍。

与任何图像编辑器一样，用户将使用“工具”来绘制和操作图像。 我的第一次尝试包括一个简单的界面：（

public interface IDrawingTool
{
    void DrawEffect( Graphics g );
    // other stuff
}

我认为）这将是漂亮和干净的，并且可以轻松维护和扩展。 只需添加界面对象并在运行时调用所选界面对象的 DrawEffect 方法即可。

这种方法的问题在于不同的绘图工具不能完全遵守单一界面。 例如，钢笔工具只需知道要绘制的点即可工作。 然而，矩形需要单击的第一个点以及当前位置。 多边形工具需要跟踪多次鼠标单击。

我很难想出一个好的方法来实现这个。 我现在能想到的最好的方法是涉及一个 switch 语句和每个工具的 case，这意味着绘图逻辑将位于 Canvas 类中，而不是由 Tool 类型对象封装。 因为这是练习，我想以正确的方式做到这一点。 感谢您提前提供的任何帮助。

Answer 1

好的，经验法则：如果您在代码草图中看到 switch 语句，则表明您需要使用多态性。 因此，在这种情况下，您希望能够进行各种操作，并且您发现自己需要一个 switch，因此您应该思考“如何使用多态性来实现这一点？”

现在，看一下命令模式，其中您的对象是动词而不是名词。 每个命令都实现一个doThis()方法； 当您构造对象时，您就确定了命令将执行的操作。

public interface Command {
   public void doThis(Graphics g);  // I don't promise returning 
                                    // void is the best choice
   // Would it be better to return a Graphics object?
}

public class DrawRectangle implements Command {
   public DrawRectagle( Point topLeft, Point btmRight) { // ...
   }
   public void doThis(Graphics g){ // ...
   }
}

现在，考虑一下如果您想实现撤消，您会做什么？

更新

好吧，让我们再扩展一下。 使用此模式的目的是确保客户端不需要了解那么多，除非您正在进行原始构造。 因此，对于这个例子，让我们考虑绘制一个矩形。 当您选择“矩形”工具时，您将在按钮单击事件处理程序上有一些代码（顺便说一句，这都是伪代码）

 cmdlist = [] // empty list
 bool firstClick = true
 Point tl = br = new Point(0,0)
 onClick:
   if firstClick:
     get mouse position into tl
     firstClick = false
   else:
     get mouse position into br
     cmdlist.append(new DrawRectangle(tl, br))
     firstClick = true

因此，现在当您选择了矩形时，您将一个 DrawRectangle 对象添加到命令列表结构中。 一段时间后，你浏览一下清单

for cmd in cmdlist:
   cmd.doThis(Graphics g)

，这些事情就完成了。 现在很明显，您可以通过向 Command 添加“undoThis”方法来实现撤消。 当您创建命令时，您必须构建代码，以便对象知道如何撤消自身。 那么撤消意味着只是将最后一个 Command 对象从列表中取出并执行其 undoThis 方法。

Answer 2

您将界面设计得复杂一点怎么样？ 让我们从一些代码开始，然后我将解释它应该如何工作。

public class AbstractDrawingTool {

    private Graphics g;

    void AbstractDrawingTool( Graphics g ) {
        this.g = g;
    }

    void keyDown(KeyEvent e);
    void keyUp(KeyEvent e);
    void mouseMove(MouseEvent e);
    void mouseClick(MouseEvent e);
    void drop();
    // other stuff
}

这个想法是，一旦用户开始使用特定的实现，就将用户输入传递给工具。 这样，您可以使用相同的界面创建许多不同的绘图工具。 例如，一个简单的 PointDrawingTool 将仅实现 mouseClick 事件以在画布上放置一个点。 PolygonDrawingTool 还将实现 keyUp 事件，以便在按下特定键（即退出键）时可以停止绘制线条。

一个特殊情况是 drop 方法。 它将被称为“删除”当前选定的工具。 如果从工具栏或类似工具中选择另一个实现，就会发生这种情况。

您还可以将此定义与命令模式结合起来。 在这种情况下，AbstractDrawingTool 的实现将负责创建 Command 接口的实例，并且可能在操作完成后将它们放置在堆栈上（即在画布上放置一个点）。

Answer 3

在尝试重新设计映射软件以支持 GDI+ 和 Cairo 图形库时，我遇到了类似的问题。 我通过将绘图界面减少为一些常见操作/基元来解决这个问题，请参阅下面的代码。

之后，您想要绘制的“效果”就是命令（就像查理所说的那样）。 他们使用IPainter接口来绘图。 这种方法的好处是效果与 GDI+ 等具体绘图引擎完全解耦。 这对我来说很方便，因为我可以通过切换到 Cairo 引擎将我的绘图导出到 SVG。

当然，如果您需要一些额外的图形操作，则必须使用它扩展IPainter接口，但基本原理保持不变。 在这里查看更多相关信息：http://igorbrejc.net/development/c/welcome-飞往开罗

public interface IPainter : IDisposable
{
    void BeginPainting ();
    void Clear ();
    void DrawLines (int[] coords);
    void DrawPoint (int x, int y);
    void EndPainting ();
    void PaintCurve (PaintOperation operation, int[] coords);
    void PaintPolygon (PaintOperation operation, int[] coords);
    void PaintRectangle (PaintOperation operation, int x, int y, int width, int height);
    void SetHighQualityLevel (bool highQuality);
    void SetStyle (PaintingStyle style);
}

public class PaintingStyle
{
    public PaintingStyle()
    {
    }

    public PaintingStyle(int penColor)
    {
        this.penColor = penColor;
    }

    public int PenColor
    {
        get { return penColor; }
        set { penColor = value; }
    }

    public float PenWidth
    {
        get { return penWidth; }
        set { penWidth = value; }
    }

    private int penColor;
    private float penWidth;
}

public enum PaintOperation
{
    Outline,
    Fill,
    FillAndOutline,
}

Answer 4

您的具体问题已通过 Smalltalk-80 HotDraw 应用程序中引入的 editor 模式进行了描述和解决，该模式在 Kent Beck 和 Ralph Johnson 的论文中进行了描述“模式生成架构”。 原始源代码可在此处获取，进一步的改进是这里。

该应用程序后来被移植到 Java，名为 JHotDraw，并由 Dirk Riehle 在章节中进行了描述他的论文“框架设计一种角色建模方法”的第 8 部分。

Objective-J 中还有一个名为 cupDraw 的实现此处。