I am using the ariutta svg-pan-zoom library(https://github.com/ariutta/svg-pan-zoom).
I am trying to pan to a specific shape at (x:1000, y:20) when the user clicks a button. I would also like the image to centre at this point.
The Problem I am facing is the point I am trying to pan and centre at goes off the screen.
I am currently using:
panZoom.pan({x:1000, y:20});
but this does not work.
Please see the jsFiddle for more info: http://jsfiddle.net/arjSharma/n6r55dp1/2/
Can anyone help with my problem?
Thanks
I managed to answer my question:
I first pan to point 0,0 using the method:
panZoom.pan({x:0,y:0});
I then get the 'real Zoom' value by:
var realZoom= panZoom.getSizes().realZoom;
To pan and centre at specific x and y, use the pan() method and pass x and y coordinates like in the example below:
panZoom.pan
({
x: -(755*realZoom)+(panZoom.getSizes().width/2),
y: -(240*realZoom)+(panZoom.getSizes().height/2)
});
The '+(panZoom.getSizes().width/2)' and '+(panZoom.getSizes().height/2)' are responsible for adding the offset to the x and y coordinates which ensures the image is centred.
Feel free to ask any further questions regarding my answer.
Related
I want to know the rotation angle from Cesium when I turn the map using ctrl+mouseLeft. Like I did on this image:
I tried viewer.camera.roll but doesn't seem to be right. It's always zero.
Any tips in how I can get that value in 2D and 3D? I would also like to set this value.
Thanks in advance!
EDIT:
I have used the solution suggested and now I'm getting different values (in radians). It works both on 2D and 3D maps.
EDIT2: How to set the rotation to an specific angle
setRotation(angle: number): void {
viewer.camera.setView({
heading: (angle / (180 / Math.PI)) // east, default value is 0.0 (north)
})
};
Based on this doc
EDIT 3:
I'm using the following code to get the current heading of the map:
public getAngle(): number {
return viewer.camera.heading;
}
When I call this function and my map is not rotated, as the image shows, I get the result of "6.283185307179586" radians. I thought it should be zero, because it's not rotated at all. If I move the map around with the mouse (pan) and call the getAngle function again it gives differents results, as "1.4612025367455317e-8" if I move it north. Any thoughts about it? I would like to get the heading of the map.
Thanks a lot!
This value is available from viewer.camera.heading and is expressed in radians. You can twist the camera like this using the twistLeft and twistRight functions on the camera.
I'm trying to recreate some flash shapes that appear on rollover upon a circle symbol. I'm needing to convert flash x and y points to the canvas coordinate grid. I figured out how to convert the circle coord points. However, the info I'm given for the shapes that appear on rollover make no sense to me.
For example, take this rollover point, where the dimensions refer to the registration point (little cross in the upper left):
x = 532.30
y = 30.35
w/h = 19.80
But based off this, the info I get for the rectangle that appears on rollover makes no sense:
x = -7.30
y = 17.30
w = 29.0
h = 16.5
I figured this meant that the rectangle's upper left point was 7.30 pixels to the left, and 17.30 pixels down from the registration point of the circle. Is that right? What origin are these x and y coordinates based off of?
The width and height are completely confusing to me though. The given width is 29.0, but this can't be right. If I get x and y coordinates just using my cursor, its clear that the rectangle is much wider than this:
564 - 521 = 43
43 != 29
Please help me understand the mysterious info box I'm being presented with for this rectangle. I just need to get some vanilla coordinates for it so I can draw it on the HTML5 canvas.
What origin are these x and y coordinates based off of?
These x and y coordinates are based off of the registration point of tab button.
43 != 29
When you work with symbols on a stage, the symbols that you're working with aren't the actual original Library symbol. They're copies that can be manipulated by scaling them, applying color and opacity effects and...
This instance of tab button is scaled, if you open library panel and edit tab symbol you can see the actual size.
UPDATE
after I change width and height of tab button to 19.80:
29*(150/100)=43.5
Please this fiddle I have copied my complete project in it
here if you open the fiddle in the output you can see an image, scribble on the image selecting pen,add text etc(like this perform some functions).then rotate the group using rotate button and then try to scribble you will understand what is the problem exactly.
In me view Problem is I am having a stage and a layer is added to the stage and a group is added to the layer and different elements like lines text etc are added to the group. then group is rotated the i am trying to draw the line based on the mouse position of the stage.But it is not coming correctly because the group got rotated the x and y what we are taking to draw a line is from stage.I need to take the x and y from the group not from the stage is their any way.If hav't understand please ask me or post a reply.
This should get you fairly close: http://jsfiddle.net/k4qB8/24/
// This rotates that added active line along with your group.
// This makes the draw direction correct
activeline.setRotationDeg(0-rootGroup.getRotationDeg());
// Here you'll have to figure a way to calculate how much to move the
// line over so the draw is on the correct spot
// This is as close as I got it
if(Math.abs(rootGroup.getRotationDeg()%360)==0)
activeline.move(rootGroup.getX()-375, rootGroup.getY()-175);
if(Math.abs(rootGroup.getRotationDeg()%360)==90)
activeline.move(rootGroup.getX()-175, rootGroup.getY()+375);
if(Math.abs(rootGroup.getRotationDeg()%360)==180)
activeline.move(rootGroup.getX()+375, rootGroup.getY()+175);
if(Math.abs(rootGroup.getRotationDeg()%360)==270)
activeline.move(rootGroup.getX()+175, rootGroup.getY()-375);
Also, add some more logic for counter-clockwise rotation, as this doesn't work 100%.
I think the real solution would be to just draw on separate layers for each rotation, kind of like this:
if (rotation is 90) : draw on lineLayer1;
if (rotation is 180) : draw on lineLayer2;
if (rotation is 270) : draw on lineLayer3;
if (rotation is 360 || 0) : draw on lineLayer4;
This way you could just rotate the layers which are not drawn on to simulate the feel of rotation.
I need to draw a circle in google Maps V3 but I have 2 coordinates, the center and the outter position. Problem is the API expects center and "radius".
For example:
var myCirclePath = [];
myCirclePath.push(new google.maps.LatLng(18.111111,66.111111));
myCirclePath.push(new google.maps.LatLng(18.223344,66.222222));
var myCircle = new google.maps.Circle({
center: myCirclePath[0],
radius: // what do I put here????
map: map
});
I searched around the web and find a lot of stuff about radians, degrees, sin, atan, and what not... however, I'm not good at math and I'm totally lost.
So, the questions are:
a) What should I put in the "radius:" option?
b) How can I center the zoom around the circle? "Bounds.Extend" will not do it
So, the questions are:
a) What should I put in the "radius:" option?
Use the geometry library computeDistanceBetween() to find the radius (passing in your two points)
b) How can I center the zoom around the circle? "Bounds.Extend" will not do it
Once you have created the circle, you can call the getBounds() method on it to get its bounds
Correct me if I am wrong but isn't the radius the distance between center point and outer point of a circle? I would go with this.
First of all, I would like to say that I'm a newbie in Java3D. Please bear with my ignorance.
I have made an application with Java3D and I have the following problems with zooming.
It seems the MouseWheelZoom behaviour of Java3D moves the object along Z-axis. On the scene my Z-axis is not out of plane so by using MouseWheelZoom , the object doesn't get closer but it get out of screen. Is there a way to set the zoom direction to an arbitrary direction?
I have got around the problem by using MouseWheelListener and changing the viewing platform based on zoom steps. But there is another problem now. As the object gets closer than a certain distance, some parts of the object ( usually the corners) start disappearing so I can't zoom as much as I desire.
Could you please help ?
Regards,
Hassan
Question:
I guess you use an OrbitBehavior for MouseControl like:
orbit = new OrbitBehavior(canvas3d, OrbitBehavior.REVERSE_ALL);
If that is the case then try
orbit.setZoomFactor(-1d);
To reverse the zoom direction (the default zoom factor is +1d).
To your 2. Question:
You have to set a BoundingLeaf on your PlatformGeometry to encapsulate your "viewing area".
Try something like this
defaultBounds = new BoundingSphere(new Point3d(radiusGameMap, 0.0, radiusGameMap),
radiusGameMap * 6.0d);
BoundingLeaf boundingLeaf = new BoundingLeaf(defaultBounds);
PlatformGeometry platformGeom = new PlatformGeometry();
platformGeom.addChild(boundingLeaf);
where radiusGameMap is a double defining the radius of your whole map.