I want to know if there is a way to select correct object when we click on it to change the color.
I have two angular triangles on my canvas but when i click on it i can only select one because the bounding box is squared.
I use :
canvas.on('mouse:down', function(e))
But i am unable to select the triangle i want only 1 is selectable due to the size of bounding box.
Thank you for your help
I want to change the color of the triangle when i click on it. Example if i click on the red triangle this triangle come green. If i click on the black triangle this one comes blue. But its impossible at this time.
You can try something like this:
canvas.on('mouse:down', function(e){
var triangle = e.target;
if(triangle)
triangle.setFill('your color');
});
You can add
perPixelTargetFind: true // prevents clicking on bounding-box around shape from selecting it
to the triangles
Related
In a figure in draw.io, I have arrows pointing basically everywhere. When I LaTeX-format the "label" in a "connector with 3 Labels" object, the formatted text is given a fixed border, which I find impossible to change. Below is an image of the label with its borders illustrated:
The thick, outer border is changeable, no problems there. I can go into the Style menu on the right-hand side and choose all sorts of options for the outer border.
The thin, inner border originates from giving the LaTeX-formatted $$(1,3)$$ text the property of "Background Color" and "Border Color" in the Text menu on the right-hand side. This is mostly for illustrating how the inner border looks.
The problem: For the life of me, I cannot change this inner border's geometry. It clips with every object it is in front of, and if I don't have a clipping border at all, it is still just awful for my figure. I need to change the inner border's geometry, make it a circle, triangle, whatever. I just need to find out how to customize it.
how to click on a drawn figure so that after clicking it disappears, so far it has turned out to click on the entire playing area.
if (FlxG.mouse.pressed)
{
remove(circle);
}
You're only checking if the mouse is being pressed, you should first check if the mouse is overlapping the sprite and only get the click when that's true.
An example https://gamefromscratch.com/haxeflixel-tutorial-mouse-input/
my problem is getting the Sprite in a Sprite "Sheet".
public class Blocks extends Sprite{
public Blocks() throws IOException
{
super(Image.createImage("/blockSprite.png"),20,30);
}
}
"the blockSprite.png contains images of Sprites, many sprites in 1 image"
The problem here is using this line of code, how I am supposed to get the Sprite size/dimension in the image?
Sprite Sheet:
Width - 162
Height - 280
I want to know the width/height of the sprites in the sheet? and how to determine the width/height of the sprites in a Sprite Sheet?
You do know how many sprites are there in each row and column right? then just divide the width with how many sprites are there in a column and divide the height with how many sprites are there in a row.
(I may get the column and row wrong, I'm not native English, but you should just switch the row/column if the first try didn't work out)
One way is to use an image editing software (say GIMP, its free).
What you have to do is,
Open the image in GIMP
Click on the Rectangle selection tool (or press r), your mouse will turn into a cross hair
Now when you click on the image, in the tool box, under tool options you will see the X-Y position of the point you clicked
Cool, now draw a rectangle around the sprite that you want. Zoom in before you do this, so that you are actually selecting the whole
sprite.
Now you will get both the X-Y coordinates of the top-left corner of the rectangle that you drew and the height and width of the image.
After that, just use https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing.
Have fun!!
I have a button in LWUIT Form, and I have an icon that should be drawn in this button, I want the icon to fill all the button space without leaving any white space between the button border and the icon in it, how could I do this ?
For example: let's assume the icon is simply a green square, using the following code:
Button button = new Button(Image.createImage("/green.JPG"));
form.addComponent(button);
I got the following result when the item is focused:
How can I remove the white border surrounding the "green" icon of the button when it's focused (I'll replace the whole icon image with another image to represent the focus state) ?
1) The gap, which is the white border, between the content, the green icon, and the component boundary is called the padding. To fit the image with button boundaries, remove the padding in all direction (TOP, BOTTOM, LEFT and RIGHT) in each of the component states, viz Unselected, Selected, Pressed and Disabled.
So for unselected state it is
button.getUnselectedStyle().setPadding(0, 0, 0, 0);
do this for other state's of the button.
You might want to play around with the margin of the button to fit it suitably within the container.
2) To remove the border of the button call the below syntactic method for each component state
button.get[ComponentState]Style().setBorder(null, false);
In your case for focused state, button.getSelectedStyle().setBorder(null, false);
3) To set the icon for the appropriate state of button use the following methods,
button.setIcon(image);
button.setRollOverIcon(image);
button.setPressedIcon(image);
When I create drawing shapes I cant see any color or fill. I know there is a setting that need to be changed so I can see them. Here is a pick of what is happening on my screen:
I draw the shape and all I see is the green outline, any suggestions?
At the bottom of the screen on your timeline there is a green square on your layer, from the looks of it you have click that. This shows layers as outlines.