UGTK / Toolkit / Ui Module / Drawing System Completed

Drawing System

Summary

The Drawing System is a 2D paint surface built on a RawImage + Texture2D. Users can draw with mouse/touch, and other UI objects can paint onto the surface by their screen position. The surface can be cleared, saved to PNG, and exposes its content as a Sprite through events.

Modules Dependencies

This module has no hard UGTK dependencies. It uses Unity UI (RawImage) and the EventSystem.

Setup

Put the DrawSurface prefab on your Canvas. Mn_DrawingSurface2D is the surface: it takes the pointer events and writes into a texture.
Set the texture size, the brush and the colour on it. The size is the resolution of the drawing, and it cannot be changed later without discarding what is on it - a surface sized for a thumbnail cannot be exported as a poster afterwards.
Use PenDrawing if you want a visible pen following the finger; Mn_UiPenSelfDrawer is what makes it track the pointer.
Take the result from the DrawingSurfaceSpriteEvent, which hands you a Sprite you can save, upload or display.

The surface implements Unity's own pointer interfaces, so it obeys the normal UI raycast rules: anything drawn on top of it with a raycast target will take the strokes instead, and that is the usual reason a surface appears not to respond.

How To Use

Add Mn_DrawingSurface2D to a GameObject with a RawImage (assign targetImage or leave empty to auto-grab it). Configure texture size, background color, pen color and penRadius.
With enablePointerDrawing on, the user draws directly with mouse/touch (multi-touch aware, with line smoothing between drag points).
Paint from other scripts via DrawAtScreenPosition, DrawAtWorldPosition or DrawAtLocalPoint.
Use Clear(), SaveToPng(fileName), SetPenColor() and SetPenRadius(). Hook the Sprite-only events OnDrawBegin, OnDrawEnd, OnSurfaceCleared and OnSavedToPng.
To make a moving UI object paint by itself, add Mn_UiPenSelfDrawer, assign the target surface, and choose point-brush or full-rect-area brush mode.

Testing Scene

Open DrawingScene in the module's Debug/ folder.

What to do, in order:

Draw a stroke with the mouse, then clear.
Draw very fast, in a wide sweep.
Draw off the edge of the surface and back on.
Fill the surface with many strokes.

Step 2 is the honest test of any drawing tool: a fast stroke arrives as widely spaced points, and whether the line stays smooth or turns into a dotted trail depends entirely on the interpolation between them.

Two strokes drawn on the surface in DrawingScene. The pink square is the pen following the pointer; the line appears as the stroke is made, not when it is released.

Technical Info

Mn_DrawingSurface2D: owns the drawing texture/sprite, handles pointer input (IPointerDown/Up, IDrag), draws circles and connecting lines into the texture, and exposes clear/save plus Sprite events.
Mn_UiPenSelfDrawer: attached to a UI RectTransform, it paints onto a referenced Mn_DrawingSurface2D at its own screen position, either as a single point brush or by sampling its whole rect area.