I have a little question, I don't understand what does it mean in css file
(100% - 60px) / 2) = ?????
Thanks for help
(100% - 60px) / 2) = ?????
in CSS the syntax to this expression will be :
calc(calc(100% - 60px)/2);
which means :
let's suppose we are talking about a property such as width, then for the current element in which we are writing this CSS, its width will be equal to px value of(100% of parent width) minus 60 px and its output divide by 2, then the result will be converted back to % and that will be the %value of width of Current element.
and the other way :
(100% parent width) = X px;
X px - 60 px = Y px;
(Y px converted to %) = Z %;
z % / 2 = result in %;
I saw an example that uses the following to create a point that will be used to centre a window in Qt:
x = (screenWidth - WIDTH) / 2;
y = (screenHeight - HEIGHT) / 2;
Provided that screenWidth and screenHeight are found using the width() and height() functions respectively of QDesktopWidget.
How does the preceding code centre the window? Yes, I know it centres the window, but couldn't understand it from a calculation point of view.
Thanks.
First calculate the total amount of 'extra' horizontal space around your window:
extra_space = screenWidth - your_window_width
now, spread that space at left and right:
left_space + right_space = extra_space
the space at both sides should be the same:
right_space = left_space
==> 2 * left_space = extra_space
==> 2 * left_space = screenWidth - your_window_width
==> left_space = (screenWidth - your_window_width) / 2
that's your x. The same goes for the y coordinate.
I have a width: 240
I have aspect ratio: 2.40
I need to get the height based on those two variables. What's the formula?
Definition of the ratio:
ratio = width / height
Formula:
height = width / ratio = 240 / 2.40 = 100
example of calculating 2:40 . using javascript programming language.
var width = 240 ;
var rat1 = 2;
var rat2 = 40;
var ratio = width / rat1;
var calculated_height = ratio * rat2;
This is very programming related but a somewhat non-programming question. I am performing image scaling in a web based application and I need to maintain my image relative to a fixed location even though it scales anchored by its top, left corner. Hope the graphic make this possible.
The idea is that C is a fixed location that I want to maintain as my scaling origin rather than B which which is the current css behavior. C may or may not be within the actual image. So as the image scale, B needs to move relative to C. Example: if the image was scaled 50%, then B would move 1/2 the distance to C. If the image grew to 200% of its size, then B would move twice the distance away from C.
Ultimately looking for a formula for x & y for B given the location of C and a scaling factor for the image. Not sure the size of the image needs to be part of this but I have it if needed.
Thanks for any help!
Things I know:
I know the width and height of the
image rectangle.
I know the offset of B from A.
I know the offset of C from A.
I know the scale factor in percent of the image.
Effectively, you want to treat C as the origin, and just "move" B by the scaling amount. By treating it as a vector from C to B, and scaling it by the amount in question, you can do this fairly easily.
newBx = Cx - (Cx - Bx) * scale;
newBy = Cy - (Cy - By) * scale;
For example, with a scale of 0.5 (50%), this becomes:
newBx = 100 - (100 - 50) * 0.5
= 100 - 25
= 75 // 1/2 the distance to C
newBy = 100 - (100 - 25) * 0.5
= 100 - 37.5
= 62.5 // 1/2 the distance to C
With a scale of 2 (200%):
newBx = 100 - (100 - 50) * 2
= 100 - 100
= 0 // 2x the distance to C
newBy = 100 - (100 - 25) * 2
= 100 - 150
= -50 // 2x the distance to C
First you need to calculate the distance from B to C, then you just change that to scale, and that is where the new B is relative to C:
newB = C - (C - B) * scale
As you want the coordinates, it's the same function for x and y:
newBx = Cx - (Cx - Bx) * scale
newBy = Cy - (Cy - By) * scale
(The scale value used is not percentage but a size multiplier. An increase in size by 50% gives a scale of 1.5.)
So you want point C in the image which is currently at (C_x, C_y) to remain at the same position after scaling the image by a factor of s?
New position of C, say, C_new = (s*C_x,s*C_y).
And you want to move the image so that C_new = C.
Which means you'll have to shift B = (B_x,B_y) by (s*C_x-C_x,s*C_y-C_y), or the new origin of the image, say B_new is:
B_new = (B_x + s*C_x-C_x, B_y + s*C_y-C_y)
So now you can display the scaled image at B_new --- and C should remain fixed.
If I understand the problem:
X(b) = X(c) - Width*(1/3)
Y(b) = Y(c) - Height*(3/4)
The formula seems simple enough, but your sample image can't get any larger than 133x200 (scale = 133%) before it overruns Y=0 (which I assume is your northern limit).
If you want to stop it from moving past Y=0 or X=0, and push-out further to the south and east once it reaches either limit, one approach might be:
IIF(Height > 133, Y(b) = 0, Y(b) = Y(c) - Height*(3/4))
IIF(Width > 450, X(b) = 0, X(b) = X(c) - Width*(1/3))
I think scale should be converted to height and width, instead of using scale as a variable in these formulas, since your original image could be any size (assuming they're not always going to be 100x150 per your sample)
dave
here's a C# snippet that is tested to work:
void Main()
{
Application.Run(new form1());
}
public class form1 : Form
{
static Point C = new Point(100,100);
static Point origLocB = new Point(50,25);
static Size origSizeB = new Size(150,100);
Panel Rec = new Panel()
{
Left = origLocB.X,
Top = origLocB.Y,
Width = origSizeB.Width,
Height = origSizeB.Height,
BorderStyle = BorderStyle.FixedSingle,
};
NumericUpDown nud = new NumericUpDown()
{
Value = 1M,
Increment = .01M,
DecimalPlaces = 2,
Dock = DockStyle.Bottom,
};
public form1()
{
nud.ValueChanged += NumericUpDown_ValueChanged;
Controls.Add(nud);
Controls.Add(Rec);
}
public void NumericUpDown_ValueChanged(object sender, EventArgs e)
{
Rec.Location = new Point(((int)((origLocB.X - C.X) * nud.Value + C.X)),
((int)((origLocB.Y - C.Y) * nud.Value + C.Y)));
Rec.Size = new Size((int)(origSizeB.Width*nud.Value),
(int)(origSizeB.Height*nud.Value));
}
}
it really just echo's #Reed's Answer
Here is pseudo-code of how I setup an array representing the MandelBrot set, yet it becomes horribly stretched when leaving an aspect ratio of 1:1.
xStep = (maxX - minX) / width;
yStep = (maxY - minY) / height;
for(i = 0; i < width; i++)
for(j = 0; j < height; j++)
{
constantReal = minReal + xStep * i;
constantImag = minImag + yStep * j;
image[i][j] = inSet(constantReal, constantImag);
}
Thanks!
Here is pseudo-code of how I setup an array representing the MandelBrot set, yet it
becomes horribly stretched when leaving an aspect ratio of 1:1.
xStep = (maxX - minX) / width;
yStep = (maxY - minY) / height;
Aha! It's because you must keep the same aspect ratio both for the image you will draw and for the region of the complex plane you want to draw. In other words, it must hold
width maxX - minX
---------- = ---------------------
height maxY - minY
(It follows that xStep == yStep.) Your code probably does not enforce this requirement.
Make sure your casts are all correct. xStep and yStep might be the products of integer division instead of the expected floating point division (if that's C# in your sample, it would require some explicit casts to work correctly).
It probably has to do with how you are displaying the image array. You use the width variable i as the first index, but usually the first index should be the slowest changing, that is, the height.
Try changing the last line to image[j][i] = ...