Example code for a minimal paint program (MS Paint style) - cocoa

Question

I want to write a paint program in the style of MS Paint.
On a most basic level, I have to draw a dot on the screen whenever the user drags the mouse.
def onMouseMove():
if mouse.button.down:
draw circle at (mouse.position.x, mouse.position.y)
Unfortunately, I'm having trouble with my GUI framework (see previous question), I'm not getting mouse move messages frequently enough. I'm using the GUI framework wxWidgets and the programming language Haskell.
Question: Could you give me some example code that implements such a minimal paint procedure? Preferably, your code should be use wxWidgets, but I also accept GTK+ or Cocoa. I don't mind any programming language, as long as I can install it easily on MacOS X. Please include the whole project, makefiles and all, since I probably don't have much experience with compiling your language.
Basically, I would like to have a small example that shows me how to do it right in wxWidgets or another GUI framework, so I can figure out why my combination of Haskell and wxWidgets doesn't give a decent frequency of mouse move events.

Answer 1

For Cocoa, Apple provides an example named CIMicroPaint, though it's a bit complicated in that it uses Core Image instead of Quartz 2D. Here a screenshot:

Answer 2

I know this is an old question but nevertheless - in order to get smooth drawing, it is not simply enough to put an instance of your brush at the location of the mouse, as input events are not polled nowhere nearly as fast as they need to for smooth drawing.
Drawing lines is a very limited solution as lines ... are lines, and for a drawing app you need to be able to use custom bitmap brushes.
The solution is simple, you have to interpolate between the previous and current position of the cursor, find the line between the two points and interpolate it by adding the brush for every pixel between the two points.
For my solution I used Qt, so here is the method that interpolates a line between the last and current position in order to fill it out smoothly. Basically it finds the distance between the two points, calculates the increment and interpolates using a regular for loop.
void Widget::drawLine()
{
QPointF point, drawPoint;
point = newPos - lastPos;
int length = point.manhattanLength();
double xInc, yInc;
xInc = point.x() / length;
yInc = point.y() / length;
drawPoint = lastPos;
for (int x=0; x < length; ++x) {
drawPoint.setX(drawPoint.x()+xInc);
drawPoint.setY(drawPoint.y()+yInc);
drawToCanvas(drawPoint);
}
}
This should give you smooth results, and performance is very good, I have even tested it on my Android tablet which is a pretty slow and laggy device and it works very well.

Answer 3

To answer my own question, here is a minimal paint example in C++ using wxWidgets. I have mainly assembled snippets from the book Cross-Platform GUI Programming with wxWidgets which is available online for free.
The drawing is as smooth as it can get, there are no problems with mouse event frequency, as can be seen from the screenshot. Note that the drawing will be lost when the window is resized, though.
Here is the C++ source code, assumed to be in a file minimal.cpp.
// Name: minimal.cpp
// Purpose: Minimal wxWidgets sample
// Author: Julian Smart, extended by Heinrich Apfelmus
#include <wx/wx.h>
// **************************** Class declarations ****************************
class MyApp : public wxApp {
virtual bool OnInit();
};
class MyFrame : public wxFrame {
public:
MyFrame(const wxString& title); // constructor
void OnQuit(wxCommandEvent& event);
void OnAbout(wxCommandEvent& event);
void OnMotion(wxMouseEvent& event);
private:
DECLARE_EVENT_TABLE() // this class handles events
};
// **************************** Implementation ****************************
// **************************** MyApp
DECLARE_APP(MyApp) // Implements MyApp& GetApp()
IMPLEMENT_APP(MyApp) // Give wxWidgets the means to create a MyApp object
// Initialize the application
bool MyApp::OnInit() {
// Create main application window
MyFrame *frame = new MyFrame(wxT("Minimal wxWidgets App"));
//Show it
frame->Show(true);
//Start event loop
return true;
}
// **************************** MyFrame
// Event table for MyFrame
BEGIN_EVENT_TABLE(MyFrame, wxFrame)
EVT_MENU(wxID_ABOUT, MyFrame::OnAbout)
EVT_MENU(wxID_EXIT , MyFrame::OnQuit)
END_EVENT_TABLE()
void MyFrame::OnAbout(wxCommandEvent& event) {
wxString msg;
msg.Printf(wxT("Hello and welcome to %s"), wxVERSION_STRING);
wxMessageBox(msg, wxT("About Minimal"), wxOK | wxICON_INFORMATION, this);
}
void MyFrame::OnQuit(wxCommandEvent& event) {
Close();
}
// Draw a dot on every mouse move event
void MyFrame::OnMotion(wxMouseEvent& event) {
if (event.Dragging())
{
wxClientDC dc(this);
wxPen pen(*wxBLACK, 3); // black pen of width 3
dc.SetPen(pen);
dc.DrawPoint(event.GetPosition());
dc.SetPen(wxNullPen);
}
}
// Create the main frame
MyFrame::MyFrame(const wxString& title)
: wxFrame(NULL, wxID_ANY, title)
{
// Create menu bar
wxMenu *fileMenu = new wxMenu;
wxMenu *helpMenu = new wxMenu;
helpMenu->Append(wxID_ABOUT, wxT("&About...\tF1"), wxT("Show about dialog"));
fileMenu->Append(wxID_EXIT, wxT("E&xit\tAlt-X"), wxT("Quit this program"));
// Now append the freshly created menu to the menu bar...
wxMenuBar *menuBar = new wxMenuBar();
menuBar->Append(fileMenu, wxT("&File"));
menuBar->Append(helpMenu, wxT("&Help"));
// ... and attach this menu bar to the frame
SetMenuBar(menuBar);
// Create a status bar just for fun
CreateStatusBar(2);
SetStatusText(wxT("Warning: Resize erases drawing."));
// Create a panel to draw on
// Note that the panel will be erased when the window is resized.
wxPanel* panel = new wxPanel(this, wxID_ANY);
// Listen to mouse move events on that panel
panel->Connect( wxID_ANY, wxEVT_MOTION, wxMouseEventHandler(MyFrame::OnMotion));
}
To build, I use the following Makefile, but this will not work for you, since you probably don't have the macosx-app utility. Please consult the wiki guide to Building a MacOSX application bundle.
CC = g++ -m32
minimal: minimal.o
$(CC) -o minimal minimal.o `wx-config --libs`
macosx-app $#
minimal.o: minimal.cpp
$(CC) `wx-config --cxxflags` -c minimal.cpp -o minimal.o
clean:
rm -f *.o minimal

Answer 4

like your eyes, a cursor moves in jumps, so you will want to draw lines between each point the cursor was recorded.