I have a fabric canvas which inside a clip mask I call it "artboard" (check image below)
I want to zoom to some specific point inside my canvas (example zoom the rectangle) without zooming the entire artboard and keep the same width and height for artboard (check images)
Related
Want SvgDraggable Rectangle and text inside it to move at same time. In my case only rectangle is moving.
When adding images to a TextButton in LibGDX how would I match the button to the contents of the image. Currently when I set size the image scales down to fit the button which leaves a large gap between the edge of the button and the contents of the image (See distance from green debug border to the edge of the buttons image).
I would like to be able to set the size of the button to match the content of the image so that the empty space around the image is ignored. I could crop out the empty space from the image but would have an off centered image due to the drop shadow and so would like to avoid that.
Top image shows the displayed dutton in game including the debug button border in green. Bottom image shows the source image with empty space.
TextButton.TextButtonStyle buttonStyle = new TextButton.TextButtonStyle();
buttonStyle.font = FontLoader.uiFont;
buttonStyle.up = new SpriteDrawable(new Sprite(assetManager.get(UISpriteLoader.SPRITE_UI_TAMING_BUTTON_BASE, Texture.class)));
buttonStyle.down = new SpriteDrawable(new Sprite(assetManager.get(UISpriteLoader.SPRITE_UI_TAMING_BUTTON_PRESSED, Texture.class)));
buttonStyle.over = new SpriteDrawable(new Sprite(assetManager.get(UISpriteLoader.SPRITE_UI_TAMING_BUTTON_HOVER, Texture.class)));
tameButton = new TextButton("Tame", buttonStyle);
tameButton.setPosition(1470, 1080-330-80);
tameButton.setSize(250, 80);
stage.addActor(tameButton);
Use a Ninepatch for your images. It will scale to fill the button out of the box.
I recommend you to use Skin Composer both for making the Ninepatches and for creating a Scene2d skin so you don't have to create your Styles in code.
I have a complex shape that's been generated from an SVG file that we're clipping images to in canvas.
However, all of the bezier curve coordinates are based on 0,0. Our shape's size scales depending on the size of the canvas (which scales based on the user's screen width).
Is there a way to take the shape that's already been drawn and then move it to a certain position on the canvas? Much like ctx.scale(#, #) will scale the drawn shape?
Thanks!
Use ctx.translate() to change the position of items on your canvas.
See: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations#Translating
Using translate will alter the position of everything that is subsequently drawn on the canvas. If you just want to move one thing, you can either do:
ctx.translate(x,y);
// draw something
ctx.translate(-x,-y);
or you can do:
ctx.save();
ctx.translate(x,y);
// draw something
ctx.restore();
This is the situation: I need to do a "splatter" effect to show the content behind (be it a body background image, or a google map). I'm thinking of overlaying a canvas on top of the actual content. The canvas will have an opaque (white) background initially. Then, I'll mask it with the splatter images and interval to show the underlying content.
I've found this fiddle that does something similar: http://jsfiddle.net/VqCbv/43/
However, the mask is drawn with fillRec and createLinearGradient Can I modify the code somehow to use an actual image for the mask, for a more flexible shape?
Thanks in advance.
All you need to do is to first create and load in an image with the "splatter". Then you set composition mode of the canvas to destination-out and simply draw the image on top of your canvas:
ctx.globalCompositeOperation = 'destination-out';
ctx.drawImage(img, 0, 0);
What will happen is that all pixels that are in the image will remove the pixels on the canvas leaving the area the image was in as a transparent area. The other pixels (the white) will be intact.
Demonstration (click canvas to splatter):
http://jsfiddle.net/AbdiasSoftware/4A4Qv/
As you can see a hole is punched in the canvas so the background is visible.
I have two images, a gameboard and the same gameboard with all posible player positions in a pressed state. When a player moves to a position on the board, I put the board image over the pressed board image and slice using context.drawImage() on the pressed image, to display the pressed position through the slice. However, my game board contains positions which are not rectangular but different shapes.
Is it possible with html 5 canvas, to cut a non-rectangular shape out of an image to display the underlying image?
I found it's possible to use clip() on shapes but I can't find a similar option on images.
you can create a third image that is a mask with transparent (alpha-channel) pixels and non-transparent pixels, and use a
globalCompositeOperation
to merge the mask and the to-be-masked image into a new image ( think you can use an xor or source-out here..