In my SVG picture there are some text labels that are displayed dynamically in top part of the image. In some cases (i.e. smaller screen size, bigger font size), they partially disappear outside the vievBox (like if overflow: hidden; was set) - see the picture (the long word in the middle is the overflowing label).
My idea is to scale down the image so that the labels are visible. How to achieve this?
In my case, I had quite wide bottom margin, so I could afford moving the whole image down to uncover the top part.
Final solution was wrapping the whole image with <g transform="translate(0,10)">.
The first value refers to left-right movement, the other one to up-down (positive values move the image down, negative - up).
Related
Given a number of points on a 2d surface and radiuses for these points I can easily paint circles for them. What I need is an algorithm that only paints the envelope (right word for what I am looking for?) or outer bound of these combined circles. Additionally a second set of circles can 'encroach' on these circles, resulting in a kind of 'border'.
Image of what I am looking for
A quick way to draw the outline of the union of the disks is to
fill all disks in yellow, then
fill all disks in white with a smaller radius.
This can be adapted to the "encroached" circles, provided you only fill the remaining portions of the disks. Unfortunately, in a general setting finding the remaining portions can be an uneasy geometric problem.
There is an alternative approach which can work in all cases:
fill an image with zeroes, then for all disks fill every pixel with the value of the distance to the circumference (maximum at the center), but only keep the highest value so far.
while you do this, fill a second image with the color of the disk that achieved that highest value. (Initialize the image with the background color.)
At the end of this process, the first image will represent a "terrain" made of intersecting cones; and for every point of the terrain, you will know the color.
finally, color the pixels that have a height smaller than the desired stroke width, using the color map.
You can do the drawing in two steps.
1) Draw the outline using the following method: For each point, draw a circle using your favorite circle-drawing method, but before drawing a pixel, ensure that it is not contained inside any other circle. Do this for every point and you will get your outline.
2) Draw the borders between different sets using the following method: For each pair of points from different sets, calculate the two intersection points of the circles. If there is an intersection, the border can be drawn as a segment joining these two points. However, you have to make two lines, one for circle A, and another for circle B. To draw the line for circle A, slightly offset the segment towards point A. Then, use your favorite line-drawing method, but before drawing a pixel, ensure that it is closer to point A that any other point of the opposite set. After drawing the line, repeat the process for circle B. Note that both segment are not guaranteed to be the same length since the asymmetry of the points of the different sets. It will, however, always form a closed shape when all outlines and borders are drawn.
I have a 2d grid where pixel centers are at the intersection of two half-grid lines, as shown below.
I also have a shape that is drawn on this grid. In my case the shape is a glyph, and is described by segments. Each segment has a start point, end point and a number of off-curve points. These segments can be quadratic curves or lines. What's important is that I can know the points and functions that make up the outline of the shape.
The rule for deciding which pixels should be turned on is simple: if the center of the pixel falls within the shape outline, turn that pixel on. The following image shows an example of applying this rule.
Now the problem I'm facing has to do with anti aliasing. What I'd like to do is to calculate what percentage of the area of a given pixel falls within the outline. As an example, in the image above, I've drawn a red square around a pixel that would be about 15% inside the shape.
The purpose of this would be so that I can then turn that pixel on only by 15% and thus get some cleaner edges for the final raster image.
While I was able to find algorithms for determining if a given point falls within a polygon (ray casting), I wasn't able to find anything about this type of problem.
Can someone can point me toward some algorithms to achieve this? Also let me know if I'm going about this problem in the wrong way!
This sounds like an X, Y problem.
You are asking for a way to calculate the perecentage of pixel coverage, but based on your question, it sounds that what you want to do is anti alias a polygon.
If you are working only with single color 2D shapes (i.e red, blue, magenta... squares, lines, curves...) A very simple solution is to create your image and blur the result afterwards.
This will automatically give you a smooth outline and is simple to implement in many languages.
I created a custom venn chart for two sets an their intersection in JavaFX.
Now I want to show the number of elements in this sets like in the following picture:
The sets are ellipses and I used masks to give the intersection a different color.
Now I want to show the number with size and position related to the available space so that the numbers are always inside the according area.
The width for the text element is easy to calculate, but I don't know how to get available height for the text elements.
Maybe it could be helpful to have the pixels of the ellipses as path, but I have no idea to how I can get this.
Does anyone know how to implement that?
Edit:
I developed an algorithm to find the size of a rectangle, which fits in the required areas of the ellipses. The text are scaled to the size of the rectangle and it works, but now I have another problem.
I need to center the scaled text in the rectangle an I used a StackPane for that. But I can't position the StackPane in the chart parent. If I set the layoutX and layoutY the bounds in parent are different.
For example: stackPane with text = sp;
sp.setLayoutY(122.1662320906945);
The Result for getBoundsInParent().getMinY() is 97.16622924804688;
How can I set the StackPane position, if I use it in a chart class as chart children?
I have two boxes filled with colors, a green one on the left, and gray one on the right. They go right up against each other in the middle of the screen, and I would like each one to extend the width of the browser, so the green one extends all the way to the left, and the gray one extends all the way to the right, no matter how wide the browser gets. How can I do this?
the width property supports percentage values, which are relative to the size of the window it exists in.
See:
http://learnlayout.com/percent.html
http://www.w3schools.com/cssref/pr_dim_width.asp
I have tspan element with some text in it. I specified some font-size for it as well. In addition I have parent's box size, i.e. width and height. So now I'd like my text to fit the box with the specified width and height.
One of the options I have is manually calculate string width and height (but it became more complicated in case of different fonts and browsers).
So is there any other way in SVG to resize tspan to necessary sizes? Please note that I want text font size to be changed properly, i.e. so text will be displayed in max font size and any single char from it will be visible.
Well, I've came up with the following solution - have absolutely positioned div element outside of visible area. Apply all fonts and other-related styles (except font size) from tspan to that div, put text into the div. Next try different sizes (you can use binary search for better performance) and measure div size. Once max font size found - apply it along with the text to tspan.