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.
Related
Questions like this, this, this, this, and this on SVG scaling did not help.
What's the best way to scale font sizes when scaling SVG documents?
Assume an original SVG document of 500x1000. To fit into our design viewport, we scale the document to 250x500 and allow users to do some editing like repositioning and changing text. When editing is done, we scale back to 500x1000 before exporting as a PNG image.
Currently, we manually recompute the font sizes with each scale. If the font size was 20 at the original 500x1000 size, we change the font size to 10 when scaling down to 250x500.
We're leery of using the scale transform attribute as users may reposition or rotate elements while editing the 250x500 version.
We need the 500x1000 version to look proportionally like the 250x500 version.
Is there a better way to scale font sizes? Ideally, we could use percentages for font sizes like with an element's width and height, but this doesn't work.
Or is manually computing and setting the font sizes the best way?
Using javascript you can change the font size accordingly
document.getElementById('svgID').style.fontSize = "25px";
If I resize the browser so that the height is smaller, the picture stays perfectly scaled and in the right place. However, if I resize the browser so that the width is smaller, the pictures move and it doesn't not scale properly.
I'm using the perspective transform on the second container that will contain the image:
transform: translate(-50%, -50%) perspective(1000px) rotateY(50deg);
Example: https://jsfiddle.net/a7kw47pg/1/
If I create an html file with that code and run it on my browser, I can't see the first "t" on the watermark. However, when I resize the width of the browser so that it's smaller, I am able to see the "t". I want it so that no matter what size the browser is, I will not be able to see the "t" (basically the rotated picture with the perspective to stay locked on that exact spot).
The reason why it scales differently is because all the original div positions are scaling on a proportional basis while the transform perspective changes on an absolute basis. The perspective value can be thought of as the number of pixels of distance from the viewer's eye to the screen. Any 3D rotation will of course make your image smaller (in this case it's only horizontal because you've only rotated about the vertical axis). When your imaginary eye is a fixed distance from the screen (in this case 1000px), then you see a smaller relative perspective-effect when the image is small and a larger relative perspective effect when the image is large. (Imagine standing 1 meter away from a huge building - the perspective effect is crazy. But now imagine standing 1 meter away from a little 1-cm cube - it basically looks the same as it does from 1km away)
In order to keep the horizontal size of the image constant, you need to dynamically modify the perspective distance as the window size changes, such that you keep it proportional to the horizontal size of the containing div.
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?
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...
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/