I have two shape at same position, not same color, and when i click over them, i want to fire click event on both, not just the first.
These two shapes are in the same container.
I have tried getObjectsUnderPoint() under stage.on("mousemove"), but this function increase my FPS (60 to 32~, and inside there are just a console.log), So it's not a good solution.
I tried the bubble, the useCapture, but i think it isn't what i want.
I just want to fire click on all element behind my mouse.
If someone have a solution, please.
There are a few points here:
EaselJS objects sort of work like HTML DOM Elements. If an element has a mouse handler on it it will block objects in other hierarchies below it from receiving the event. This is just how it works. The main difference is that if you don't have mouse events, then they are just ignored (like if you set the pointerEvents on an HTML element to none to have the mouse ignore it).
Your idea with getObjectsUnderPoint is what I would have recommended. Running any hit-test logic on mousemove is going to be expensive (mousemove fires a LOT, which is why we give the ability to throttle the typical mouseover check if you enableMouseOver on the stage).
A few things to optimize it:
Ensure you are using mode=2 on your getObjectsUnderPoint, which will only check objects with mouse listeners. This greatly reduces the overhead in checking. [docs]
Instead of checking the stage on your own mousemove event, set a flag to check it on tick. This throttles it to your Ticker FPS at least. You could also set an interval to check it even less often. It can create a little bit of a visible lag, but you can probably find a nice balance.
Reduce what is checked. If you have a container with your clickable elements in it, you can only check that object for mouse interaction.
If your objects are the exact same, you can also just trigger the click manually on the second item.
obj1.on("click", function(event) {
obj2.dispatchEvent(event);
});
I hope those approaches provide you a solution. Let me know if you have follow-up questions.
Cheers,
Related
How to track/listen active dragging event of UI Element in UWP. I added the flat CanDrag=true to enable the drag feature. Using the DragStarting and DragLeave can identify the start and end of drag. But want to get the X,Y coordinate of the UIElement on dragging. Any recommendation to achieve that? I dont want to use RenderTransform for this.
I don't think it's possible in standard Drag'n'Drop flow.
There're few options but they look like a crutch.
You may use manipulations and subscribe to Delta event. That's where RenderTransform comes in.
You may start some time loop and get visual position each frame. (The most crutchy idea)
Try to play wih IsHitTestVisible and subscribe to PointMove of some FrameworkElement behind.
Subscribe to PointEntered and PointExited to the elements you dragging over so they could fire events.
I prefer the first one. It's simple and it's plane.
I have a project where I need to make flash movie as an interactive game. Because, flash is already (or soon will be) obsolete for most of browsers, I've decided this game must be based on HTML5/JS. Because most of the graphics and animations are already done in this Flash movie (and I have its source), I'm developing it using Adobe Flash and CreateJS technology (HTML5 + Canvas + JS). So far, I like this solution pretty much, though I have an issue which I could not solve yet.
The game is a simple drag&drop matching game. The problem I have is shortly described in the question title and I will try to explain it here more detailed:
label.on('mousedown', function() {
//this.image.bg.gotoAndStop(2);
});
label.on('pressmove', function(evt) {
this.x = getStageX(evt.stageX);
this.y = getStageY(evt.stageY);
currentStage.setChildIndex(this, currentStage.getNumChildren() - 1);
stage.update();
});
label.on('pressup', function(evt) {
console.log('Hi! I'm mouseup event!')
this.x = labelInitX;
this.y = labelInitY;
this.image.bg.gotoAndStop(0);
});
Above, you can see simplified 3 event handlers I use. Everything is working fine until I uncomment second line - //this.image.bg.gotoAndStop(2);. When I do this, the pressup event does not trigger mostly, which is rather strange, because some times it does trigger (2-3 times out of 10), so the label sticks with the pointer until I press the button again.
Is this some bug or I simply does not understand something about the CreateJS and its event handlers. I tried different combinations of this. Used click instead of pressup, placing this.image.bg.gotoAndStop(2); inside the pressmove handler. Replacing pressmove handler with the stage.on('stagepressmove', handler). None did not work. this.image.bg.gotoAndStop(2); - this thing simply updates the timeframe (change the background image of the label). I do can change this image programatically (without playing timeframes) and I'm almost sure that the issue will be fixes, though I'd like to understand for myself what is wrong here or what I'm doing wrong with the event handlers.
Another, less important thing, but would be useful to know is why when pressmove event is running, the CreateJS objects stop receiving event triggers about rollover or mouseover? In DOM, by default event bubbling is working until you stop it with stopPropagation. How does it work here with CreateJS? Seems that bubbling is simply turned off here by default. How can I turn it on?
I thought I might shed some light on what I think is going on.
The normal mouse events "click", "mouseup", "rollover", "rollout", etc all function by the stage determine what the "target" of the mouse event was by default the target is the lowest-level thing that is interacted with. If you contents change while the mouse is down, it will not count as the same target when the mouseup occurs. Since positions are not re-checked without moving the mouse, the mouseover, mouseout, rollover, and rollout events may function oddly as well.
Conversely, the "pressmove" and "pressup" events do not care what is under the mouse once something is pressed. The target will always be what was pressed, which allows you to move the mouse out of the object (or even remove it), and still receive events from it. This also ensures that you receive a pressup event even if you release outside the object.
As #RandyPrad mentioned, the hitArea may solve your issue. By specifying a hit area, you are overriding the contents of your clip, so your target should always be the container (MovieClip) instead of its contents. That way no matter what is pressed inside the movieclip, it is the same target when you release. You can also get the same effect using the mouseChildren property.
movieClip.mouseChildren = false;
Hope that helps!
Please check your hit area of the button.
i think that your are playing image inside the btn is animating
please use this link http://www.createjs.com/tutorials/Mouse%20Interaction/hitArea.html
I have a large problem disabling a slider in LabVIEW. Here is my minimal example:
I have a simple Slider, which is disabled and grayed out if the value is higher than 5. Otherwise the Slider is enabled.
If I drag the slider higher than 5, the Slider gets grayed out. But I am still able to move the slider around and change the value. Only after I dropped the Slider, the Slider is disabled to use.
In my opinion, this is a large bug of LabVIEW. Is there any way to disable the Slider correct during drag?
Thank you for your answers!
Additional information:
Like I said, the snippet is only my minimal example to show the basic problem. In my application the following is happening:
I have s statemachine with a state that enables the Slider and a state that disables my Slider. The state can change every moment, so it´s possible, the user is using the slider at the moment of statechange --> moment of disabling. At this moment the slider should be disabled (it only gets grayed out) directly ... not after releasing it. So limiting the maximum is not real target. I want to prohibit all slider actions for a user.
"Link to question asked on NI Discussion Forums"
As suggested by Alexander_Sobolev on the NI forum (but I promise I thought of it independently!), you can end the slider drag by generating a mouse up event. On Windows you can do this with Simulate Mouse.vi from the NI site, which calls mouse_event from user32.dll:
Note that one of that VI's mouse position inputs is erroneously marked as 'Required'; I fixed that before creating the code above.
I do think this is a UI technique that should only be used if it's really justified by the requirements of the system, and if the users will understand why it works like that; otherwise it could make for a frustrating and annoying user experience. I don't think it's a bug, rather a design decision, because the opposite behaviour could be equally undesired in other circumstances.
I guess you could set the slider value to 5 inside the case structure, alongside the greying out, by adding another property node. This should keep the slider stuck at 5, if the user tries to pull it above.
This appears to be strange behavior as the Value Change event is triggered while the mouse button is held down even when the control is Disabled & Grayed Out.
One way I can think of to limit the value would be to update the Data Entry Limits Maximum property for this control and setting the Response to Value Outside Limits for Maximum to be Coerce.
I need a control
It should be asynchronous (should not block the launching thread).
It should block all the user interactions with background screen.
Backdrop shadow on background so that it gives the feeling of disabled interactions with background.
I tried wxBusyInfo. It solves my first requirement, but one can interact with background window.
Then I use the wxWindowDisabler with wxBusyInfo, It disables the background window. But looks like events are getting buffered while disabler is on and when I am destroying wxWindowDisabler object, buffered events are firing.
Then I found wxEventBlocker that can be used to block the events.
Is this the right way to achieve the requirements?
wxBusyInfo is the right class to do what you want, it doesn't dispatch events, so I'm not sure how do you manage to interact with anything while it is shown. Because it doesn't dispatch events -- even the repaint ones -- it's not recommended to show it for relatively long periods of time. If you need something more permanent, use wxProgressDialog.
Finally, wxEventBlocker is a rather special class which is only useful in very specific circumstances and this is not one of them.
In wxWidgets, I would like to have 2 objects on a wxPanel joined by a line and with a mouse down event to relocate the position of either of the 2 objects (The line should automatically be redrawn to follow the new position of the objects). I have tried using wxPaintDC to draw the initial position of the 2 objects (Custom created with mouse click events) and using dc.DrawLine to join these 2 objects together with a line. How should I proceed to allow make those 2 objects movable (mouse down event) along with the line? Can this even be achieve?
Of course it's possible (just about everything is, it's "only" a matter of effort), but it's not completely trivial and you may want to use OGL which does it for you. On the flip side, OGL is very old and completely unmaintained since a long time, so if your needs are really simple, it's probably still better to do it yourself.
If you do, here are some hints:
For mouse handling, you first need an (efficient if possible) hit testing function.
Once you have it, it's easy to detect where a click happens and what object is under it and start moving it if it makes sense. To be more user friendly, the move shouldn't start immediately, but wait until either the mouse moves a little, or stays pressed for some longer time (this will avoid accidental moves).
When the user is dragging the mouse you will get wxEVT_MOTION events. Use wxMouseEvent::Dragging() in your handler to check whether any mouse button is pressed.
Whatever you do, you must always draw from your wxEVT_PAINT handler, i.e. if an object moves, you must not redraw it immediately, but update its position, invalidate the area taken by it before and after the move (invalidating everything is simpler, but less efficient) and draw it from your OnPaint().
You want double buffering to avoid flicker, see wxAutoBufferedPaintDC