I'm working on centering the most inner (the red shape) on X-axis to the center of the most outer shape (the black shape), while the red shape keeps its coordinates/position inside its direct parent, i.e. the blue shape.
For example, centering the red shape from this original image (dimensions are shown on the second picture):
should look like that:
Additionally, the blue shape can be anywhere inside black shape, and red anywhere inside blue.
It's basic math :) and I'm having troubles with coming up with a general math formula on how to center the red shape inside the dark one while maintaining its position inside the blue shape. Could somebody direct or explain me how to do this?
NOTE the values (widths) are in pixels and are not accurate.
Just store the distance between the red box and its parent, center the red box and then change the parent by using the stored distance:
let distance = red.x - redParent.x; // storing the distances between the red box and its parent
red.x = black.x + black.width / 2 - red.width / 2; // centering the red box horizontally according to the black box
redParent.x = red.x - distance; // changing the red box parent position accordingly
Related
I have two colored rectangles, both being represented by a 2D array that directly corresponds to their coordinates(ex. [0][0] is the same as (0,0)). Things such as the width, height, and origin of each rectangle are known.
As of now, I want their colors to "blend" in the area they intersect. Detecting if a point is within both rectangles is easy enough, and I have the point's coordinates relative to the origin of my first rectangle as it is the one I am iterating through for color blend checking.
My problem is getting the point's coordinates relative to the second rectangle so I may get that rectangle's color at that point. Here is a visual example of what I mean.
Visual representation of the problem. The black dot is a point on both Rect 1 and 2.
Note that relative to the canvas, the top left corner of Rect 1 is always considered (0,0), and Rect 2 will always appear "on top" of Rect 1.
My idea is to do a simple math equation to get the X and Y coordinates of the point on Rect 2, but so far it has not worked out.
I'm having issues, drawing lines between two circles.
The main issue is that the lines are drawn to the square of the div, not the circle defined with border-radius.
In the code pen below you can see box E is square and the line goes all the way, however, with circle F it does not reach.
It seems if the div aligns with the x or y the gap is less than say directly in a corner.
https://codepen.io/crankd-media/pen/poebQGM
var c1 = new Connector(
{
ele1: start,
ele2: end,
}
);
The line is going to the square of the div, not the circle radius:
The circle will also need to be transparent so can't go to the middle.
I have a map on which there are some circles, each one with a certain radius, and on the page load, I get the position of the user and show it on the map.
At first all the circles are red, so I want to check if the current position of the user happens to be in any of there circles, that particular circle should get green instead of red.
what is the best way to do that?
With Google Maps API, you may use the geometry library to calculate distance between circle's center and the lat/lng representing the position of your user. Then compare it with your radius.
You can do something like this :
var pointIsInsideCircle = google.maps.geometry.spherical.computeDistanceBetween(circle.getCenter(), point) <= circle.getRadius();
Then change the color of your circle if pointIsInsideCircle is true
I have a known rect (grey) the outer parent element that contains an image element (orange). It's overflow is hidden.
I want to calculate the padding required to allow the image element(known width and height) to be rotated to a known angle (for this e.g. lets say 30 degrees).
It has proven to be relatively easy to calculate this if i were able to allow the parent(grey) element to expand to accommodate, but i can't.
create list of 4 image edge points p0,p1,p2,p3
rotate them the same way as the image will be rotated
double a=x-x0,b=y-y0,c,s;
c=cos(alfa);
s=sin(alfa);
x=a*c-b*s+x0;
y=a*s+b*c+y0;
x,y is the point
x0,y0 is center of rotation
alfa is the rotation angle
compute min,max of rotated points x,y coordinates this gets you the bounding box
summary
let (x0,y0) be the original image gray box size (X,Y) from your image
let (x1,y1) be the original image size (xa,xb) from your image
let (x2,y2) be the rotated image bounding box size (xmax-xmin,ymax-ymin) from bullet 3
if ((x2<=x0)&&(y2<=y0)) the image fits so stop
let mx=x0/x2 and my=y0/y2 be the needed scales to fit the image
do not zoom:
if (mx>1.0) mx=1.0;
if (my>1.0) my=1.0;
now select the correct scale m
m=mx; if (m>my) m=my;
now the m holds the scale needed to apply on rotated image to fit the gray area
do not forget to center the image ...
I have a canvas which display a picture that The user has uploaded.What I want to do is to ask the client to give me the width and height between two points that he/she has selected on canvas in cm .For example,The client click on top left on canvas and then select top right .after that he/she should enter the width between those two selected points.
How should I do that?
Sorry for my bad English.
Thanks
Just get the coordinates of your two points.
Let us assume the first point is called A and the second point is called B. So their coordinates would be:
A = (xa, ya)
B = (xb, xb)
So the horizontal distance between A and B would be, |xa-xb|1. And the vertical distance between them would be |ya-yb|1.
If we draw a rectangle using A and B as diagonally opposite points of it, that rectangle's width would be |xa-xb|, and it's height would be |ya-yb|.
|| represents "Absolute Value". See http://en.wikipedia.org/wiki/Absolute_value.