user-interface - 在 MS Paint 中编写绘图程序 - 如何在鼠标移动事件之间进行插值？

Question

我想以MS Paint的风格编写一个绘画程序。

为了在用户移动鼠标时在屏幕上绘制东西，我必须等待鼠标移动事件并在收到鼠标移动事件时在屏幕上绘制。显然，mose 移动事件并不经常发送，所以我必须通过在当前鼠标位置和前一个鼠标位置之间画一条线来插入鼠标移动。在伪代码中，这看起来像这样:

var positionOld = null

def handleMouseMove(positionNew):
    if mouse.button.down:
        if positionOld == null:
            positionOld = positionNew
        screen.draw.line(positionOld,positionNew)
        positionOld = positionNew

现在我的 问题 : 用直线段插值对我来说看起来太锯齿了，你能推荐一个更好的插值方法吗？ GIMP 或 Adob​​e Photoshop 是用什么方法实现的？

或者，有没有办法增加我收到的鼠标移动事件的频率？我使用的 GUI 框架是 wxWidgets .

GUI 框架:wxWidgets。
(编程语言:Haskell，但这在这里无关紧要)

编辑:澄清:我想要看起来比直线段更平滑的东西，请看图片(原始尺寸):



编辑2:我正在使用的代码如下所示:

-- create bitmap and derive drawing context
im      <- imageCreateSized (sy 800 600)
bitmap  <- bitmapCreateFromImage im (-1)    -- wxBitmap
dc      <- memoryDCCreate                   -- wxMemoryDC
memoryDCSelectObject dc bitmap

...
-- handle mouse move
onMouse ... sw (MouseLeftDrag posNew _) = do
    ...
    line dc posOld posNew [color     := white
                          , penJoin  := JoinRound
                          , penWidth := 2]
    repaint sw                              -- a wxScrolledWindow

-- handle paint event
onPaint ... = do
    ...
    -- draw bitmap on the wxScrolledWindow
    drawBitmap dc_sw bitmap pointZero False []

这可能会有所作为。也许我对 wx-classes 的选择是为什么我得到的鼠标移动事件的频率相当低。

Answer 1

现场演示

版本 1 - 更流畅，但在绘制时会发生更多变化: http://jsfiddle.net/Ub7RV/1/

版本 2 - 不太流畅但更稳定: http://jsfiddle.net/Ub7RV/2/

The way to go is 

点的样条插值

解决方案是存储点的坐标，然后执行样条插值。

我把解决方案演示了 here并修改了它。在您停止绘图后，他们计算了样条曲线。我修改了代码，使其立即绘制。您可能会看到样条在绘图过程中发生了变化。对于实际应用程序，您可能需要两幅 Canvas - 一幅带有旧绘图，另一幅带有当前绘图，它们会不断变化，直到您的鼠标停止为止。

版本 1 使用样条简化 - 删除靠近线的点 - 这会导致更平滑的样条，但产生不太“稳定”的结果。版本 2 使用线上的所有点并产生更稳定的解决方案(并且计算成本更低)。