I'm using Raphael to draw the arcs as shown in the image below:
Z-index order is from lowest to highest: gray, blue, green.
Both the gray and the blue arcs start from the top, where the green one starts.
Is there any way to improve the edges? Especially the green over blue one.
Thank you.
I'm afraid there's not much you can do. How the shape is rendered depends on the viewer (browser, image viewer or importing application). You could play with the rendering properties and see if this gives you an improvement, but I believe hardly any SVG implementation supports them.
I am not sure exactly what you mean, and it is hard to know how you made the image without the raphael code. Are you talking about the way the outer edge of the green arc extends slightly beyond the outer edge of the blue arc? I would check that the corner points of the two paths are the same, and include the stroke-width in your calculations of the paths.
Perhaps you could try reducing the stroke-width to 0 to make things easier.
The problem is that you are overlapping the shapes. This causes some colors to spill out from underneath. To solve this you need to start each arc where the previous one ends.
You might get very faint gaps, this can easily solved by applying a 1px stroke to each arc.
Related
Currently I am using canvas to draw the gold circle, then snip off the areas half way to adjacent stars with globalCompositeOperation : destination-out, then paste the result into the main canvas.
I am contemplating changing to svg for this.
The closest method I have found is clip masks. I would have to create a set of clip-masks for each circle (star), this seems excessive if there were 2000 stars.
Another way would be to create polygons, but the math required to calculate the path may be beyond my capabilities.
So before I go down either of these routes, I would like to know if there is a better way or which of the above methods are recommended.
I am trying to figure out how to achieve a smooth transition between two colors.
I.E. this image is taken from Wikipedia.
When I try to do the same using my code (C++), first idea that came to mind is using the HSV color space, but the annoying in-between colors show-up.
What is the good way to achieve this ?
This is going to sound weird, maybe... but vertex shaders will do this nicely. If that's a quad (two tris) then place one colour on the left 2 vertices, and the other on the right, and it should blend across nicely.
Caveat: Assumes you're using some kind of OpenGL.
The only part of your question I feel I can answer is that you must somehow be transitioning through too many values in the H part of HSV.
H is for hue (different colors, like the rainbow effect in your gradient). In this case, it looks to me like you are only merging 2 different hues.
S is for saturation (strength of color from highly saturated to
gray)
L is for lightness (more or less luminosity (from your
color to its most white)
This is caused by a lack of color in between, as black (or grey in your case) = desaturated. It is like putting two transparent fade images together, there is a see through area in the middle as 2 50% transparencies don't equal 100% solid color.
To avoid this, I'd suggest placing one color above the other and fading that to transparent. That way there is a solid color base with the transition above.
I dont know what your using to display (DirectX, Windows display or whatever ) but try just having two images, one solid color and a single color with a fade from solid to transparent infront. That might work.
I created my own little 2D-Engine with DirectX (okey, should be more like a GUI in the end) and tried to create rounded edges for a simple Rectangle. Since I never done this with a graphics framework before I had no idea how to supply this.
For now, I just overlapped 5 Rectangles and 4 circles (the circles are used for the rounded edges). It does work with opaque colors but if I add alpha into the rectangles the circles are making problems. (Shown in the image below - i should have choose another colors...)
<# Open Image #>
I can't find a solution myself (I googled and whondered I found nothing about rounded edges in DirectX) and I do believe there is a much powerful and faster method doing this. So my final question is, what are the common algorythm to create a rectangle with rounded edges in Direct3D9 ?
The common way to draw rounded quads is the use of textures with an alphachannel. It's very easy and the most of the gui's uses images to achieve a specific look. If you draw only single-colored boxes it may look very generic after a while (even if they have fancy rounded corners ;) ).
But if you want to draw rounded quads directly, I would suppose to generate a custom geometry, which fits the desired area directly without overlapping (need for alphablending). In you case it would be something like this:
The more triangles you're using for the corner the smoother it will look.
When using an feDisplacementMap svg filter, my smooth svg lines are getting all jagged. I could probably render it large and then shrink it down, but isn't SVG supposed to be able to anti-alias?
Okay, so I figured out the answer to my own question: the filterRes attribute: http://www.w3.org/TR/SVG/filters.html#FilterElementFilterResAttribute
In my testing, on Chrome, increasing the filterRes slows things down pretty dramatically.
SVG filters process inputs at the pixel level, not the vector level. As far as an SVG filter is concerned, it's been handed a big rectangle of RGBA pixels to work with. Results from a displacement map can look pixelated because a filter has no idea where the edges that have been displaced are - it's all just pixels as far as it is concerned. (The old semi-transparent pixels that used to be the anti-aliasing have been displaced as well.) However, sometimes you can add another filter or two to solve any problem that this creates. Creative ways to solve this problem:
Take the post-displacement graphic, blur it with a radius of a few pixels then blend the blur back into the original graphic.
Take the post-displacement graphic, do a luminance to alpha conversion, then use that alpha map with a diffuse lighting effect to add a fake anti-alias lighting effect.
Use a convolvematrix with edge detection values to extract edges from the graphic, blur that result and blend it back into the source graphic.
Depending on your graphic, you might be able to use an erode or dilate filter, but that tends to produce boxy highlights and might not work. And of course, you can always tweak your input in SVG (using stroke effects) to "pre-antialias" your source graphic so the result doesn't look so odd.
I need to write some code (for a web.py webapp with a straight-HTML/JS client) that will generate a visual representation of a set of point-values. Each point has an X and Y coordinate, and the value is an integer. If I can use SVG to do this, then I can scale the image client-side with no extra code. Can I actually do this? I am concerned about a couple of things:
The points don't necessarily have any relation to each other. They aren't necessarily in a grid, nor can we say how many points are nearby, etc.
Gradients are primarily one-direction, and multiple gradients on the same shape seems to be a foreign concept.
Fills require an existing image, at which point, I'd be better off generating the entire image server-side anyway.
Objects always have a layering, even if it isn't specified, which can change how the image is rendered.
If it helps, consider a situation where we have a point surrounded by 5 others, where one of them is a bit closer than the others (exact distances and sizes can be adjusted). All six of the points have different colors (Red, Green, Blue, Cyan, Magenta, Yellow, with red in the center and Yellow being slightly closer), and the outer five points are arranged roughly in a pentagon. Note that this situation is not the only option, just a theoretically possible situation.
Can I do this with SVG, or should I render an image server-side?
EDIT: The main difficulty isn't in drawing the points, it is in filling the space between the points so that there is no whitespace, and color transitions aren't harsh/unpredictable if you know the data.
I don't entirely understand the different issues you are having with wanting to use svg. I am currently using the set up you are describing to render X-Y scatter plots and gaussian curves and found that it works great.
Regarding the last point about object layering, you have to be particularly careful when layering objects with less than 100% opacity which are different colors. The way the colors "add" depends on the order in which you add the objects to your svg drawing.
Thankfully you can use different filters to overlay the colors without blending them. Specifically I am using the FeComposite filter element. There is a good example of its usage here:
http://www.w3.org/TR/SVG/filters.html#feCompositeElement