I want to call an event when the current transform value is changed.
In the case of translate or animation, I know that event can be detected with addEventListener, but I wonder how to detect transform.
To be exact, I want to call an event when transform translateX is changed, is there any good idea?
Related
I'm making a kind of drawing thing to learn CreateJS, and at the moment I have the mouse drawing a line. The only problem is, the line is constantly being drawn. What I want is to check every frame if the left mouse button is down, and if it is, then I would draw a new line behind the mouse. Is there any way to do this? I have been looking at the event listeners on the stage but I couldn't seem to get that working. How should I do this?
EaselJS does not monitor or store the mouse up/down value, but rather responds to mousedown/mouseup events. You could fairly easily just listen to stagemousedown and stagemouseup events on the EaselJS stage, and store your own value.
Alternately, you could use these events to start and end draw routines. For example, the pressmove event only fires when the mouse has been pressed on something, and is currently moving.
Hope that helps.
I am wondering if it is possible to attach an onclick event to specific coordinates in a document. Maybe something similiar to "area coords" in an image map that would allow me to create a rectangular or circular area that when clicked on would execute some code. Been trying to find a solution all morning hope someone with better coding knowledge could clarify this for me.
You could attach a click event to the document itself as opposed to any specific element. The event data should contain the coordinates of the mouse at the time of the click (clientX and clientY).
Assuming no other element intercepts and cancels propagation or returns false, the event should bubble up to the document and your data will be there for you.
$(document).click(function(ev){
console.log(ev.clientX, ev.clientY)
})
That will give you the mouse pointer position in the window. If you want it to be relative to the top of the document, you'll need to do some math using the scroll position of the document.
You could also write some code to filter out clicks that do or do not fall within a given set of coordinates.
Short answer: no.
Long answer:
You could probably write a plugin to do this, but I'm just going to explain the functionality.
Basically, you bind to the click event, like usual. Be sure that the element you bind to is reachable.
Then, loop over an array of coordinates, and if the event position fell in any of the coordinates, called the associated event handler.
Edit: If it wasn't obvious, you can replace "a bunch of coordinates" with a function, or more precisely, a mathematical calculation. You could pass an equation to the handler which works with any kind of 2d shape you want.
No, not unless you have an element that occupies these coordinates. Instead, you could bind the event to whatever element occupies that coordinate space and simply check the coordinates of the click in the event object.
I'm attempting to determine the tile that the mouse is currently hovering over in an OpenLayers map. The code that currently is written - that uses a standard Hover handler and simply sends back the event - works in Chrome but fails in Firefox, because an SVG element comes in between the tile and the mouse. I'm sure that something similar could happen in IE with VML.
So, the question is, how does one determine the element that a mouse is over if that element is 'blocked' by another element that is currently the target of that request? Or, is it possible to 're-run' an event using trigger() in another div, and retrieve the new target to simulate the same? Otherwise, it's difficult and inefficient to determine the image that lies at a certain pixel coordinate using OpenLayers.
AFAIK, there is no efficient way to determine which elements are under the mouse; you must get the x/y position from the event (event.pageX/Y) and compare that with the position/size of each element on the page.
I'm not sure but maybe the document.elementFromPoint method can help you, see:
elementFromPoint method
I'm just mucking around a bit with HTML5 canvas and painting. I happened to find this article by Opera that describes well how to set up a simple application.
I would like to extend it so that the user may set up a vanishing point (1 point perspective) that may be used to constrain painting. To allow this I need to figure out a way to define some modifier keys to limit the result (i.e. constraints map as (key=>axis) a=>x, s=>y, d=>z).
Is there some way to check out which key the user has pressed while handling the "mousedown" event?
AFAIK it only will work when the document have focus.
You should add a listener to the body attending for the key press event, when it has triggered, you store it in a variable emptying it afterwards when user triggers key release, an example should be like this :
document.body.onkeydown=function(evt){evt=evt?evt:window.event;console.log(evt)};
document.body.onkeyup=function(evt){evt=evt?evt:window.event;console.log(evt)};
then you only should identify evt.keyCode and act with it.
You could try third party libraries like shortcut.js too.
Mozilla Firefox 3.x seems to have a bug when listening to the "ondrag" event. The event object doesn't report the position of the object being dragged, clientX, clientY, and other screen offsets are all set to zero.
This is quite problematic as I wanted to make a proxy element based on the element being dragged and using of course, clientX and clientY to adjust its position.
I know that there's cool stuff around such as setDragImage in HTML5 but I want to provide a generic abstraction for native DD between browsers.
Faulty code:
document.addEventListener('drag', function(e) {
console.log(e.clientX); // always Zero
}, false);
Note:
This problem doesn't happen on other events (dragstart, dragover) and the mousemove events cannot be captured while dragging something.
I found a solution, I've placed a listener on the "dragover" event at the document level, now I get the right X and Y properties that I can expose through a globally shared object.
The drag event in HTML 5 is not fully functional in todays browsers. To simulate a drag n drop situation you should use:
Add a onmousedown event, setting a var true.
Add a onmouseup event, setting that var false.
Add a onmousemove event, checking if that var is true, and if it is, move your div according to the coordinates.
This always worked for me. If you face any problems, get in touch again, I can provide some examples.
good luck!
I know that there's cool stuff around
such as setDragImage in HTML5 but I
want to provide a generic abstraction
for native DD between browsers.
But why do something like this, aren't there libraries like JQuery & Prototype available for cross browser drag & drop?
Or else if you want to implement a DD library of your own, you can take help of their methods or extend them, as both the libraries are following object oriented paradigm.
This will save much time.