I use the KineticJS getIntersection() function to dictate whether a click/tap is made on an element from one of a few layers in my canvas, and it works fine as long as I don't move the canvas or zoom in. Once I do either of those things, it seems like the hit graph gets messed up. Anyone dealt with anything like this before?
Thanks in advance for any help.
Related
I am using threejs (r73). I use a PerspectiveCamera. My goal is to implement mouse interaction. For that purpose I want to use
TrackballControls.js . But I want a slightly different behaviour.
I want to rotate around the point that the user picked on the screen
I want to zoom in direction of the mouse position
For the second point I already found a "solution" at stackoverflow. The zoom works, but when I change the target vector of the control, panning and rotating does not work any longer.
Can anyone provide such an modified implementation of TrackballControls or help me with that?
EDIT
With the applied "solution" panning still works but rotating doesn't.
The idea from https://stackoverflow.com/a/16817727/2657179 also does not work.
Okay, I decided to finally just port everything into jsfiddle because I am at the point where I cannot get this to work.
Here is the link: https://jsfiddle.net/d6wwbo4f/3/
Move around a bit, and you should be able to go under and around those tiles and move freely around the World Map.
The problem is, when the user clicks on a tile strip (or close to it), the .GameWorld's event listener gets the target name of the tile you clicked on and uses its offset. This is bad. I am trying to make it so the .GameWorld e.target is always the .GameWorld's target... Irregardless of what you click on inside the .GameWorld class. If that make sense.
I'm trying to get those tiles to have a background image effect (that cannot happen because my maps are over 3000x3000 in size and I would have some huge images for users to download.. :P
Edit: At line 19 in the Javascript Window on jsfiddle is where I detect the issue, but just not sure on a solution..
Edit2: I forgot to add some things for Firefox and EI. Only working in Chrome atm.
If you do not need to support IE <= 10, the easiest solution will be just to add:
.GameScreen img {
pointer-events: none;
}
to your CSS.
I am working on a map that is divided into 800x800 150 pixel tiles. These tiles are contained within a jQuery draggable wrapper, which moves the contents of the tiles around inside the parent to achieve a Google Maps style dragging effect. The top left corner is 0,0 and the bottom right is 799x799. I am looking to replicate Google's tiling effect where the user can drag to the left or top of the start point or the right or bottom of the end point and see the tiled (repeated) contents of the DIV in a seamless manner. Using Clone is not an option as it creates duplicates of an already very large (albeit not yet optimised) source which seriously hampered the load times of the page when dragging was performed.
I could best summarise this by saying I need the map itself to have the visual effect and user experience of looping endlessly, but actually only using one instance of the map source. The resulting effect would not be too dissimilar to the repeating background of an image on a page, except with the contents of the map DIV and not an image. When the user drags the map left of anything on the 0 X Axis, it should display X 799, X 798, etc.
I have not had any luck searching for a solution. Is such an effect possible? If so, what would I need to use to achieve it? I am content with simple answers to point me in the right direction; I do not expect somebody to produce a working example that I can cut and paste. Not afraid to research and experiment myself, my problem is I really don't know where to start. I have plenty of experience with Javascript and jQuery but I've never had to do anything quite like this.
How do I prevent a user from seeing a certain parts of the page. My goal was to make a huge maze within the browser (so big that the path is big as the width of the browswer screen); the user has to navigate using the scroll bar or any other scrolling method until they find the end of the maze. Making the maze is not the challenge, but to prevent the user from crossing over the boundaries is where I am having trouble.
My thought process is to make objects/areas on the page that block the user from continuing to move in that particular direction. Maybe the user can see 50px of the block/area before he can not go any further? I have never seen this done and I was curious to know if this is even possible.
Thanks in advance. Any help or advice will be appreciated.
Maybe that won’t be that answer you were looking for, but if you have some experience in graphics, you can try to use three.js library to generate the maze with canvas or webgl. You can use point light to lighten only small part of the maze. Other part can have something like “fog of war”.
If you are not interested in canvas/webgl, then you can try to use an overlay png image with transparent hole in it. Width and height of the image has to be screen.height*2 x screen.width*2 (not sure about that, but that is how I see it). That image should be on top of whole maze. It’ll hide whole maze except for that under transparent area. And your starting point should be in the center of that transparent area. Then you need to move that image along with user input (arrow keys, mouse, whatever). Alternatively, you can move maze itself. This way overlay image can have screen dimetions.
These are two option that came to my mind.
I had an idea for a WebOS, but it requires detecting drawn shapes. Ie: I want a user to be able to draw an image, then draw a big box around the whole image. Then the user can drag that box by the grabbing the border, and moving the whole image around. This requires that I be able to detect when such a box has been drawn, and turn it into a Rect type. Anyone have any pointers or tips on how to do this? I don't even know where to start.
There are Canvas functions for getting the pixels in a rectangle. But these functions do not work in IE (even with excanvas.js). Is that what you want to do?
You can attach mouse events to a Canvas, or to a div containing it.
If you could explain what you're trying to do exactly, I might be able to offer more help. If I understand you correctly, I think you could you what you're talking about if you don't care about Internet Explorer support.