I'm trying to understand how Paperjs works and I would like to know if it's possible to write text vectors, if yes how?
I tried Raphael.js before this, and I was almost satisfied with it but it seems that Paperjs is more (cross)browser compliant for some reasons, right?
Some examples would be nice!
Thanks for your answers.
Yes, it is definitely possible to create texts in paper.js.
var awesometext = new paper.PointText();
awesometext.content='awesome';
paper is better than raphael because its canvas based. Canvas is better supported on mobiles/tabs and hence the advantage of paperjs. However, since canvas is just a bitmap implementation, zooming will make canvas renderings not so good compared to svg renderings like in raphael.
So, it depends on what your priorities are for your application..
Paperjs handles text-scaling well, but it uses canvas' native methods to render the characters, so you can't access the vector data once they're drawn. But I imagine you'd only want vector characters to manipulate their shape, for example, morphing one letter into another, or creating a font editor.
If you just want hi res text then paperjs can do that no problem... or you could just set a bigger font size.
If you want to render text as vectors in paperjs, have a look at https://nodebox.github.io/opentype.js/
Related
I would like to generate some diagram style graphics using SVG and use text in the diagrams. My problem is, how to know the size of the text in advance to be able to adjust the rest of the layout accordingly. To make this explicit: I'm not talking about SVG in a browser. I would like to work with fixed units and generate PDF for printing for example. So if I use a 12pt font, it should also be printed as 12pt font.
To have a more concrete example: Lets assume I have the three strings "bla", "blablub" and "blubblablub". I would like to print them in a given 12pt font, determine the string size and enclosing boxes and draw the biggest sized box around all of them. The idea is to have equally sized boxed around all, based on the longest text.
Could somebody give me a hint how to do that or why it is not possible? Searching for this topic, I only get some JavaScript tricks in the browser, which usually involves rendering the text and then re-rendering everything again.
is it possible to create a stroke with a dynamic width with SVG? I want to achieve a Calligraphy look like here, here or here.
Is this even possible? It seems customization of strokes in SVG is fairly limited. Even gradients in strokes seem to be non-trivial (see here).
There is a proposal to add into SVG standard a mechanism, that does exactly what you want:
http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Variable_width_stroke
http://lists.w3.org/Archives/Public/www-svg/2013May/0041.html
There's even an example implementation available here:
https://rawgit.com/birtles/curvy/master/index.html
It is, however, by no means official and we cannot be even sure it'll ever be.
Until then you'll need to stick to Bezier curves and object filling:
You can also use calligraphic fonts, for example - Tangerine available on Google CDN:
This approach requires less work since you don't need to draw everything from scratch, but then again, using third party fonts leaves you with little control over the final result.
You can't dynamically adjust the stroke of a path element. However you could draw a path, use a fill color on it instead of stroke, then double back upon the letters at a slight distance away from the original line.
Also, if you are using the SVG on the web then you can use css fonts on text elements. There are some pretty good cursive fonts that you can use for free... just check google web fonts.
I am trying to make a tool for my website which traces over Japanese characters, showing the stroke order etc.. something like this: http://www.chinesehideout.com/tools/strokeorder.php?c=5pel
I have made a bunch of SVG files in inkscape, which are made up of just curves, one for each stroke of the character. I have then imported these into Raphael using the raphael-svg-import: https://github.com/wout/raphael-svg-import
The SVGs are displaying perfectly, however I want to animate them.
My question is: Is there a way to take each path from the SVG in turn in Raphael, and then animate/stroke them? If so..how??
If you need any more info please say!
Thanks
EDIT: Perhaps I should clarify, when I say stroke I mean progressively draw the line, starting from the first point and ending at the last. At the moment it draws all paths simultaneously and draws the whole of each path at once.
The technique people use in svg for doing this is outlined in this answer. It's probably possible to adapt that to Raphaël, though the Raphaël documentation doesn't list stroke-dashoffset.
Raphaël has a method Element.getSubpath(from, to) that can be used to get only part of a path, that should probably also be an option.
I am working on an application where I need to display color coded indicators. The standard colors will be red/amber/green, but I need to be able to pick any color (e.g. by hex value). The colors are updated dynamically by a script, based on data (dashboard style).
Are there libraries that could help me? I am thinking in particular about using svg or canvas graphics that the script could modify.
Note: the question has been rephrased to better explain the context.
I like this collection on WikiCommons. They are in SVG
http://commons.wikimedia.org/wiki/Tango_icons
Here are a couple of links to start with:
nounproject
openiconlibrary
openclipart
small iconset for use with raphaël
currently I produce dynamically this document with Python Report Labs… to produce pdf documents.
Now, I would like try to produce this document with Tex / Latex / ConTeXt…
I've some questions :
how can I make the layout ?
how can I make header background color ?
how can I define my custom title (with blue box) ?
what is the better choice for my project : Latex or ConTeXt ?
What package I need to use ?
geometry ?
fancyhdr ?
Have you some example ? some resource ?
Yesterday, I've read many many documentation… and I don't found a solution / example for my questions.
Some useful packages apart from the fancyhdr you already mentioned are:
titlesec for more control over your section titles
booktabs for more control over table layout
PGF/TikZ for the graphics in your document, i.e., the page turn effect in the corner and maybe the blue boxes (although that might be considered a bit overkill :))
memoir for more control over your document layout, but the package is more book-oriented than you need probably
koma-script might be a good alternative for memoir but I'm not familiar with it so I don't know about its weaknesses
This is list is not exhaustive and I am not experienced enough in this kind of typesetting meets lay-out stuff to be of much help, but these are packages that come to my mind given your problem :).
Using inputenc there shouldn't be a problem typesetting Russian text.
Maybe the actual process will be easier in ConTeXt, it is more oriented towards control over your typesetting but I'm not familiar with it.
Good luck!
I'd certainly do this kind of think in Context rather than Latex: Context permits grid layout, and allows you to define layers for putting text and other graphics on top of background graphics. But as Pieter says, you could try using TikZ to do this with Latex.
Unicode is no barrier to regular Latex or Context: with either, just specify that you want to use utf-8 as input encoding.
If you do use Latex, don't have headers or footers, and allocate no vertical space for them either.
With Context:
how can I make the layout? — Use grid layout.
how can I make header background color? — Use \setupbackground
how can I define my custom title (with blue box) ? — I don't understand what you want to do here.
Everything you need to do this, except grid mode and how to put graphics in the background, is documented in Context an excursion. Grid mode is explained in the Context manual. Layers are a bit tricky to get to grips with, but Layers in the Context wiki is a good place to start.
With titlesec and color packages use this in LaTeX head (before \begin{document})
\usepackage{titlesec}
\usepackage{color}
% Colors
\definecolor{textcolor}{rgb}{.90,.95,1}
\definecolor{boxcolor}{rgb}{.94,.97,1}
% Header style
\titleformat{\section}
{\color{textcolor}\normalfont\Large\bfseries}
{}{1em}{{\color{boxcolor}\rule{0.35cm}{0.35cm}}\quad}
to make the blue box and change header color, font and remove numbering.