[PLUGIN] Canvas

RBuster

There's a "draw box" and "draw circle" action that can do that.

To erase you have to clear everything with the "clear canvas" action and re-draw everything else. Another idea is to draw over the thing last drawn with white or whatever the background color was. I guess for either you need to come up with a way to keep track of what was drawn.

It's much like mspaint in that once something is drawn it's just pixels.

Hi R0J0hound

Thanks for the reply.

I know about these actions but I don't know how to implement it to create these shapes freely (clicking and dragging to get the size they want to the shape). I think I need to insert some information in the width/height fields.

Thanks for the explanation about how to erase the drawing.

RBuster

Here is a sample capx for undo/redo of drawing on canvas. It uses my undo&redo plugin to store the image of canvas for each step.

Thank you, — Surely I will use it.

there's no way to flip or mirror the canvas. I was hoping there'd be a way. Am I overlooking something??

I want to copy a layer and flip/mirror it.

I've tried setting width to negative, and it still draws canvas as unmirrored.

Prominent

The paste actions will draw objects as they appear. So to flip it you need to flip after pasting.

Every tick

--- canvas: paste layer 1

--- canvas: set width to -self.width

I did that, but it doesn't flip it.

It has negative width, but the image is drawn unflipped.

Prominent

A quick look shows it doesn't draw right with negative dimensions, but you can make it negative, paste then make it positive again:

Every tick

--- canvas: set width to -self.width

--- canvas: paste layer 1

--- canvas: set width to abs(self.width)

I went and tried that, and it doesn't work. It just displays unflipped.

How about this option ?

https://www.dropbox.com/s/kts9fblq3awff ... .capx?dl=0

Plugin is here: plugin-iframe-amp-inserthtml_t149647

I just tested it with "paste layer" and it indeed doesn't work. It works with pasting sprites though. The matrix transformation is probably wrong or something. For now I'm not going to fix it, but at least it's known now.

Also found another issue.. Fill canvas with color doesn't use correct hotspot location (possibly other actions don't as well?). If I have hotspot of canvas set to center, I need to use bboxleft for X and bboxtop for Y origin point of canvas instead of the actual X,Y coordinate of the canvas object.

Just mentioning it in-case it isn't known.

Prominent

That one is intentional, well, it's just doing exactly what the html5 canvas does internally. The origin of all the drawing functions is the top/left of the canvas. The layout coordinates only match canvas coordinates when the canvas is unrotated and has it's top left at the top left of the layout.

The only exceptions are the paste functions.

okay, no problem.

btw, I noticed canvas will render blurred if x,y aren't whole numbers- so projects with pixel rounding enabled, you have to round the canvas position if you don't want it blurry.

R0J0hound

I wonder if is possible to save the user's draw in JSON data format? If so, could tell me how can I do it, please?

Thanks in advance.

RBuster

There is a .asJson expression but it's probably to use the .imageUrl expression.