Me and my team have problems with generating bitmaps out of polygons. We've tried a few different solutions in order to generate polygons sufficiently fast and have found generating SVG paths and then using CairoSVG to be the best solution for us. We are using the even-odd rule to fill the polygons. I apologies if I'm describing everything in an incorrect way in terms of vocabulary, I'm new to SVG. The pathes are created as:
path_entry = f'<path fill="rgb{rgb_color}" fill-rule="evenodd" d="{svg_path}"/>'
With header
<svg
xmlnsXlink="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
style="color:green;"
>
We only allow the bitmap to have a set of color values. The value of a pixel should be that of the polygon which it's inside. A problem we've encountered is that the edges of the polygons "splits" pixels, i.e a pixel can be both on the edge/inside of polygon A and polygon B. See the image below where the edge between the black, green and grey area gets a mixed color.
We've currently solved this by finding each pixel that doesn't have an allowed color. We then use numpy roll to fill the value of these pixels with the value of its neighbours according to a solution found on this site.
for shift in (-1,1):
for axis in (0,1):
a_shifted=np.roll(bitmap_only_correct_colors,shift=shift,axis=axis)
idx=~a_shifted.mask * bitmap_only_correct_colors.mask
bitmap_only_correct_colors[idx]=a_shifted[idx]
The problem with this solution is thin diagonal polygons, 1-2 pixels thick. All pixels of these polygons get the mixed value and are therefor removed. This causes the thin polygons to be partly removed creating dotted lines instead of full lines, see the image below.
My question is: Can we solve this problem with the edges of the polygons not getting fixed values in another way? The best solution would be to add some kind of setting to the SVG-Document before generating the images.
Thank you!
Turn off anti-aliasing i.e. set shape-rendering="crispEdges" See the SVG specification for more details about this CSS property.
Related
In a webpage created with node/webpack, vega-lite, and vegaEmbed, I have a layer with rect marks with short annotations inside them using text marks. I'd like to clip the text to its surrounding rect but haven't figured out a way to do this and hope someone can point me in the right direction.
I realize text has a limit property in pixel units. If I could determine the pixel units of my rect marks (I don't know how to do this), using limit seems like a reasonable approach.
Also, if I knew the pixel extents of my rectangle, I can then write code to align the text within the rect which would be desirable. Currently I just use the same x as the rect, with a dx offset.
I've read about background for text which is a similar problem, but not the same.
I want to combine two SVG paths such that
1.Both paths will be there but, at the area of intersection, there will be no strokes.
2.Second path will be excluded and there will be a complete stroke
See image at http://s18.postimg.org/et4m803rd/shape_combinations.jpg
I want similar function also in HTML5 canvas.
The purpose of this scenario is to implement a lasso selection tool (freehand selection) similar to that of photoshop, with Ctrl and Alt options for adding and subtracting selection [ + some other functions ].
What have you tried? This sounds a little bit like a homework assignment.
The first one is easy to replicate. Just draw the two circles with the stroke, then draw them again in the same place without the stroke.
You can achieve the second shape (the "pacman") by drawing a purple circle on the right that is clipped by a circle that is in the same position as the left (black) circle.
I am trying to mimic the behavior of markers on white boards and was wondering if it I can do it with svg polylines. I know the stroke width can be set but can be it changed to vary depending on the velocity of the mouse which I can figure out or is it just a constant value for the stroke?
Or if you wanted to use SVG, instead of using a <polyline>, use a series of connected <line>s
You can't have multiple stroke widths in a single polyline element. I think canvas is probably a better fit for this task.
I've got a collection of SVG's that were generated by taking a corresponding collection of PNG's, live-tracing them all in Adobe Bridge, saving them as AI, and converting those AI files to SVG's using Adobe's builtin scripts.
The shapes in the SVG's turned out fine -- however, somewhere in the process a bunch of extra padding was added to the sides of the images. To be more precise, the height and width properties of the itself as well as the dimensions of the viewBox are much larger than the shapes they contain.
Are there any solutions (ranging from string substitution in the .svg's to fancy Adobe scripts) to automatically set the dimensions of the viewBox fit only the shapes, or otherwise crop the SVG to achieve the same effect?
I'm new to SVG, so let me know if there's additional information that could be helpful.
Thanks
I'm using Raphael to draw rectangles. Whoo-hoo!
Is there a way to right align contents of an SVG file?
Not just text, but shapes as well?
I can do the math and get the computed x value, but I'm looking for the lazy-simple solution.
Thank you.
There isn't. Unlike normal web pages where the window is resized and the content flows into it, when a Raphael paper is resized, there is no sort of flow, so aligning is irrelevant. Instead of setting align=right, you just set the right edge to be the same position you set the width of the paper to be. If you enlarge the paper, you can scale the contents with a single operation. Once you've set the position of the right edge, you've essentially set the align position. You don't need to re-set all edge values when the paper changes size, you just scale everything with one command. Hope that helps