calculate width and height of a scaled div - javascript

I am scaling (resizing) a div on mousemove, I am also maintaining aspect ratio of the div. I can scale it as I wanted. I need to calculate the width and height of a scaled div.
Suppose if I scaled a div by some value d in picture, I need to calculate the width and height of div.
Also the div may already be in a rotated position, I have the angle as well.
I dont want values of getBoundingClientRect().
I think the problem is more mathematical.

Related

Calculate the width of a rotated div based on window height and window width and desired empty space

I need to calculate the width of a rotated div using only the window height and width, so that it only leaves room for an empty triangle in the top left and the bottom right of the webpage.
Something like this (red part is the rotated div):
The problem I have is that the calculation for the correct width needs to work for every window width and height combination. I am convinced this is possible using trigonometry, but it's been quite a while since I actually worked with sin/tan/cos/etc. and so far nothing I tried really worked, so I need some help/pointers.
To summarize what I want to achieve:
There should be an empty triangle top left with an angle of 55 degrees and a height of 150px;
There should also be an empty triangle bottom right with the same dimensions as above
There should be a div that gets rotated like this:
transform: rotateX(45deg) rotateZ(45deg);
transform-origin: top left;
The only thing that should be changed about the rotated div is the "width" css attribute. This values should change depending on the window height and width (these are the only variables).
I have tried multiple things, but I just can't figure it out. Here is my lastest attempt (try changing window size to see the problem):
https://codesandbox.io/s/relaxed-shtern-qphkj
As you can see I managed to always have the exact same top left triangle regardless of window height and width. The problem is the bottom right triangle, that either gets overlapped by the rotated div (aka rotated div is too wide) or the empty triangle gets too large (aka the rotated div isn't wide enough).
Any ideas or pointers would be appreciated.

Container div of map scaled, map.invalidateSize() doesn't work

I have a div that contains several elements as children
<div id="container">
<div id="map"></div>
<div id="el1"></div>
<div id="el2"></div>
...
</div>
The container div is set to be a certain size, 400px x 600px, and then a transform scale function is applied when the window is resized. This way everything maintains its aspect ratio and all text in the children stays appropriately scaled.
This issue comes to the map tile size. They are set at 512px but are being scaled by this transform which causes tile gaps and blurriness. I used map.invalidateSize() but the issue is it still sees the containers height as it's original value. For example say it had it set to 100% height and width of its parent. Before and after the scale is applied, the height and width values both read 400 and 600 which means .invalidateSize() is calculating off this, rather than the scaled value. In the leaflet docs the function getScale() is mentioned, could this work somehow? Is there a way to pass the map its scaled containers width and height? I want obviously the tiles to be be 512 no matter the size of its container's scale
TLDR:
Using a scale transform on the container of a leaflet map makes it miscalculate its width and height

Get x max for svg viewbox

I have an svg element, where height and width both equal 100%, with a defined viewbox attribute. The svg contains a range of polygon objects. On clicking a polygon, I want it to expand to fill the entire svg (read: the entire screen).
I can access the svg element dimensions and resize the polygon accordingly, but due to the viewbox attribute, plotting the width comes up short.
Is there any way to calculate the x dimension within the viewbox which corresponds to the far right edge?
The maximum X value you want will be the maximum X of the viewBox, which you can calculat by adding the viewBox minX + the viewBox width.

Div expanding to fit content even when width and height explicitly set

If I set a div's dimensions to be 100 by 100 pixels using $.attr(), and set a canvas within it to be 150 by 150 pixels, again using $.attr() to avoid stretching the canvas, the div automagically expands to fit its contents. Why is this, and how can I make sure the div cuts off the canvas? I have overflow: hidden on the div and want to use it to display only a portion of the canvas. However, all of the canvas is displaying.
Here's a fiddle of my problem.
Set the CSS size of the container and the element size of the canvas:
$("#container").css("width", 100);
$("#container").css("height", 100);
$("canvas").attr("width", 150);
$("canvas").attr("height", 150);
width and height are not valid style attributes, and certinaly not just numerical ones.
Use width() and height() or css() to set inline style properties. Can pass numeric value representing pixels to all 3
DEMO

How to create CSS/JavaScript circles grid

I need to do something like this:
This may look quite easy, but there are some requirements:
- the width of the containing div should depend on the text length (is it possible at all in CSS?)
- all circles should be positioned randomly - this is the most diffucult part for me.
As I'm using border-radius for creating circles (setting height, width and border-radius of 50%) I try to create some kind of grid in JavaScript where I iterate through each element and get its dimensions. Then I get the position of previous element (if any) and add them to the current element dimensions. Additionally, adding some margins will help avoid collisions. Is it correct approach?
I'm just looking for a suggestion how to solve my two issues.
Circles that scale based on size of content.
This is something you will need to solve first, because you wont be able to place them anywhere without first knowing their dimensions.
Naturally the size of a DIV expands first by width, then by height. That is, the maximum width of a container must first be utilized before moving on to the height constraint. Because of this, making a circle scale with equal radius may prove to be quite difficult without using a relative averaging.
Relative averaging is finding the average dimensions of your height / width based of the exhisting area of the contianer bounding your content. For example:
The width and height of the DIV bounding your content can be detected with javascript. Let's say youve discovered those properties too be 200px x 20px respectively.
Your total area is width * height so 4000px; But we are trying to acheive a square so we can apply rounded corners and form a rounded circle. We want to find dimensions of a rectangle that will be equal to the same area and then apply those new dimensions.
To acheive the same area with an equal width * height you can do something like:
√ 4000 = 63.2455532
Thus: 63.2455532 x 63.2455532 = 4000
Random placement of DIVs, and avoid collisons between DIVs.
After finding dimensions, you will be able to use a rand on your (X,Y) coordinates for the placement. Push these coordinates and radius onto an array. Use recursion too place the remaining circles on collsion failures. A collision failure would come from an element that has overlapping (X,Y)+radius relative too elements in the array that were pushed successfully.

Categories

Resources