I've used konvajs to create a full screen interactive underground railway map, on each line you can click on a station which pops up a speech bubble with info about the station.
I want to scale up and move the stage so the bubble is positioned in the center of the screen for the life of me I can't figure it out. I already have scaling from center and mouse point scaling.
Any ideas where to start?
Related
Currently X3DOM handles camera movement like all scene is in a sphere, dragging mouse left to right moves the sphere (thus the scene) around the center of that sphere, like this.
Can we change this behaviour like in Blender's, as the same left to right dragging rotates the scene around Z axis (in other words, changes the azimuth without changing the current elevation) and dragging from up to down changes the elevation, without changing azimuth, like this one?
There are some navigation modes available: https://doc.x3dom.org/tutorials/animationInteraction/navigation/index.html. However I think you will have to create your own navigation mode if you want to have exact behaviour as in Blender.
For example you could activate the "Turntable" mode adding the following to your scene node:
<NavigationInfo type= 'turntable' ></NavigationInfo>
You can also find some discussion regarding more control over the navigation on mailing list and within the issues of X3DOM:
https://github.com/x3dom/x3dom/issues/454 and
https://github.com/x3dom/x3dom/issues/486
I was trying to create a tic-tac-toe-like game but this time the board is a collection of hexagons in a rhombus shape. See image below:
Each hexagon is an image:
And each image has its own event listener. I am having problem with the clickable area, every time I click the lower two hexagons from the top. The top hexagon receives the tap event. I suspect that its because the PNG image has some portion occupying the lower two hexagons. Please give me recommendations.
I have chart images that are conical projections. Whenever the chart position moves, I need to rotate the chart. Imagine viewing a globe from above. The change in rotation is generally less than 1 degrees for a full screen of scrolling.
I am currently doing this in an image view within a scroll view, redrawing the images when the position changes. Any small change in position requires a complete redraw.
Is there a way to have IOS rotate the images within the layer without having to redraw them.
I am imaging something like in the maps app where you can scroll-rotate your course.
Another way of looking at it would be to have something like a scroll view that can scroll up/down or rotate its contents around an axis that may be way off the top of the screen.
I'm looking for a way to overlay the iOS maps with a grid. The complete earth needs to be divided into squares. The location of the user doesn't effect the placement of the squares (In other words; the squares are always placed the same. On every iPhone, no matter where the user is).
I Looked into MKOverlay, but I've never used this so it's very new to me. Also, when zooming in/out should effect the overlay. It's very important that the squares are always covering the same area on the map (For example; A square should be 100mx100m in real world, when you zoom out, the square should cover the same 100x100).
Is there anybody that can point me in the right direction?
Is it possible to draw the grid from een .xml? Example given; On .XML is holding all squares with their coordinates on the map. When the user loads the map, the 100 squares around the user are loaded.
I have a globe, similar to http://mrdoob.github.com/three.js/examples/webgl_trackballcamera_earth.html.
My globe has some spots on different locations (f.ex. Paris, Rome or London). Whenever one of these spots come into view, a popup window with additional information to that location should popup appear, and again disappears when that spot rotates out of view, quite similar to http://workshop.chromeexperiments.com/cloudglobe/.
You need 3D coordinates of those points and you need to transform(rotate or whatever) them with globe. Then use this code http://www.opengl.org/wiki/GluProject_and_gluUnProject_code to get screen space coordinates of those points. After that it is simple question of HTML, CSS and some javascript. You know where they are on screen so, for example, you can put some absolute positioned divs with text. But you will need to check on which side of globe those spots are - use rotation phase of the sphere or z-coordinate of the point or simple do color-based picking to see if this spot is visible.