I have a fabricjs canvas and onto that i am adding image. when we click the image the image is in selected mode.
is there a way to know if the mouse if over the grapples(the square boxed around the image) but not the one used to rotate?
and if it is can i fire a javascript command from there?
the rotation square is called 'mtr' inside fabricjs.
You can hook a 'mousedown' or 'mouseover' event to the object in this way:
object.on('mouseover' myfunction.bind(object));
the function you pass will receive an object parameter that we will call opt, just for example.
function(opt) {
var mouseevent = opt.e;
if (this.__corner === 'mtr') {
callMyOtherFunction(mouseevent);
}
}
this will not stop the rotation handling during mousemove or firing modified on mouseup
this.__corner referes to the object (this) and the last findTargetCorner result. Is not documented and is not a public feature, is mostly used for internal fabric logic, but is there and you can use it.
You should propose on the fabric issue tracker to make it an official feature, removing the double dash in front and documenting it in the docs.
Related
There exists legacy application having 3 canvas. First canvas to display objects which is stored in container, second canvas when object is selected and third one when object is moved or added for editing. I want to use the text and image feature of fabricJS into my existing application. While creating fabricJS canvas, i provided editing canvas object then all the mouse events bind to the editing canvas stopped working. So does there exists way to use fabricJS into existing application only for using the text and image feature of fabricJS.
You should be able to dynamically assign a z-index value to a canvas layer to expose or hide the layer to mouse events.
For the layers that you want to hide mouse events from, set z-index value to -1. For the layer that you want to expose to mouse events, set z-index value to 1.
var textLayer = document.getElementById("text-layer");
textLayer.style["z-index"] = 1;
I just started out with Phaser.
I have a simple sprite in the middle of the screen, and whenever I click the sprite, I emit a particle at the clicked x,y coordinates.
My problem is that the particles are generated behind the sprite. I have tried setting z on the sprite to 1 and the emitter to 1000 without luck.
What am I missing?
var emitter = game.add.emitter(game.world.centerX, game.world.centeryY);
emitter.makeParticles('phaser');
var sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
sprite.scale.setTo(2, 2);
sprite.inputEnabled = true;
sprite.events.onInputDown.add(function(sender, pointer){
emitter.emitX = pointer.x;
emitter.emitY = pointer.y;
emitter.emitParticle();
}, this);
http://phaser.io/sandbox/cxBVeHrx
EDIT
My actual code is based on the Phaser-ES6-Boilerplate. Even though BdRs answer solves the issue in the sandbox code, I'm not able to utilize this in my real code.
I have uploaded both the code and a running example. Hopefully someone can tell me where I have screwed things up...
Separate Phaser items don't have a z-order, instead it just depends on the order you create and add them to game. Each new sprite or emitter or group etc. will be displayed on top of all previously added items.
So, simply changing your code to something like this should work.
// first the sprite
var sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
sprite.scale.setTo(2, 2);
// then the particles in front of sprite
var emitter = game.add.emitter(game.world.centerX, game.world.centeryY);
emitter.makeParticles('phaser');
// then maybe text in front of particles and sprite
var mytest = game.add.bitmapText(10, 20, 'myfont', 'Level 1', 16);
// etc.
Btw sprites do have a .z value but that only used when it's part of a Phaser.Group, it will then be used as the display z-order but only within that group of sprites.
By default, phaser will not sort objects that get added to any group, it will just render them in the order that they get added. In your case, you can just add the emitter to the group after you add the sprite (the group in this case is the 'game' object).
Of course, having to add objects in the drawing order is not ideal, and if you need to have them sorted dynamically, not possible.
Another way is you can sort objects within a group using the 'sort' function, in which you give it the name of a parameter to sort by, and you sort whenever you need to (in some cases, in the Update callback).
Sorting every frame can be a performance hit though, especially if you have a lot of objects. Another way you could go about this is by adding groups, sorting those groups in draw order (think of them like layers), and then adding objects to those groups in any order. Any group that needs sorting within itself you can sort as well. This way, you can choose to have (for example) a background layer not needing to be sorted but everything added to that layer will be behind every other layer.
Good answers from everybody, but you are missing that every GameObject has a depth property which serves exactly the z-index purpose. This way you do not need to rely on the order of objects creation.
There is also an official
example.
Hope this helps.
I want to know how to move a view from top to bottom continuously without animation. I am asking this because I want to get the position of the view at every step so that I can check that if there is any collision between that view and any other view.
With animation you can move (not exactly move) a view from one position to another position (Animator class), but animation produces an illusion to the user that it is moving but it's position is fixed all the time. So this can't be done using animation?
Second approach is incrementing position of view. I applied this method in onCreate(). If I used it without Thread.sleep(50) then the activity doesn't show the view, if I applied it with Thread.sleep(50) then activity doesn't start for some period.
Property animation (subclasses of Animator class) actually move the view, as they update the actual property of the view. It is the view animations (subclasses of Animation class) that don't move the actual view and instead just where it appears to the user.
Source:http://developer.android.com/guide/topics/graphics/prop-animation.html
Quote: With the property animation system, these constraints are completely removed, and you can animate any property of any object (Views and non-Views) and the object itself is actually modified.
You also shouldn't start moving things around in the onCreate method as things are still initializing (onwindowfocuschanged is recommened). Also if you call thread.sleep, you are going the sleep the main UI thread, hence freezing the application for a time.
Solved the problem using ValueAnimator :-
CodeSnippet :-
va=ValueAnimator.ofFloat(0.0f,size.y);
va.setDuration(5000);
va.setRepeatCount(va.INFINITE);
va.setRepeatMode(va.REVERSE);
va.start();
va.addUpdateListener(new AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
// TODO Auto-generated method stub
bullet[0].setTranslationY((Float) va.getAnimatedValue());
Rect R11=new Rect(bullet[0].getLeft(),bullet[0].getTop()+(int)bullet[0].getTranslationY(),bullet[0].getRight(),bullet[0].getBottom()+(int)bullet[0].getTranslationY());
Rect R21=new Rect(ball.getLeft(), ball.getTop(), ball.getRight(), ball.getBottom());
if(R11.intersect(R21))
va.cancel();
}
});
I'm developing an application using GWT 2.3.0 and GXT 2.2.5.
I've got a LayoutContainer with ScrollMode set to AUTO and layout set to RowLayout with a horizontal orientation. It's used as the display window for my application.
The problem is that when the browser is resized so that the vertical scrollbar is displayed, the contents do not resize to account for it, causing the horizontal scrollbar to also appear even if it's not needed.
Is there a way to have the layout account for the space taken up by the scrollbar when rendering the widgets?
Ok that is a bit tricky to accomplise. I would do it like this:
On the Entry point (so that you know it is always active) add a resize handler to the Window
Window.addResizeHandler(new ResizeHandler() {
#Override
public void onResize(ResizeEvent event) {
// Fire Event containing the new size informing the application of the change
// Or resize the Layout container
}
}
If you choose to fire the event and you are using the MVP pattern then it is pretty simple to fire the event via the event bus and catch it wherever you like in the application.
The only catch here is that you might want to run the functions in onResize() inside a timer as in many cases the Window width/height reported have not the final value, due to the event being fired before the resizing completes.
I'm new to GDI+ programming and am looking for some advice.
I am loading an image from a file and displaying it using the following functions (some pseudo code included):
Gdiplus::Image *i = new Gdiplus::Image(file, other parameters ... );
Gdiplus::DrawImage(i, other parameters ... );
I would like to associate a tooltip with the image. Is there any way that I can automatically set/attach a tooltip to the Gdiplus::Image objact (or any other Gdiplus control that I wish to draw for that matter)?
If not, how can such functionality be achieved? I have looked at CToolTipCtrl in WTL but don't know how to attach it to the Gdiplus::Image.
Thanks in advance.
After investigating this more, I've realised that this is not possible, so to speak. You must use GDI+ to draw your own tool tip my monitoring mouse events to see when it is hovering over something, then using the device context to do the drawing withing the mouse hover event handler.