If I had a box 100px wide by 50px high, so the area is 500px squared. what is the formula for calculating the new height and width of the container in pixels if I wanted to increase the overall area by 20% or 50% or whatever?
I'll assume you want to keep the width/height proportional.
If you want to increase the area by 20% (multiplied by 1.20), multiply both the width and height by the square root of 1.20.
Related
I have shapes with integer coordinates of width and height. They can be selected and stretched separately, I want to add the function of stretching a group of selected shapes. For example, as in the Figma editor or in VS Studio on a visual canvas, when we select a set of shapes and stretch them and they stretch proportionally with integer coordinates of width and height. Can you tell me how it works? For example, I have a list of 5 shapes with a width and height of 10px, indents from each other in 1px, I have selected them and pull them along the X axis in the positive direction by 8 pixels, which algorithm do I need to use? Here is an example of how it looks in VS when stretching buttons on the canvas.
https://i.stack.imgur.com/mYOAf.gif
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).
I have created a single jsbin: http://jsbin.com/vokoyisofo/edit?html,css,output
You can see four triangles rendering within one another. Each triangle is 10% smaller than the previous. The containing SVG is 300x300. I would expect everything to render out square but that doesn't happen. I assume there is some sort of screen stretching happening. The space between the bottom borders of each triangle looks much larger than the space between the top tips.
How do I correct for this?
The distance from the top vertex of the outer triangle to the top vertex of the next largest one is 30 units.
The distance from the right hand bottom corner vertex of the outer triangle to the right hand bottom corner vertex of the next largest one is not 30 units. It's √(30 * 30 + 30 * 30) units or approximately 42 units.
That's why the shape is only symmetrical in the vertical axis. It looks skewed because that's how you've defined it.
If you want it to be symmetrical you want the bottom vertices to go in by 30 units in the direction of the centre of the triangle which will mean that they decrease by 30 / √2 units in each of x and y
I have images with unequal resolution in x and y direction. The pixel height is larger than the pixel width. The pixel width and pixel height are saved in Image > Properties.
When I draw an ellipse on the image and try to use the Analyze > Measure tool I get a '0' for both major and minor axis length for the "Fit ellipse" measurement.
I can only get a proper measurement if I remove the scale of the image, or manually change the pixel height and pixel width to an equal number.
I assume this is a bug, but maybe I'm missing something?
As a workaround I was thinking of writing a small macro that saves pixel height and pixel width, then removes the scale of the image, then measures major and minor axis length in pixel and then re-applies pixel height and pixel width to the measurements.
But I can't find the command for reading out the resolution. Any pointers?
The documentation for the Set Measurements... command states in the description of the Fit ellipse parameter:
Note that ImageJ cannot calculate the major and minor axis lengths if
Pixel Aspect Ratio in the Analyze▷Set Scale… dialog is not 1.0.
Your workaround should work, just use the getPixelSize(unit, pixelWidth, pixelHeight) macro function.
For drawing filled shapes like Rectangle, Eclipse need two values width and height (converted from int to float).
There's an enum,
Public enum Sizes : int
{
One=5,
Two=10,
Five=10,
Seven=12,
Ten=15,
}
In terms of drawing a Square of One, should be of width and height of 5. Which is straight forward. However when drawing Oval Shapes and Rectangular shapes above one value isn't sufficient.
Is there a way I could define another float value? So when compared for Ten, it can provide 15 for Width and 10 for Height...
Or does it mean, there should be two enums, one for Width and one for Height?
EDIT to provide more background info:
There's an UI which allows users to create certain shapes.
User inputs are: Shape Type (Line, Rectangle, Eclipse), Points, Size (but this size doesn't exactly reflect the size of the shape. e.g. 10 is a capacity. Capacity 10 must draw 15px Width and 10px height Rectangle/Eclipse).
Line doesn't take Size into account as it is drawn using the Points input. The rest of the shapes do take Size into account. So this is where I need to check the Size(capacity) parameter and issue the correct Width and Height to be drawn.