Basically I want to turn this:
Into this:
Tried diff = actual_row_width - max_row_width / number_of_items;, then substract diff from each rectangle but it doesn't seem to keep the ratio :(
The diff is a weighted sum in regard to the width of each of the items. You can't just substract the same amount from every item, but you should divide it according to the relative width of each. Try, for each rectangle:
diff = (actual_row_width - max_row_width) * actual_rect_width / actual_row_width
You could also reason in percentages and calculate each new rectangle width with the following formula:
new_rect_width = (actual_rect_width / actual_row_width) * max_row_width
with (actual_rect_width / actual_row_width) being the percentage of the width of the row each rectangle occupies.
Given
W = width
H = height
You want
NH = New height
Based on this:
R = Ratio = NW / W
Then
NH = New height = H * R = H * ( NW / W )
Related
I am working on a wheel chart design, I need help in positioning the text on the 360 wheel.
The wheel have 12 sections, each one of 30 degree. The text's offset from the circle outer line should be equal (or similar at least). like in the image below I have mocked up what I need in final result.
So far, What I have tried is splitting each section into separate variable e.g.
$section1_startX = 50;
$section1_endX = 70;
$section1_startY = 310;
$section1_endY = 480;
and then to place text
imagettftext($im, 15, 0, $section1_startX, $section1_startY, $black, $font, "05");
but this is to find/calculate pixels of each line I need to place.
I am sure there is better, dynamic and smart way to put the text at x,y positions based on its values in 360 circle.
can you please help me regarding?
Hi I think you want to find a Point on a given circle with a given degree. Here is a function for calculating point on a circle. I think you can convert this to any other language easily.
public static PointF PointOnCircle(float radius, float angleInDegrees, Point origin)
{
//radius -> Radius of Circle & Origin -> Circle Centre.
// Convert from degrees to radians via multiplication by PI/180
float x = (float)(radius * Math.Cos(angleInDegrees * Math.PI / 180F)) + origin.X;
float y = (float)(radius * Math.Sin(angleInDegrees * Math.PI / 180F)) + origin.Y;
return new PointF(x, y);
}
I have a watermark on to the image and i want to create its shadow using php GD.how can i calculate the distance that how far is the shadow and at what position if i have only the angle and distance from the watermark
for example
$shadowAngle = 90;// in radian
$shadowDistance = 100// in % means 100 percent away from watermark
$watermark_x = 320; //width of watermark
$watermark_y = 320; //height of watermark
$watermark_Pointx = 640; // x of watermark on background Image
$watermark_Pointy = 140; // y of watermark on background Image
$shadow_Pointx = ? // x of shadow on background Image
$shadow_Pointy = ? // y of shadow on background Image
How can i calculate starting points of shadow($shadow_Pointx,$shadow_Pointy) by using $shadowAngle and $shadowdistance
How about this equation:
$shadow_Pointx = $watermark_Pointx + ($shadowDistance/100 * $watermark_x * sin($shadowAngle))
$shadow_Pointy = $watermark_Pointy + ($shadowDistance/100 * $watermark_y * cos($shadowAngle))
By assuming 90 degree will set the shadow on the right side of the watermark, I guess the result should be 960,140..
I know how to resize an image keeping its ratio based on these formulas :
Width Formula :
Orig H / Orig W * New W = New H
Height Forula :
Orig W / Orig H * New H = New W
But i have set a maximum width before the image is resized and a maximum height value too.
So how do i work it with two maximum values ??
Say the max height was 600 and the max height was 100 ??
The answer is probably staring me in the face..
This is what i have just now using just the height.
$image_size = new Image(DIR_IMAGE.'data/signatures/'.$file);
$w_size = $image_size->info['width'];
$h_size = $image_size->info['height'];
$w_new_size = round($w_size/$h_size*100);
$h_new_size = 100;
I guess what i'm trying to say is i don't want the image to go above the set width or set height but it has to keep its ratio.
Some show me the light ??
Let php.net show you the light:
http://www.php.net/manual/en/function.imagecopyresampled.php
Example #2 is doing what you ask for, isn't it?
Hey all i am trying to figure out how to resize an image that has a higher height than width. The normal width and height of the area where the image needs to be displayed is:
width = 1000px
height = 700px
What type of math would i need in order to resize that to the proper width/height above without screwing it?
The test image size is:
width = 1451
height = 2200
I was thinking of doing this:
(700/org.height)
But that does not come up with the correct number of 462.
In photoshop, changing the height to 700 yields a width value of 462.
so you want to scale your image so that it fits as large as possible within a 1000x700 square without stretching it? You could do something like this:
$availH = 700;
$availW = 1000;
$imageH = 2200;
$imageW = 1451;
// you know you want to limit the height to 700
$newH = $availH;
// figure out what the ratio was that you adjusted (will equal aprox 0.3181)
$ratio = $availH / $imageH;
// now that you have the $ratio you can apply that to the width (will equal 462)
$newW = round(imageW * $ratio);
Now you have $newW and $newH which are the new sizes for your image properly scaled. You could of course condense this down but I've written it out so each step is more clear.
Formula to keep aspect ratio when resizing is
original height / original width x new width = new height
Source: http://andrew.hedges.name/experiments/aspect_ratio/
But you want to switch it around to the following I think:
original width / original height x new height = new width
I'm trying to figure out how to write a function that programmatically retrieves a background-color css attribute and creates two outputs (one slightly darker than the background-color, one slightly lighter).
The idea is being able to generate a very basic linear gradient from a single color selection.
Anyone have any ideas?
To scale a color correctly, you have to multiply each RGB value by a proportion. E.g., if your color is #00417b and you want a color that is 125% lighter color then you have to do this:
var dark = {r: 0, g: 65, b: 123};
var light = {r: Math.round(Math.min(dark[r]*1.25, 255)),
g: Math.round(Math.min(dark[g]*1.25, 255)),
b: Math.round(Math.min(dark[b]*1.25, 255))};
Compare the result for yourself: dark is #00417b, and light is #00519A, although it's perfectly valid CSS to describe them as rgb(0, 65, 123) and rgb(0, 81, 154) and probably easier too. By scaling colors in this way they will appear to be at the same level of saturation, something that simply adding or subtracting numbers will not achieve.
Be aware that since values are clamped at [0, 255], if you keep shifting colors, then feeding them back into this process, you can destroy information about the proportion of red, green and blue in the source color. For this reason, keep the original color saved and try to use that as your input each time.
Since your question asked specifically about gradients though, this is how you would go between two color values:
// Suppose you have a container which is X pixels high and you want to insert a 1-pixel tall
// element at each pixel, going vertically
var min = Math.min;
var max = Math.max;
var round = Math.round;
function get_color_for_height(startColor, endColor, height, row) {
var scale = row/height;
var r = startColor[red] + scale*(endColor[red] - startColor[red]);
var b = startColor[blue] + scale*(endColor[blue] - startColor[blue]);
var g = startColor[green] + scale*(endColor[green] - startColor[green]);
return {
r: round(min(255, max(0, r))),
g: round(min(255, max(0, g))),
b: round(min(255, max(0, b)))
}
}
// some psuedo-code using an imaginary framework
for(var h = 0; h < height; h++) {
var div = new Element('div');
div.height = 1;
div.backgroundColor = get_color_for_height(start, end, height, h);
container.insert('top', div);
}
To generate a darker or lighter vairant, a simple possibility is just to add or subtract a fixed number to all three componenents, capping it at 0 and 255/0xFF.