Paint - Convert an Arrangement into a paintable canvas. Undo, Redo, Stroke, Color, Eraser...

Extensions
, , ,
1
Paint
Convert an Arrangement into a paintable canvas.

The stroke looks good without noise or unwanted lines, here the use of undo and redo is shown.

GIF_20250623_234508_562

When erasing, a black line will appear where the eraser is passed and when you release your finger, the eraser will be applied.

GIF_20250623_234121_247

Changing the stroke value will display a preview of the current size and color at the top.

GIF_20250623_233819_075

I know the Canva component exists, and you can do a ton of amazing things there, but here I have a Canva that's set to an Arrangement. I've been testing to make sure it works with the other ImageLoader and Text extensions. But when you save the image with the built-in function, it will only save what was done with this extension, not the other extensions. To save from all extensions, you can use the ArrangementCapture extension.

MakePaintable

Turn an Arrangement into a canvas for drawing with touch

blocks (36)
blocks (36)960×112 14.7 KB

StrokeColor

blocks (39)

StrokeWidth

blocks (40)

Eraser

Enable eraser mode. True = eraser on, False = draw mode.

blocks (37)

ClearCanvas

Clear the entire canvas.

component_method (12)

SaveCanvas

Saves the entire canvas as a PNG with the specified filename. Returns the file path.

blocks (44)

DrawAboveComponents

Set whether the drawing appears above or below the components in the arrangement.

blocks (45)
blocks (45)816×112 13.2 KB

BrushStyle

Set the brush style. Options: 'default', 'dotted', 'dashed', 'emboss', 'blur'.

blocks (42)
blocks (42)780×112 12.4 KB

FillCanvas

Fill the entire canvas.

blocks (41)

UndoLastStroke

Undo the last stroke on the canvas.

component_method (13)

RedoLastStroke

Redo the last undone stroke on the canvas.

component_method (14)

CanUndo

Returns true if there are strokes to undo.

component_method (15)

CanRedo

Returns true if there are strokes to redo.

component_method (16)

StrokeUndone

Triggered when a stroke is undone.

component_event (8)

StrokeRedone

Triggered when a stroke is redone.

component_event (9)

Update v1.1 June 24, 2025.

  • The spacing between dotted and dashed brushes has been corrected.
    • They can now be displayed correctly with any stroke width.

Screenshot_2025-06-24-23-21-04-600_edu.mit.appinventor.aicompanion3-edit
Screenshot_2025-06-24-23-21-04-600_edu.mit.appinventor.aicompanion3-edit1080×1252 91.2 KB

  • New brushes added.

IMG_20250624_232326
IMG_20250624_2323262176×1080 129 KB

IMG_20250624_232252
IMG_20250624_2322521920×953 68.5 KB

IMG_20250624_232309
IMG_20250624_2323092176×1080 125 KB

joejsanz.joedevpaint.aix (19.1 KB)

JDK: 11
Minimum API Level: 21
Updated On: 2025-06-24T07:00:00Z

Built & documented using: FAST v3.7.0-premium

Thanks.

9 Likes
2

The stroke looks great.

Is it possible to create an extension to include the stroke method in the default canvas ?

3

Something like that?

CanvaAI2.aia (7.0 KB)

When drawing slowly, noise is generated at the edges of the stroke due to the shaking of the finger when sliding, but if you draw quickly, the edges look good.

2 Likes
4

Hola @Joejsanz , Como siempre te felicito por la inventiva y la calidad de tus aportes.
PREGUNTO, se podria agregar una forma de hacer el stroke como linea de puntos, como linea de trazos mas largos e interlineados o completa?
Yo hace un tiempo queria hacer una app de dibujo para hacer pequeños mapas (sketches) de algun paisaje en particular, yo ademas de programador soy Lic. en Geologia, ese es el motivo.
Queria hacer una paleta de iconos que se puedan arrastrar y agregar, pero no encontre la forma de hacer los iconos drag and drop.
Si sabes de una forma, seria genial y podria avanzar con ese viejo proyecto que tenia en mente.
Te agradecere cualquier comentario al respecto.
Y Muchas Gracias nuevamente por tus aportes.

Pd. si te interesa te puedo pasar el viejo post en el que pregunto sobre este mismo tema, seguramente tendra 2 o 3 años, pero se que lo puedo encontrar, (todo el pedido en ese caso esta en ingles, y evidentemente eso no es un problema)

5

Thanks. Still seems slightly better when using your full extension, but an improvement over what we have.

Regarding Brush Styles in your extension, when testing dotted or dashed with a Stroke Width > 15, there is no space between the dots/dashes, go big enough and you just get a line.

6

Esta disponible en esta funcion:

blocks (46)
blocks (46)772×112 12.4 KB

helpers_dropdown

Pero al poner los trazos mas anchos no se visualiza bien.

  • Ya lo corregi y en unos momentos mas subire la actualizacion.

Recuerdo haber leido eso.

Si, pon el link del post para verlo.

1 Like
7

True, I only had it configured for thin lines, I already corrected it, in a few moments I will upload the update.

2 Likes
8

Update v1.1 June 24, 2025.

6 Likes
9

Muchas Gracias @Joejsanz por responder prontamente.

Bueno mi post fue este:

Yo necesito poner un área dentro de una app donde tenga varios iconos, para usarlos
como referencias dentro de un canvas.

Simbolos estruturais
Simbolos estruturais876×1600 198 KB

images

símbolos como los que comparto aquí.

también me gustaría que (si se puede, estimo que se podrá, pero yo no tengo los conocimientos necesarios para hacer una extensión de este tipo).... hacer un refill o fill con un tipo de imagen como esta (no con color, para eso encontré una extensión pero yo necesito rellenar con un gráfico, no con color, lo aclaro).

images

y rellenar un area determinada con un tipo de material como los que aqui tambien comparto.

En fin. Yo pare el desarrollo de la app por estas 2 problemáticas.
Si pudiera avanzar con esto seria prácticamente el final de la app.
Tener los iconos y el refill eran los 2 problemas grandes, ademas del interlineado.
Nuevamente muchas gracias por tu ayuda y tus aportes.

1 Like
10

This extension is a burner! Congrats!

1 Like
11

Te sirve esto?

1 Like