Overview:

Sprite Editor is a computer pixel drawing program created in C++ using QT for UI. It was designed to include many features that would make an easy drawing experience. Features such as Canvas Size starting from 10x10 all the way to 500x500, shape creators,, undo/redo, frame creator, and save/load drawings. This application was done using an MVC architecture

How It Works

[Drawing Control]

• Canvas Size: Ranges from 2x2 to 400x400
• Pen: Draw anywhere inside the drawing panel
• Eraser: Deletes and errors made
• Bucket: Fills similar colors around the same
• Shape: Three shapes to choose; Line, Rectangle, and Ellipse
• Market Size: Set mouse pixel size from 1 to 10

[Viewing Controls]

• Zoom In/Out: Can zoom in to 1x1 and zooms out to the chosen canvas size
• Undo/Redo: Allows you to go back if any mistakes are made, while also redoing if you change your mind
• Control Tool: Display current tool chosen

[Display/Cololr Controls]

• Preview Panel: Displays your current drawing and animations
• Animation slider: Changers the FPS to control the speed of your animations
• Choose Color: Color Control with any color to choose from
• Coordinates: Gives you exact coordinate of your mouse coordinates from the drawing panel

[Frame Control]

Choose between which frame to select and freely move its location. Add above and below to add drawings to the end of beginning of the animation. Swap up and down from each frame. Lastly, copy clear or delete the current canvas drawing.

Diagram

classDiagram

class Main{
model: Model
view: View(model)
}

class View{
-UpdateCanvas(): test
-UpdateFramesBox(int): void
-UpdateFramesPreview(): void
-UpdateSelectionTool(): void
-updateColorWheel(QColor) : void
-updateToolSize(int) : void 
}

class QMouseEvent{
+mousePressEvent(QMouseEvent) : void
+ mouseMoveEvent(QMouseEvent) : void
+ mouseReleaseEvent(QMouseEvent) : void
}

class QLabel{
+setPixmap(): void
}

class QPixmap{
+convertFromImage(): bool
+toImage: QImage
}

class QColorDialog{
+setCurrentColor(const QColor): void
+currentColor(): QColor
+selectedColor(): QColor
}

class Model{
QStack<QList<QImage>> undoStack;
    QStack<QList<QImage>> redoStack;
    SelectedTool currentTool;
    ShapeCreator currentShape;
    QList<QImage> frames;
    QList<QPoint> startEndLoc;
    QColor penColor;
    canvasSize: int 
    zoomSize: int 
    zoomIndex : int 
    framesPerSec : int 
    currentFrame : int 
    penSize : int 
    eraserSize : int 
    shapeSize : int 
    ratio : double 
    numOfPixels : int 
    pixelLength : int 
    currentIndex : int 
    isChanged : bool 
		initializeFrame : void 
    updatePixelsByPen(int, int) void 
    void updatePixelsByEraser(int, int) void 
    void updatePixelsByBucketFiller(int, int) void
    void updatePixelsByShapeCreator(int, int, int, int) void
    saveFramesInfoToJson(QJsonObject& jsonObj) const void;
    read(QString) void
    loadInfoFromJson(fix) const bool
    +addPixelColorToFrames(int, QList<QColor> ) void
}

class QImage{
+ setPixelColor(int, int, QColor) : void
+ load(const QString, const char*) : bool
}

class QList{
+insert(int i, const T& value) : void
+clear() : void
+removeAt(int i) : void
+move(int, int) : void
+empty() : bool
+at(int) : const T
}

class SelectedTool{
Tool_Pen
Tool_Eraser
Tool_Bucket
Tool_Shape
}
Main--> View
View --> QLabel
View --> QPixmap
View --> QMouseEvent
View --> QColorDialog

Model --> View
QImage --> Model
QList --> Model
SelectedTool --> Model