I have an object rotated around point (0,0). I can't change the anchor point. The rotation is done by another system and I can't influence that. All I have control of is the position of the element (and I can access the rotation value).
Now, I'd like to adjust the element position to make it appear like it's rotating around a specific pivot point.
How it is:
How I want it to be:
I could be wrong (your description honestly isn't great) but it looks to me like you just want to have the anchor point (that you have no control over) in the center of your image. So you just need to know the anchor point, and then calculate, probably, the top-left corner of your image based on the center of it being at the same point as the anchor. If the anchor point is (a,b), the width and height of your image are w and h, respectively, then the top-left corner of your image should go at the point (a - w/2, b - h/2). That is you need to subtract off half of both dimensions.
Related
I have two elements that are supposed to be laid out in a column, but one of them is supposed to rotate as it is meant to visually depict the orientation changes read by an IMU. Since that rotating element is a rectangle, when it rotates it overlaps with the item below.
I have tried using both Column and ColumnLayout elements to see if the spacing between these elements can be kept constant even if the top element takes more space because of rotation, but no luck. I then removed both items from Column and tried binding the y property of the lower element to be h*cos(rotation) + w*sin(rotation) where h is height, w is width, and rotation is the angle of rotation in degrees of the top-most element. This results in the second item moving up and down pretty wildly on the screen instead of smoothly following the rotation of the first element.
What can I do to achieve the desired effect?
I have a question about icon property including anchor, anchor Origin, offset, offset Origin. because the open layers web didn't give more explanation and it confuses me, when i change anchor or offset, they both can change icon position, and offset and size both can cut the icon, and what does Origin mean, those properties confuse me for a long time.
Thanks for any help in advance.
anchor: specifies where the "tip" point of the icon is. To use mouse pointers as an analogy, standard arrow has its anchor on the top-left corner, a cross has the active part exactly in the middle, etc. OpenLayers allows you to specify that via a vector between [0,0] and [1,1] (e.g. [0.5, 0.5] is in the middle, etc.).
anchorOrigin: which part of the icon should the anchor be applied from. Default is top-left, meaning that the top-left corner would be used as a point of reference if anchor is to be applied. I'd say that it's probably least confusing to ignore it and go with the default, only modifying anchor.
offset: if you only want to use a part of your input image as the icon (because, for instance, there's some unnecessary margin), you can shift the active area by [x, y] pixels
offsetOrigin: which point of the icon should be used as the point of reference for the offset property.
Note that if you use offset then it makes sense to have a look at size.
I am using Compose.jl, and by default it seems that (0,0) corresponds to the top left corner of the image. Is there any way to change the coordinate system within a piece of code such that (0,0) is instead the bottom left corner of the image, and increasing the y value moves up, not down?
To set up the coordinate system use the UnitBox, by default the origin is top-left (0,0). To move the origin to bottom-right and fix the height and width to say |1| try this, UnitBox(1,1,-1,-1).
Every time I create a sprite to use as css background-image, I have to crunch the math and remind myself how to remember the X and the Y coordinates in pixels. How can I remember it or see it visually to keep it straight?
I came up with this graphic, hope it's helpful to someone else as well.
Think 'Y' rhymes with 'SKY' so thats your top measurement (distance in px) from the top. That leaves 'X' as the remaining distance (distance from left in pixels)
When I say distance from left and distance from top, I am referring to the distance in pixels from the side of your overall image to when the part you want to show, begins.
I usually keep the images anywhere on the Sprite sheet and then check out there co-ordinates by clicking on each graphic element in Fireworks(i use fireworks) and then negating the co-ordinates. For eg:if an element is at x=23px and y=20px, then in the CSS, i use background-position:-23px -20px. This always does the work.
I have a rectangle of any arbitrary width and height. I know X,Y, width, and height. How do I solve the upper right hand coordinates when the rectangle is rotated N degrees? I realized if it were axis aligned I would simply solve for (x,y+width). Unforunatly this doesn't hold true when I apply a transform matrix on the rectangle to rotate it around its center.
It's usually easiest and fastest to let Flash's display code do these kinds of things for you. Create an empty Sprite and put it inside the rectangle's display object at the corner you want to track. Then, find the location of that sprite in the coordinate space of your choice:
var p:Point = new Point(0,0);
myRectangle.myCornerSprite.localToGlobal( p );
someDisplayObject.globalToLocal( p ); // for a coord space besides the stage
This gets you out of making any assumptions about the rectangle's design (i.e. registration point), and works even if the rectangle should be skewed or scaled as well as being rotated. Plus, this will be much easier to implement and maintain then a mess of cosines and whatnot.
(Note that the code above assumes that "upper right" refers to a specific corner - if you want to examine whichever corner happens to upper-rightmost at the moment, I'd simply add do the same thing with a sprite at all four corners, and pick whichever is to the upper right in global coords.)
You just have to calculate the point on a circle for the given radius. The center of your rectangle will be the circle's origin and any corner will be a point on the circle's circumference. You need to use trigonometry to calculate the new point using the rotation. I don't have time right now to explain all this, but here is a link to a decent 2D Javascript library I've used in the past and which should give you everything you need (bearing in mind that the math is virtually the same in Javascript and ActionScript) to work it out for yourself.
http://jsdraw2d.jsfiction.com/viewsourcecode.htm