I'm working on openlayer3 map, i had draw one bbox on map, now i want to find height and width of this bbox. Please let me know how to get this.
I had already tried map.getPixelFromCordinate but not able to get the size of it.
Yellow color border is bbox, for which i want height and width.
Please help me out.
For getting heigh&width of bbox you can follow this way.
1) pass one by one coordinate to map.getPixelFromCordinate(), this will returns pixels.
2) subtract two pixels for x coordinate as well as y. this will be height and width for that zoom level.
Related
I am trying to figure out a way to get actual width and height of point feature. I.e., the image + text and not just the latitude / longitude of the geometry.
So far, I learnt that I could get coordinates by using the following code:
feature.getGeometry().getCoordinates();
But this gives me the exact coordinate where the feature was added but what I want is the width and height of the feature after it has been rendered. I.e., height = height of image + height of the label.
I am doing this to start wrapping texts when two feature are very closes to each other.
to get the height and width of an icon of a point in openlayers you can use:
feature.getStyle().getImage().getScale()
feature.getStyle().getText().getScale()
I must mention the fact that if you have not specified scales for the text and for the icon in the style, you will receive undefined
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've already asked this same question months ago, but no one was able to answer me, even after making a fully functional example on Plunker, then, I am going to ask it again, and yes, I still have the same problem.
My problem: find the centre of an element who have some rotation in it, after resizing it, to use it as the new pivot of rotation.
In my practical example, it is possible to see the problem in action; I have created two circles to show the problem better. After rotating and resizing the element, it's possible to see how the red and blue circles are apart from each other.
Blue Circle: the "correct" position of the centre, achieved by setting the cx/cy coordinates as the calculated element centre, plus, applying the transform rotate in it. The transform translates the circle to the correct position.
Red Circle: same as the blue circle, minus the transform rotate, these values are the ones used as the rotation pivot for the transform rotate().
My assumptions until here: By applying the transform rotate() in the blue circle, I'm considering the rotation angle in the calculated centre, so all I have to do is replicate the matrix calculations made by the rotate() function. I'm already doing this with the four handles that the user can click to make a rotation, what could go wrong?
My goal: Resize an element with rotation keeping the pivot of rotation in the centre.
I think this answer gave me some info, the math here helped me with the rotation handles starting position, but still, I can't find the right way to calculate the new centre after the resize.
The example was made using D3js + AngularJS v1. I work actively with both, but I am new to the geometry math world.
Again, this is the project on Plunker.
To get the centre of the transformed and rotated element, the most accurate way would probably be to get the browser to calculate it for you.
First create an SVGPoint object to hold our original centre point.
var centre = svg.createSVGPoint();
Initialize this point with the centre of the original object. You can get that by calling getBBox() on the element, and performing a smiple calculation.
var bbox = obj.getBBox();
centre.x = bbox.x + bbox.width / 2;
centre.y = bbox.y + bbox.height / 2;
Next, get the transform matrix from the transform attribute of the transformed object
var matrix = transformedObj.transform.baseVal.consolidate().matrix
Now we can transform our SVGPoint object with this matrix.
var transformedCentre = centre.matrixTransform(matrix);
After this, the x and y properties of transformedCentre should be your transformed centre point.
This should work, but I haven't tested it.
Right now, I'm struggling to convert the x and y axis position from a marker on a scatter graph to pixel position relative to the graph. My goal is to add an html element outside of the graph, and position it exactly above the point.
I checked this forum thread here: https://community.plot.ly/t/how-to-customize-plotly-tooltip/332. There, I found about the l2p() function, which seems to help a lot. The returned x/y pixel coordinate seems to be on the right path, but there's a huge offset between the returned coordinate and the real coordinate of the point on the screen. Here's a quick demo:
http://codepen.io/diegoliv/pen/NdWKWj
(check the position of the red dot on the screen, it always has the same offset for both x / y axis).
I tried this code with several data sources, and seems that the offset varies for all of them.
So, I'm suspecting that the returned result from l2p() and similar functions (like d2p()) are not relative to the root svg element, but is relative to something else.
How can we calculate this offset so we can use it to calculate the exact x/y pixel coordinates on the graph for the red dot? OR, is there any other better approaches to get these coordinates?
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 ...