[PLUGIN] Canvas

Canvas Plugin updated 2/9/2014

Download:

https://app.box.com/s/vj4l7k8upl5ywoch9zf1qg0nt3064mnt

Actions:

Paste Object

Resize canvas

Draw point

Draw line

Draw box

Fill color

Clear canvas

New R2:

[Fix] Canvas will now automatically redraw.

Actions:

+ Fill canvas with gradient

Path drawing actions:

+ Begin Path

+ Move to

+ Line to

+ Quadratic to

+ Bezier to

+ arc

+ Rectangle path

+ Set line Settings

+ Fill path

+ Draw path

Expressions:

+ rgbaAt

+ getImageUrl

New R3:

[Fix] pasting objects on scaled canvas'.

+ The draw line action now has a line width parameter [warning: may cause capx made with previous version not to open. + Draw circle action. [Fix] When choosing colors the alpha value is in the range of 0 to 1, rgbaAt now returns a usable value.

New R4:

[Fix] Now works with WebGL. (thanks to Yann)

[Add] Additional hotspot locations top-right,top, etc...(thanks to Yann)

[Add] Paste Layer action(thanks to Yann)

[Change] Paste object/layer action now only paste visible objects.

New R5:

[Add] FloodFill. (Thanks to Pode)

One of the interesting features this has is the way colors are chosen.

You can use any of the following:

"black", "blue", "orange", "gold", etc...

"#00FF00"

"rgb(100, 10, 1)"

"rgba(20, 30, 40, 0.5)"

"hsl(120, 50%, 50%)"

"hsla(120, 50%, 50%, 0.5)"

Note: alpha values are from 0 to 1.

Another nice side effect of this plugin is you can now use all the effects that html5 has to offer.

http://dl.dropbox.com/u/5426011/plugins ... index.html

capx:

http://dl.dropbox.com/u/5426011/plugins/effectTest.capx

If anyone encounters any bugs or has a feature request for this let me know.

-cheersR0J0hound2014-02-09 23:17:12

This is WICKED cool. Thanks, Rojo!

Looks interesting, cheers :)

Been hoping for this. :)

Thanks

Any thoughts on using some of the other functions, arc, paths, etc?

wow this is great!,

but could it be that it doesn't react to mouse input or mouse position?

tried on mouse down, draw point at mousex mousey but nothing..

Drawing is relative to the canvas, so if the canvas has it's hotspot at the top left corner you would use:

Draw point (Mouse.X-Canvas.X, Mouse.Y-Canvas.Y)

newt

That should be doable, I'll work on adding that.

I like it!

Could you add one more action to fill gradual color?

Ah, just a suggestion.

R0J0hound: I just noticed that if you want pixels added in realtime to the canvas when drawing with the mouse, you need to "force refresh" on the canvas. To do that, I use two actions consequently (i.e SetInvisible by SetVisible). Apart from that, everything is great !

New version released. Re-download from first post.

newt

You can draw with paths now.

https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes

capx:http://dl.dropbox.com/u/5426011/plugins/pathDraw.capx

rexrainbow

Added fill canvas with gradient. It has horizontal,vertical,diagonal and radial.

Pode

It will refresh automatically now.

Wow, its a canvas smorgasbord!

Thanks again.

I got it, thanks.

Awesome!!

This will be very useful!

Endless possibilities...

Is it possible to add a "line width" parameter to the "Draw line" action?

And maybe an automated "Draw circle" with position and radius parameters?

Awesome!!

This will be very useful!

Endless possibilities...

Is it possible to add a "line width" parameter to the "Draw line" action?

And maybe an automated "Draw circle" with position and radius parameters?

Paths have functions, line to, and arc to do those. Here's a capx that show how to do those.

Also rojohound I think ther may be an issue with setting color using rgba(). Seems alpha isn't changing.

Btw just realized with getrgba you've added the functionality of the image manipulator object.

Very nice idea.

Paths have functions, line to, and arc to do those.

I know paths can do it, but they need extra actions to draw things. I mean something more like the quick actions inside the "Canvas" category like "Draw Box", "Draw Line" and "Draw Point". At least I think they are supposed to be quick actions since they are somewhat redundant with Path's actions.

Rectangles and circles are probably the most used forms, so I think will be pretty handy to have a "Draw Circle" in a single action.

And since the "Draw Line" is already there, adding a "Line Thickness" param would just make it more complete.

New version R3.

newt

I just noticed that alpha values have to be in the range 0 to 1. I fixed the descriptions and rgbaAt to reflect that.

It will actually accept any CSS color value.

http://www.w3schools.com/cssref/css_colors_legal.asp

So you can use hsl or hsla also.

Animmaniac

Added a line width parameter to the "draw line" action.

Also added a "draw circle" action. It only draws an outline, but if you want it filled use a "Fill path" action directly after.