I am trying to use SVGs as cutting templates for a cutting plotter.
I use lines with stroke-dasharrays for fold lines, however if a stroke from the dasharray starts from inside of a different line, the paper tears apart easily, as it creates a sort of crack: stroke-dasharray creates a crack
How can I control, where the dasharray starts?
Edit: "Invertig the dasharray" is probably a more suitable formulation for what I want to do.
Related
I intend to create a system with two columns of text. There will be lines that indicate connections between some paragraphs on the left with some paragraphs on the right that appear when you mouseover them. Should I be using d3.js or is that overkill for this purpose?
EDIT: to be clear, some of the paragraphs on the left may not be aligned with the ones on the right so there would be crossing diagonal lines all along the middle.
Krzysztof is correct in that you might want to consider more complex interactions in the future. If you really just need a line, though, then D3.js is definitely overkill. Several commenters have suggested CSS borders, but I don't know if that approach meets your needs. If you want to draw straight lines between paragraphs, those lines won't, presumably, always be strictly horizontal or vertical. A more flexible option would be to add an absolutely positioned <div> into the page, hiding or showing it as appropriate. The <div> can have a 1px height and a background color to simulate a line, and it can be transformed using translation and rotation to connect any two arbitrary points.
No, use CSS instead. If you provide HTML code then we can guide you with CSS. Check out CSS borders: http://www.w3schools.com/css/css_border.asp
it depends on many factors. If you need d3.js only for 'draw lines/arrows' then I think this is overkill (d3.js is bigger then jquery). This looks like some simple task with basic tools. But if this is data presentation, which in future may be more complex, and when you use d3 for other charts, it will be fine.
Edit: because OP edit:
Look at this in semantic way. If this is data presentation then yes, If this is graphic effect then no.
No. D3 = "Data-Driven Documents". D3 uses SVG, and adding an SVG into your page just to draw a line is an absolute overkill. As a rule, you should take the simplest approach, hence a CSS border should do the job
border-bottom: 2px solid red;
for example.
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 wanted to allow the Emacs cursor to move around freely outside of actual text (similar to virtualedit=all in Vim).
"Oh," I thought, "I'll just keep track of a virtual cursor and draw it to the screen myself."
But it turns out the actual native C drawing routines (such as draw_glyphs) seem to refer back to the buffer contents to decide what to draw (I could be wrong though).
My next idea was to make a giant overlay of all spaces so I'd have complete freedom where to put stuff. But an overlay only goes over ranges of actual text, so again, this does not seem to give me what I'm looking for.
Is this a reasonable goal without hacking the C code?
I believe the writeable area of a window is intrinsically limited to the buffer with which it is associated, i.e. you have to draw in an area where buffer content exists.
(One example of this limitation is the impossibility of drawing a vertical guide line in the 80th column to help the user identify long lines; currently the best possible implementation of such a feature is to highlight the "overflow" of each too-long line.)
You can do the same as what artist-mode does without adding spaces to the buffer:
when trying to place the cursor after the end of the line, just use an overlay with an after-string property which adds the spaces in the display without modifying the buffer.
Have a look at "artist-mode" (M-xartist-modeRET) - it allows you to draw in Emacs.
From the function documentation: "Artist lets you draw lines, squares, rectangles and poly-lines, ellipses and circles with your mouse and/or keyboard."
You can look at popup.el from the auto-complete package, which can pop up tooltips and menus and such at any position, including positions outside the contents of the buffer. Maybe that will show you how you can do it.
I have a multiviewport OpenGL modeler application. It has three different viewports : perspective, front and top. Now I want to paint a label for each viewport and not succeeding in doing it.
What is the best way to print a label for each different perspective?
EDITED : The result
Here is the result of my attempt:
I don't understand why the perspective viewport label got scrambled like that. And, Actually I want to draw it in the upper left corner. How do I accomplished this, because I think it want 3D coordinate... is that right? Here is my code of drawing the label
glColor3f(1,0,0);
glDisable(GL_DEPTH_TEST);
glDepthMask(GL_FALSE);
glRasterPos2f(0,0);
glPushAttrib(GL_LIST_BIT); // Pushes The Display List Bits
glListBase(base - 32); // Sets The Base Character to 32
glCallLists(strlen("Perspective"), GL_UNSIGNED_BYTE, "Perspective"); // Draws The Display List Textstrlen(label)
glPopAttrib();
I use the code from here http://nehe.gamedev.net/data/lessons/lesson.asp?lesson=13
thanks
For each viewport switch into a projection that allows you to supply "viewport space" coordinates, disable depth testing (glDisable(GL_DEPTH_TEST)) and depth writes (glDepthMask(GL_FALSE)) and draw the text using one of the methods used to draw text in OpenGL (texture mapped fonts, rendering the full text into a texture drawing that one, draw glyphs as actual geometry).
Along with #datenwolf's excellent answer, I'd add just one bit of advice: rather than drawing the label in the viewport, it's usually easier (and often looks better) to draw the label just outside the viewport. This avoids the label covering anything in the viewport, and makes it easy to get nice, cleanly anti-aliased text (which you can normally do in OpenGL as well, but it's more difficult).
If you decide you need to draw the text inside the viewport anyway, I'll add just one minor detail to what #datenwolf said: since you generally do want your text anti-aliased (even if the rest of the picture isn't) you generally want to draw the label after all the other geometry of the picture itself. If you haven't turned on anti-aliasing otherwise, you generally will want to turn it on for drawing the text.