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.
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.
I'm trying to figure out how to make a website image, just some little blob of color without actually creating an image and putting an image tag and all of that. Is it possible?
Would I be drawing it with CSS, Javascript, or HTML5? If drawing it on the fly with something like Javascript, is that something that is a good idea? drawing over and over?
Not sure where to start looking? Thanks for any help.
Here is an example of an image I'd like to make: https://dl2.pushbulletusercontent.com/0P1OxQU6AoPT5LnWG3jROJgEmdWoPKUw/image.png
SVG is a good choice. It allows you to use a document structure, much like that of HTML, for vector graphics. The <rect> element makes a rectangle. For more complex shapes like your example, check out paths. More info here: Rounded corner only on one side of svg <rect>
Vector graphics are easy to generate and manipulate programatically. They can also be sized and scaled without pixelation.
If you need complex filtering or want raster graphics instead, a Canvas element and its 2D drawing context are a good choice.
I have found the following resources concerning the more or less direct use of an
SVG exportet from Illustrator
to use for WebGl with three.js and d3.
Extrude, or, make 2d SVG path into 3d
http://threejs.org/docs/#Reference/Extras.Geometries/ExtrudeGeometry
https://github.com/josdirksen/learning-threejs/blob/master/chapter-06/05-extrude-svg.html
Illustrator/SVG to JavaScript workflow? (A templating library?)
None of these resources would ultimately help to directly use an SVG from Illustrator with three.js and d3.
What I need is either:
a method to directly use an SVG from Illustrator with three.js and d3
a conversion method to convert the SVG (also multiple path groups) from the Illustrator-SVG format to something that is usable with three.js and d3.
Think of it as : User uploads his svg logo and gets a 3D preview.
Manually re-formatting the Illustrator-SVG is not an option here, so I hope you can point me to a few useful resources to solve the incompatibilities.
Thank you very much !
You can convert .svg to .json.
After it's simple to use with Raphaël, Three.js or D3.js
Converted files are simple to use.
Edit : More informations
//jsfiddle.net/yprgsvk7/ -> JsFiddle exemple
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
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.