I can always check by looking at the co-ordinates and comparing with Image, of ellipse shape, but it fails when ellipse is at the corner.
I have tried using intersectWith method, it only works with bounding box, not the actual border of the shape.
This is the scenario I need it to work to be able to check if ellipse is outside of the background Image, not. bounding box.
Related
I use ggez and would like to resize the window. The only way I found is
graphics::set_drawable_size(&mut ctx, width, height);
However, when I use it, the white circle I drawn turns into a white ellipse, and a seemingly grey circle appears below. So is there another way of resizing window, one that doesn't distort what is drawn ?
use
graphics::set_screen_coordinates(ctx,rect)
right after declaring changing size with graphics::set_mode(ctx,windowmode) turns the ellipse back into a circle. The gray shape vanishes after reducing the window (this is a pretty obscure thing).
So, if I create a button using TouchScreenButton and assign a texture to it, the texture will be displayed on the left bottom of the TouchScreenButton position (See image below)
The TouchScreenButton position is in the top left corner of the rectable
When I don't assign a texture and instead I create a sprite as the child node and assign a texture to it, it will display the texture in the center of TouchScreenButton.
But the shape is still follows what I have said earlier.
My question, How do I create the center of TouchScreenButton texture in the center of the TouchScreenButton position along with it's shape? I want the TouchScreenButton is in the middle of the TouchScreenButton texture.
Solution 1. Go to your Sprite node and in the inspector disable Centered property in the offset section. This way though you should keep sprite and shape sizes for centers of the area and the texture to match, coz now both the Sprite and Shape will be to the right bottom of the origin coordinates of the button.
Solution 2. Go to your TouchScreenButton node and in the inspector enable Shape Centered property in the main section. This way you will make both the shape and the sprite to be centered in the origin of the button.
I have a large triangle that is on top of a small rect. How can I select the rect without first moving the triangle out of the way.
I made a demo here:
https://codesandbox.io/s/w6wr7pmrx5
You need to enable perPixelTargetFind: true on your triangle so that the object's clickable area is determined by the actual object path rather than its bounding box.
http://fabricjs.com/docs/fabric.Object.html#perPixelTargetFind
Here are the facts:
I have a div with rounded corners containing an SVG element with rounded corners that creates a circle.
Inside the circle (SVG) I am drawing four polygons that make out different circle quadrants.
The polygons respond to hover by changing color - so that when a user mouse is over a specific quadrant in the circle - it lights up.
The SVG and the div containing the SVG both have overflow:hidden CSS directive.
When I mouse over an area outside the circle (but inside the clipped rectangle of the polygon) - the corresponding quadrant lights up...
Why is the element responding to mouse over even though I am hovering over a clipped area?
How can I make sure this will not happen? (without creating occluding transparent elements - I want to be able to touch something in the layer below...).
EDIT:
added fiddle as requested:
http://jsfiddle.net/JVQD8/
In the fiddle - note that the surrounding div is bordered with a red line.
the polygons (in blue) are clipped by the red border (div), and when you hover over a polygon it becomes a lighter shade of blue.
The polygon highlights outside the area of the red circle border if on the polygon.
Edit:
As commented by Robert Longson, there is no problem at all in Firefox.
However, in chrome the problem is as described, and in IE the SVG polygon is not even responding to hover.
So the question about chrome remains as is - only in chrome. How do i know if this is a bug that i should report, or if this is a designed behavioral difference?
Try experimenting with the pointer-events attribute.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events
How can I move my image which is in the bottom left of the bounding box to center of the box? Also I want to maximize the size of the image that fits to the bounding box.
What do you mean by "bounding box"? If you are using a vtkImageSlice, you can just use SetPosition(-width/2, -height/2, 0).