I need to draw an horizontal segment with dashes on it for a doc I'm writing.
I need to subdivide the segment length this way: given l, then length of the segment and n the fraction of the remaining length at each step, the first dash should be at first=l/n from the left, the second at 1/n + (l-first)/n and so on (until the division returns a number less than one)
What tool could I use to draw this automatically, without using a programming language?
Or... what script could do this?
I need and image in png/jpg as the final result.
if you need to do it programmitically, then maybe Logo programming language is your tool. it can also be done rather easily with LATEX and TikZ package, in this case you can consult with the TEX-LATEX site, also have a look at library for image creation, all the answers there link to usefull resources, which could be a bit overkill for what you need, but will work. if it's not have to be done programmiticaly, you can just create the image with Gimp or InkScape, though if you need to create many such dashed lines, it would be better to automate the process, and i don't know if these tools has batch action capability like photoshop.
Related
Having read the SVG2 draft, I am slightly disappointed to learn that there will be no new line caps than the standard 3. The new arc line join is brilliant however, but not what this question is about (I just wanted to mention that).
I had been hoping for a cap that ends in a triangle. But given my use case, that might not be ideal either.
As far as I can gather, Adobe Illustrator - which I do not use myself - allows the width of a stroke to be variable. This is useful when drawing from a drawing tablet, to highlight the pressure of the lines. It's true, this functionality exists in many bitmap drawing programs, but is there a way to achieve this effect in SVG, without having to draw multiple lines?
The idea is that each node should have a width, and the lines should then 'smoothly' scale the width between each node that had a different width.
Is this possible? And if not, could it be considered?
P.S. I should point out, that this is more a thought experiment and an idea than something that hinders my process. More of a nice to have than need to have.
While this may not be a true answer (SVG standard wise at least), it turns out that in the current trunk version of Inkscape, this feature called PowerStroke already exists. There are some screenshots of PowerStroke.
This should satisfy my quest for the time being.
It turns out - as well - that the arc line joins was actually suggested by Inkscape as well, they are just called extrapolate in Inkscape.
I saw an infographic online that I wanted to use as a challenge to learn d3.js. The original infographic is here:
http://www.shah3d.com/wp-content/uploads/2012/11/IG-WWF-Dehahs.png
I've made a start here:
http://www.tips-for-excel.com/d3test/arc/arc%20test.html
You'll notice that the original has nice lines that link an arc from the bottom with an arc along the top. So far I can only think of painfully placing lots of circles to achieve this effect, hence the odd red circle currently in my visual. What would people's best methods be to replicate the original graphic? Which element would make this task easier? Arcs? Lines? I imagine I'll have to manipulate my data so that the lines go where they're meant to.
Happy to give more info if needed and thanks for taking time to read this.
There are a few existing diagrams to work off of from d3's galleries:
http://bl.ocks.org/4062006
http://bost.ocks.org/mike/uberdata/
Both use the length of the chord as the width of the stroke (initially), but you can tinker with that, for sure.
Graphically, you could use arcs, or full circles with a clip around it. As to the 'best' way to do it, that may come out of 'requirements' of how your graphic needs to behave (animation, relative arc placement, etc).
Personally, I'd go with path arcs.
I am scouring the web for tools, programs, utilities, supporting libraries and code primitives that help optimize SVGs for simplicity, space and elegance recently, to link to from the Kilobyte SVG Challenge's tools section, but have yet to find good primitives focusing on how to reduce the number of coordinates of a path, without losing much – or ideally any – precision.
Take this marker-augmented version of the Coca Cola logo, for instance (~7kb, essentially all path data) – which very clearly shows lots of promise for reducing its number of bèziers, given some tooling to do the math to come up with a path using fewer nodes, while producing essentially the same curve.
For the much simpler problem of polygons and polylines (read "all-line paths"), you can use the Douglas–Peucker or Visvalingam’s algorithm (see Mike Bostock's excellent d3 implementation of the latter) to simply remove the coordinates least affecting the path's shape until you're happy with a size-to-precision fit suiting your needs.
I am looking for the equivalent that notices where larger curve (or even arc) segments could replace lots of these redundant mid-curve coordinate stops, without lots of manual tweaking. I think some vector graphics packages (Adobe Illustrator, maybe even Inkscape?) may offer features like these (tips on how to access them welcome!) - though I would love to find scriptable tools we can recommend and offer HOWTOs of how to use from the command line, or even web apps, that squeeze out excess path filler material for people.
For reference, the Kilobyte SVG Challenge is a for-fun SVG education and advocacy stunt I have set up, recently. All non-question-topic discussion about it are best held there, and/or on its github repository linked above. Stay awesome! :)
You can use Ramer–Douglas–Peucker algorithm to simplify polylines or polygons path.
How to render (to image) text on path with any renderer working on linux?
Like this: text on path.
Performance is important.
Short answer:
I'm on a Debian Squeeze system with the python-cairo package installed. If I run the warped text example it provides (85 lines of Python):
python /usr/share/doc/python-cairo/examples/warpedtext.py
it produces a warpedtext.png file like this:
I imagine it'd be fairly easy to modify/adapt/port the example.
Long answer:
There are two things you need to do this.
The ability to generate the transforms which will place individual letters with the correct position and orientation along the path. This is basic 2D transform geometry.
The ability to render transformed characters/font glyphs with a decent level of quality (sub-pixel precision, antialiasing etc).
For the latter, I'd be looking at one of
Qt's QPainterPath (this example seems to be exactly what you want, but see also this one).
Cairo (another example).
Anti-Grain Geometry.
I am trying to draw this svg of europe using raphael. For each path in the svg, I've parsed it and do: r.path([countrypath]). This works, but the problem is that it is gigantic. For example, some of the paths look like M 11689.234, 6005.2561... It isn't even coming close to fitting on a 500x500 canvas. How do I resize this? Raphael's scale/translate don't seem to work, or I don't know how to use it. I noticed in the SVG each path has transform="translate(5.875e-4,7.538462e-5)" Do I need to somehow change the viewBox? Or change the svg path's somehow before it touches Raphael?
you can use scale(Xtimes,Ytimes,centreX,centreY)
where Xtimes,Ytimes are the proportion reduction if you select 0.2 the images would be reduced to 1/5th
and
centreX, centreY are relative coordinates where you should select 0,0 so that all paths/parts of svg are scaled down uniformly and relatively
if you select scale(0.2,0.2,0,0) your image would be properly reduced to 1/5th
I actual picked out quite a large SVG of the world yesterday and fed it through the SVGTOHTML converter.
You will find the tool and associated info #
http://www.irunmywebsite.com/raphael/svgsource.php
I set up a whole load of resources for Raphael #
http://www.irunmywebsite.com/raphael/raphaelsource.php
Amongst these you will find the world map wrapped in the scale pluton provided by Zeven!
The 20minute exercise delivered this...
http://www.irunmywebsite.com/raphael/colourmap2.php
Hopefully this will help you or someone with a similar problem in the future.
Also note that you can simplify paths in SVG editors as well as scale them before you put them in the SVGTOHTML converter.
Quite often maps can be drawn to extreme detail but simplifying them will greatly reduce path length.
You have two options either use what I did, use the .transform("transform string") to scale the paths, the transform string can be sww,hh,xx,yy where ww and hh is by how much you want to scale the path.
.transform("s0.25,0.25,0,0");
You can find an EXAMPLE HERE or jsfiddle HERE.
Or use
paper.scaleAll(n);
where n is the amount by you want to scale the whole paper by. First create the path in the page and then scale the paper object by maybe half
paper.scaleAll(0.5);
You can find the library and examples for the Scale.Raphaeljs library in the link below:
Scale Raphael library
Translating by such a small amount seems a bit wasteful, it's ~0 anyway, I doubt you'd see much of a difference if you stripped off the transform attributes that look like that.
Yes, changing the viewBox could make it fit to whatever you wanted in all viewers that support SVG, but raphael itself doesn't support viewBox (you'd have to provide some VML fallback yourself).
Either preprocess the path data to fit your particular use (probably a good idea anyway, it always helps to keep the filesize down, wikipedia maps are usually quite large) or use raphael's scale function to scale the paths to a proper size.
Update: Raphaël v2.0 and later does support viewBox (via the setViewBox method).
You can use the Raphael attribute 'translation', which takes an x,y delta. ie:
r.path([countryPath]).attr({translation:'-11689, -6005'});
To make it more reusable for multiple paths, you could parse the x and y values from the M in your svg path. When I did this, it turned out that I didn't want my path to be exactly on the 0,0 since that sent it over the canvas as well -- might take some adjustment depending on the height and width of your element.