I have a series of paths (with curve points) created in Illustrator. How do I send my circle to follow along these paths in Canvas?
I can set the paths to a line through a svg -> canvas converter, but that doesn't help me animate anything along that line.
Any ideas?
I suggest checking out something like CAAT.js. The first demo does pretty much exactly what you are looking for.
CAAT.js follow path demo
Related
I'm creating a diagram with D3 and JSON which is based on this:
http://bl.ocks.org/mbostock/4063550
The difference is, I also want to have different shapes for nodes (not just circles, but for example, trianges.)
I have a attribute in the JSON file that says something like "shape":"triangle".
How do I update that index.html file so that I can get different shapes to be displayed?
Really urgently need assistance...any help/advice really appreciated.
Trying modifying this line to be what you want, which is currently drawing a circle:
node.append("circle")
.attr("r", 4.5);
D3 has some built in SVG helpers for drawing symbols: d3.svg.symbol. AS #pfrank suggests, you should be able to append a path instead of a circle and set the d attribute to the output of the symbol helper configured to whatever shape you want.
We have a flash application that we are planning on converting to javascript. It's a pretty simple map application with an image as the background and a bunch of simple polygon movie clips that represent destinations on the map.
I would like to iterate through each movie clip and extract the shape into an array of x,y points to redraw the polygon using an external javascript function.
Is this possible with actionscript?
If you want to export the shape coordinates at author time, you can do try the JSFL script recommented by #strille or this one or export transparent images (if that's not too limiting for your application).
If you need to export the shapes at runtime, you can use the awesome as3swf library to decompile the swf and export the shapes. Have a look at the ShapeExport wiki as there are couple of handy exporters for js like JSCanvasShapeExporter and the more generic JSONShapeExporter
There are ways you can read the coordinates from an SWF. For instance, I've written a parser in PHP (link). Getting the data doesn't help though, as it turns out. The Flash painting model is different enough from the HTML5 one enough to make transfer exceeding difficult. The main obstacle I discovered is that in Flash, a path can be filled with two fill styles: one for area enclosed by the path, the other for enclosed area considered to be "outside" by the even-odd rule (e.g. the pentagon in the middle of a star). Since the HTML5 canvas let you specify only one fill style, you can't redraw shapes from Flash accurately. I was trying to create a tool that extract shapes as SVG and was getting a lot of gap and holes in the result.
Flash Player 11.6 introduced readGraphicsData() which does exactly what you ask for.
If you need to target an earlier version, then there's no simple way to read shape coordinates from a display object with ActionScript at runtime unfortunately.
If you just want to extract the shape coordinates once someone has written a jsfl script for Flash CS3 which looks like it might be able to help you out.
I'm now working on a painting app. It uses a html canvas. Users can draw shapes on the canvas.
Now a problem comes to me. I want to select the line that I drew on the canvas. When it is selected, I can drag it or delete it. How can I implement it ? Any good ideas?
It might be worth your while to have a look at https://github.com/canvimation/canvimation.github.com this contains the source code for a drawing application using canvas.
You should note that this application is being re-coded but there is not yet a working version using the new code on line. The new source code is in the stage1 branch. Hopefully this new code is easier to understand than the old code and the code referred to below comes from the stage1 branch.
Basically a shape object is created for each shape drawn which includes all data about eh shape, including path data and data giving the rectangular boundary around the shape. When the "boundarydrop" div is clicked then function checkBoundary is called and data about the shift key and cursor position are passed. Then for each shape the first check is to see if the cursor is within the boundary of the shape and if so then a more refined check is carried out. For a closed shape the check is if the cursor in inside the shape and for an open shape if the cursor is close to the path.
There are further complications depending whether the shift key is held down or not and which group the shape belongs to. However the basics are there.
Functions to check out
in index.html
shiftdown
getPosition
in scripts/drawboundary.js
checkBoundary
isIn
isOn
in scripts/shape.js
shape
A working online version of the application is at http://canvimation.github.com/ but this uses the older code in the master branch and there are some bugs but it will give you some idea of what the application does.
Hope this is of some help
There is a library called kinetic.js, with it you can keep track of the shapes you draw on the canvas with the select feature.
Here is the link: https://github.com/ericdrowell/KineticJS
I need to be able to draw a thick patterend line between 2 points in AS3, I can't use the draw API because it doesn't all me to actually put detail (pattern etc) into the thickness of the line, I thought about perhaps using the line to create a bitmap version and then using that as a mask, but I remember many years ago seeing some examples that use a movieclip as a source for a line, but I can't find examples of that now at all, any ideas?
I've attached an example image of how I want the line to look.
I suspect Graphics.lineBitmapStyle() will do the trick. If you want to use a Sprite or MovieClip as the source, you'll have to draw() it to a BitmapData first. The example code on that later link should get you up and running with that.
This is hard to explain so I created a JS Fiddle to show what is going on: http://jsfiddle.net/dGdxS/ - (Webkit only) Just mouse over the canvas to draw - you may need to click around
I noticed the performance of the canvas was not what I expected, and when I set the line alpha I think I see why.
It looks like every new point I add to the drawing it is layering a completely new line over the previous line. The stroke alpha is set to 1%, and when you draw the older areas of the stroke begin to darken as the layers build up.
I assume I am doing something wrong. Do I need to clear the canvas before drawing to it at each new point?
HTML5 canvas does not come with an endPath method, but instead you can call context.beginPath() again to close the current path and begin a new one.
This is as opposed to calling context.closePath(), which will actually draw a line to the beginning of the current path, but not end it. If you were to draw again, the pen will simply continue drawing from that same point that closed the path. See this excellent related SO answer for more details and explanations.
Because you never call ctx.closePath();, so it will redraw the entire path from the beginning each time.
So you really want something similar to this:
http://jsfiddle.net/dGdxS/7/