Dimensions of visible area in an svg - javascript

How would one go about finding the maximum and minimum x & y values in an svg, in the presence of a viewbox that is. The issue that occurs is that I am attempting to create a partially transparent rect overlay. However, the different versions of android spew out wonderfully inconsistent differences between container widths. Rephrasing the question for clarity how would one find the visible coordinates of an svg where the coordinates lie outside the viewbox, but the aspect ratio has been preserved?

Related

Font Size Issue in Cytoscape.js

I am using a circular layout in Cytoscape.js. I noticed that the size of nodes and font is correlated/connected to each other. Increasing the font size renders smaller node sizes (a relative view I understand). Is there a way to disconnect this relation and show increased font size without affecting the size of nodes?
I want it for all nodes (for single/ isolated events, the increase in font size doesn't affect node size, but for all nodes together, it leads to relative scaling).
You should read the article on Wikipedia for matrix transformations in graphics: https://en.wikipedia.org/wiki/Transformation_matrix
Basically, the concept of a zoom is just a stretch/scale transform. That means if you change the viewport zoom level, you scale everything. When you run a layout and fit to the viewport, you're doing an automatic pan and zoom based on the total bounding box of the elements.
Node size and label size are not at all related. You're using different zoom levels at the same time you're changing the label size, making it easy to conflate the two factors.
Just adjust your node size if you want a smaller/larger node, and just adjust your label size if you want a smaller/larger label. If you want absolute, rendered sizes you can't use zoom levels other than 1 or any fitting.

D3: how to rescale the pack layout to fit only visible circles?

I have a pack layout with multiple levels (depths), out of which a few first ones are made not visible (just like in the example: http://bl.ocks.org/mbostock/4063269:
... where the root node is hidden).
However, the scaling works by fitting ALL the circles in an svg container, not only the visible ones. This leads to lost space if a few top-cirles are made invisible...
What would be a good way to rescale the layout to fit only the visible circles in the container? I thought about checking all nodes for extreme x/y coordinates and rescaling based on that...

Make HTML canvas bigger while scaling the website

Do you have any idea how it could be possible not to scale a HTML canvas element while scaling the whole website (ctrl+"+" in most browsers) but to make its dimensions bigger? I have got an application where you can view large images, zoom and pan them in the canvas element. Now I think it would be cool to scale the website with ctrl+"+" to have more space for viewing the image. As it is by default the canvas scales, too and you gain nothing.
You can use technique described in this article http://novemberborn.net/2007/12/javascriptpage-zoom-ff3-128.
The main idea is to place any two elements and set for the first element css value in pixels like top\left\width etc and for the second element percentage value. When you scale the page the percentage value stays unchanged, but the value in pixels changes depending on zoom factor.
Based on these changes you can calculate the scale factor and multiple it with canvas dimensions to scale it.
How to calculate scale factor you can find in the demo link from article in the script block.
Something like Zoomooz.js could work - http://janne.aukia.com/zoomooz/

CSS 3D transform to make trapezoid of given edge lengths

I have an element of given dimensions (say, 100x300 px) living in a container of the same height and variable width that I want to transform using rotateX around -webkit-transform-origin: top center; while picking the -webkit-perspective of the container so that it appears that the bottom line of the image stays where it is but only expands to fill the entire container.
Wow, that sounds confusing. Here's a picture:
So basically, I want to create a trapezoid with a fixed upper width and a variable lower width. I can't however quite figure out the math behind the relations... Javascript welcome. Following example works IF the body is 600px wide: http://jsfiddle.net/24qrQ/
Now the task is to change the perspective and rotation continuously with the body width. Any Ideas?
Okay, after a glass of wine the maths came back to me:
First, let's look at the perspective / rotation ratio. Viewed from the side, it looks like this:
The red element is rotated around its upper edge, if we project its lower edge to the lower edge of the container, the intersection between the projection line and the line perpendicular to the container at its upper edge is the required viewpoint. We get this by simple trigonometry (notice phi here is in radians, not in degree).
If we apply this, the lower edge of the element will always appear on the lower edge of the container. Now the free parameter is rotation. This seems to have the relation
rad = pi/2 - element.width / container.width
for sufficiently large widths, however I can't quite wrap my head around the actual relationship. Here is a fiddle: http://jsfiddle.net/24qrQ/6/
Basically, you are trying to figure out how to put an object in 3D space, so it lines up with a 2D viewport. That's always a tricky thing.
I don't know what the math is, and most other probably don't either. This is hardly a common problem. But here's how I would go about figuring it out.
The only variable here is width. And the 2 values that would need to change based on the width is -webkit-perspective on the container and -webkit-transformon the inner element. So I would manually edit the values for a few different widths and record the 3D values that you had to enter to make things look right. (I'd use the web inspector to edit the values in realtime so you get immediate feedback)
One you have a few data points, plot them out on a graph and then try to figure out how they change. I have a hunch it's a parabolic curve, but it may but hyperbolic or sinusoidal too, my 3D math isn't good enough to know for sure.
Then you can try figure out an equation where when you input the widths you've sampled, you get back the manual 3D values you set previously. Then use JS to read the width of the container and set the CSS values to make it look right.
I've done that with 3 widths 300, 450, 600:
http://jsfiddle.net/24qrQ/3/
Some trends are obvious. As width increases, perspective goes up at an increasing reate, and rotation goes down at an increasing rate.
Figuring out the exact formula, is now up to you.
As a simpler alternative, if figuring out a formula becomes too difficult, you could manually curate a handful of widths and 3D values that look nice and store them in JS somewhere. Then you could just linearly interpolate between them. It wouldn't be exact, but it might be close enough.
It would also be less fun!

Determine coordinates of rotated rectangle

I'm creating an utility application that should detect and report the coordinates of the corners of a transparent rectangle (alpha=0) within an image.
So far, I've set up a system with Javascript + Canvas that displays the image and starts a floodfill-like operation when I click inside the transparent rectangle in the image. It correctly determines the bounding box of the floodfill operation and as such can provide me the correct coordinates.
Here's my implementation so-far: http://www.scriptorama.nl/image/ (works in recent Firefox / Safari ).
However, the bounding box approach breaks down then the transparent rectangle is rotated (CW or CCW) as the resulting bounding box no longer properly represents the proper width and height. I've tried to come up with a few alternatives to detect to corners, but have not been able to think up a proper solution.
So, does anyone have any suggestions on how I might approach this so I can properly detect the coordinates of 4 corners of the rotated rectangle?
I think you can do this with a simple extension to your existing solution: walk along each of the 4 edges of the bounding box, looking for transparent pixels:
In the non-rotated case, all the pixels along each edge of the box will be transparent.
In the rotated case, there must be one corner touching each edge of the box. This will be at the transparent pixel furthest away from the middle of the edge (there may be more than one due to aliasing, e.g. if the rectangle is only very slightly rotated).

Categories

Resources