I can't post images yet:
http://i.imgur.com/7Kci5.jpg
Using Actionscript 3 I'm drawing multiple Shapes onto a MovieClip [top drawing]. The end result I need is the bottom drawing. I originally thought it would be simple to just merge the shapes and then find a way to draw a border around the end result but I can't seem to find any way of doing this.
Is this possible or is there a better way of trying to do this?
there are 3 ways to go:
hard math. don't draw them directly, but draw through an additional abstraction layer where calculate the resulting curves and draw them.
simple abstraction layer. instead of drawing directly, draw them twice in 2 colors, an inner and an outer one, the outer being one pixel bigger (obvious in the case of circles at least). Only works if you draw into the same Graphics object.
use a GlowFilter with no blur (try what using 1 does) and knockout set to true.
greetz
back2dos
Related
I'm using a bitmapdata.draw(stage) to draw the stage as a bitmap but I would like to draw an area which is 32 pixels left of the stage instead, so that the area I am drawing as a bitmap is no longer in the viewing window, but the bitmap being draw is (so the stage is a bitmap). How do I draw a specific area with multiple bitmaps and display objects?
This is a very nice article that can help you: http://www.tomauger.com/2013/flash-actionscript/actionscript-3-bitmapdata-draw-offset-and-positioning
You should basically use a Matrix and work your way around with it :)
My honest advise would be not to use such odd techniques as if you want to draw something it should be within the stage..
After Effect has the possibility to apply the a Bezier Surface over an image.
However we want to achieve that affect with AS3.
We can use DisplacementMapFilter, using a mapBitmap for each frame for the bezier effect..
How can we generate each of those bitmaps?
The only information that after effect gives are the 12 control points for 12 key frames each one.
How can we with that information generate those mapBitmap that the DisplacementMapFilter operation requests?
Maybe after effect has another information that we are missing?
Thanks in advance.
I'm asuming you're trying to come up with something like this: http://fatlinesofcode.philipandrews.org/2011/02/20/warping-bitmaps-with-a-bezier-surface/
Displacement map filter has limitations that would make this difficult.
The trick is to break up the image into triangles and warp these triangles along the bezier lines/surface you like. The more triangles you use the smoother the resulting image.
this is a good place to start : http://www.flashandmath.com/advanced/p10triangles/index.html
here is a more advanced example (without code) http://www.miaumiau.cat/2010/03/simple-surface-editor/ that is using bezier curves
more code here also: http://wonderfl.net/c/rFOlY
you can try looking up more resources with drawTriangles and distort keywords
I'm new to html5. And I'm trying to create a basic painting tool.
What I want to do in this tool is to have one or more shapes(maybe overlapping) and to paint the shapes without getting the colors overlapped. If a circle is drawn inside a rectangle and if I start coloring the circle, the rectangle should not be painted even if the mouse is dragged over it unless the dragging starts inside it.
To achieve this should I use multiple canvases or shapes?
Thanks in advance.
Well, first you need to program in the idea of keeping track of separate shapes. If you haven't already done that see here for a tutorial.
I imagine your shapes will all be kept as images or in-memory canvases themselves. I'm not sure how else you can do it.
There are a million ways you could do this, here's one:
When you start your drawing operation you need to detect which shape you're on. Then you draw that shape to an in-memory canvas and switch that temporary canvas' globalcompositeoperation to source-atop. This will make sure the paint can only paint in the already opaque regions of that shape (if that's your intent here, which it seems to be).
All while you are painting you will want to update the temporary canvas and redraw the main canvas constantly. While you are redrawing the main canvas, instead of painting that shape's image file you'll want to paint the temporary canvas (if you use canvases to keep the shapes you can just update those in real time).
If you are not using temporary canvases for each shape, when you stop the drawing operation you are gonna have to update the image associated with the shape to complete the operation.
Using an in-memory canvas (not added to the DOM) for every shape (that is the size of the shape and no larger) will make coding things slightly easier and might not be that bad on performance. I'd give it a try with 100 and 1000 (or more) in-memory canvases on your targeted platforms to see though.
The alternative is to use one in-memory canvas and have an HTMLImageElement (png) that represents every shape, but using the canvas.toImageURL function can be a bit of a performance hit in itself. I'd try both methods to see which works best in your case. If the shape count is small enough, it probably doesn't matter which.
Is it possible to draw a single filled shape in the canvas with different stroke styles?
In other words, can I draw a blue triangle, and have each side a different color?
I realize there's a less than optimal solution:
being a new path, draw the triangle without strokes, fill it in, then close the path
begin a new path, redraw the first side with the first colored stroke, close the path
begin a new path, redraw the second side with a different colored stroke, close the path
begin a new path, redraw the third side with a different colored stroke, close the path
In short, draw a filled shape without strokes, then redraw each side with a unique stroke style.
This isn't a big deal for a single triangle, but if you've got many, more complex shapes, this seems inefficient.
So - is it possible to draw a single shape with different stroke styles along various segments of the path?
The short answer is no, not in a built-in way anyway. The reason is because with each new call to stroke() it will stroke the entire path, not just the not-yet-stroked parts.
You can always make your own function that, say, takes in a bunch of points or types of segments (you'd have to make your own class) giving each a color, and have that function parse them and do the drawing. But thats as buit-in as you'll get.
You'll quickly realize that opens up new and exciting problems, such as what to do about the mitering. And if you don't know what mitering is, you'll find out real quick by doing this :)
(...and then some of that problem can be alleviated by using ctx.linecap = 'round'
Given an HTML canvas that has already been drawn to, what's the best way to shade the whole canvas except given circular regions? (in context: shadows except where are there light sources)
I was hoping it would be as simple as a rect() followed by subsequent arc()s, but AFAIK there's no way to "remove" those circular sections after the fact. I can get close ( http://jsfiddle.net/mW8D3/2/), but the overlapping regions of circles end up shaded (in XOR fashion, whereas I want OR). Using clip() has the same problem.
I've also tried using globalCompositeOperation but can't quite seem to achieve what I want.
Any ideas?
You could first create the shadow image on a second canvas and knock out holes from it with globalCompositeOperation 'copy' and a transparent fillStyle.
Like this: http://jsfiddle.net/mW8D3/4/