I am using KineticJS to build a scene where I want to add some vector drawings to the canvas, and I have provided with lots of Adobe Illustrator files which contain shapes to add to the scene.
How can I convert these into the right Path properties to draw a shape in my KineticJS scene?
I saw this question: Loading SVG in KineticJS but they are asking about specifically SVG files where I have access to the RAW *.ai files.
A Caveat to my answer: You need access to Adobe Illustrator...the free trial version will work!
Check out Mike Swanson's AI converter that creates canvas drawings.
If any .ai sub-element can't be converted to context draws, his converter even creates a raster image for that one element while still creating what can be context drawn.
It's updated for CS6 (the latest AI version).
http://blog.mikeswanson.com/post/29634279264/ai2canvas
Related
how can I save a dom as svg file using html2canvas ?
For downlading as png , I've done something like below :
html2canvas(document.querySelector('#demo')).then(function(canvas) {
saveAs(canvas.toDataURL(), 'image.png');
});
How can I achieve similar result to save it as svg file ?
You don't.
The reason you can export to png/jpg/etc is that the canvas is a pixel graphic presentation layer, so for convenience it knows how to generate the browser-supported image types that use embedded bitmaps.
If you want vector graphics instead, then you'll need to actually draw vectors, and that means not relying on the canvas APIs. You either roll your own vector drawing instruction set (directly generating SVG yourself, or rasterizing objects to the canvas purely as presentation layer), which I would recommend against, or you use one of several vector graphics packages already out there like Paper.js, Three.js, Rafael, and so forth.
Is it possible to convert a HTML 5 canvas drawing into a file readable by 3D printers (e.g., .ply, .sty)?
We couldn't find any libraries that exist ... does anyone know of any?
The drawing on a HTML5 canvas is a pixel based images. 3D printers expect vector based formats. So technically you'd have to vectorize the image first.
Since drawing on a HTML5 canvas requires to perform drawing operations, the straightforward way was to log the drawing operations to turn those into a vector based format.
Another method would be not using a HTML5 canvas, but creating a SVG DOM. SVG by it's nature is a vector format; also a lot of the tools used to prepare a 3D printing control file either accept SVG directly, or formats for which SVG convertors exist for.
I need to create an array of points (polygon) that represent the outline of a string draw to a canvas in Javascript. Similar to the Java 2D Shape API, where you can create a Polygon object from text.
Any ideas on how I could go about doing this?
I don't know of any library that will directly convert character glyphs to canvas paths.
But Yes, here's an idea that works but it's not very direct.
Use Adobe Illustrator to convert text characters to a path outline.
Then use ai->canvas to convert the Illustrator path to an Html Canvas path
BTW, ai->canvas is an amazing library! -- Kudos to Mike Swanson:
You can get the library here: http://blog.mikeswanson.com/post/29634279264/ai2canvas
If the font you want offers an svg version, you can avoid the Illustrator step by using info on this previous post: How to convert text to SVG paths?
You might want to checkout typeface.js. This includes tools to convert true type fonts to glyph data that can be rendered by canvas or webgl.
Using EaselJS (HTML Canvas framework, from CreateJS)
I have a tileset, and I need to draw a tilemap.
So I assigned my tileset bitmap to each tile.
But of course, each tile has to draw only a part of the tileset.
I figured out how to draw a part of a Bitmap (Bitmap.sourceRect), but it means I have to clone the tileset for each tile !
Coming from a Flash AS3 background, I chose this library because it is supposed to be similar, however it seems to be different for image handling (where this problem is adressed by using many Bitmap with one BitmapData).
Thanks.
Look into using a SpriteSheet and BitmapAnimation instead. There are examples in GitHub that can help.
https://github.com/CreateJS/EaselJS/blob/master/examples/SpriteSheet.html
http://www.createjs.com/#!/EaselJS/demos/spritesheet
Is it possible to export Kinetic JS object to SVG?
Or workaround is to convert Kintetic JS's canvas to SVG.
EDIT:
The best is to use fabricJS since it supports canvas to SVG rendering while working with fabric objects.
I accepted Phrogz's answer since it also does conversion canvas to svg without using some other library for drawing on canvas.
EDIT 2: OK, i messed up, Phrogz's library is wrapper around canvas element so you use it's methods to draw on canvas (I thought that it just 'listens' on canvas and creates SVG paths). So the best solution is fabricJS definitely.
The best solution is to use Fabric.js!
I've created an alpha version of a library that allows you to extend an HTML5 Canvas Context such that it tracks all vector drawing commands and stores them as an array SVG elements in a ctx.svgObjects property of the context.
You can see the library in action here: http://phrogz.net/svg/HTML5CanvasRecordsSVG.html
The demo turns on recording, draws a few shapes to the HTML5 Canvas, and then appends the 'recorded' SVG objects to an SVG container next door.
In general the library:
Keeps track of the current context transformation via an SVGMatrix object. (This is because the HTML5 Context api lets you set the current transform to a matrix, but does not let you get the current matrix.) It does this by intercepting calls like translate() and rotate() and updating the matrix accordingly.
Intercepts beginPath() and creates a new SVG Path element, and then intercepts further commands like moveTo() and lineTo() in order to add the equivalent path commands to the SVG path.
Note: not all path commands are supported or tested in the library at the time of this writing.
Intercepts fill() and stroke() to add a copy of the current SVG <path> to the svgObjects array, setting the current transformation matrix, fill and stroke styles.
Note: not all stroke styles (lineCap, lineJoin, miterLimit) are supported as of this writing.
Note: calling fill() followed by stroke() creates two separate SVG elements; there is no optimization to differentiate this specific case from stroke/fill, or changing the transform or path between calls.
Intercepts fillRect() and strokeRect() to create an SVG <rect> element.
More work could be done on this library to flesh out all the commands (not just path commands, but also things like fillText()). But it's not something that I personally need, so I'm not inclined to spend hours carrying it over the finish line.
basicly you can convert the canvas to base64 png and then put it on svg
maybe this could help you
http://svgkit.sourceforge.net/tests/canvas_tests.html