Codesandbox here : https://codesandbox.io/s/inspiring-elgamal-c0ud5?file=/src/Rectangle.jsx
Hello,
I am trying to resize a group automatically when I one of its members grow. When I draw a rectangle on the canvas with a click and drag, a group is created containing the rectangle and a textbox. However, the whole group is not resized with the rectangle. Can someone help me solve this? Thank you.
I would try make usage of Active Selection on mouse up
canvas.discardActiveSelection()
const activeSelelection = new fabric.ActiveSelection([rect, text], {
canvas: canvas
});
canvas.setActiveObject(activeSelection)
working codesandbox
Related
I am working on an app created by another resource, where the Canvas app contains a canvas of type fluid grid, as follow:-
so how we can add new DataCard inside the Fluid grid? or copy/paste existing datacards?
On the screen you can see 'add section', this allows you to create a new datacard.
Hopefully this helps you!
Best regards
I'm new to coding in general and I'm trying to make a sprite change texture so it has a walking animation but I can't seem to figure out how to apply a wait() or something to my code.
if Input.is_action_pressed("move_up"):
vel.y -= 1
facingDir = Vector2(0, -1)
$LilBoiTexture.texture = load("res://LilBoiAssets/LilBoiBackward.png")
$LilBoiTexture.texture = load("res://LilBoiAssets/LilBoiBackward2.png")
Any help is appreciated. I'm trying to change from the first texture to the second one within idk 0.5, or something ill mess with it if i can figure out what to do.
There is an easier way of doing this instead of changing sprite image manually. You can use "AnimatedSprite" node as shown in the tutorial. Here are the steps:
1- Add an AnimatedSprite node to your character.
2- In properties of AnimatedSprite, Frames-> select new SpriteFrames.
3- Click SpriteFrames you just created, another menu will appear at the bottom of editor. Drag and drop your animation images to center of this menu.
4- Change animation name from default to something else (for example walkback).
5- In your code you just need to do this:
if Input.is_action_pressed("move_up"):
$AnimatedSprite.play("walkback")
else:
# you can also play an idle animation if you have one
$AnimatedSprite.stop()
I am creating grid on fabric canvas, where the user can upload images in each cell of a grid. Each cell has a clipping mask, and everything is fine. But my problem is, that if the user moves an image in one cell you can see selection outside of the clipping mask. Is there a way to keep the selection inside clipping mask?
here is a screen shot
Try to add in your canvas options the next option controlsAboveOverlay: true
const canvas = new fabric.Canvas("c", {
controlsAboveOverlay: true
});
http://fabricjs.com/docs/fabric.Canvas.html#controlsAboveOverlay
Edit:
Added an example with perPixelTargetFind option
https://codesandbox.io/s/kind-shtern-hq20u?file=/src/index.js
I use fabridjs.
When I select one object, I can change controlling borders and controlling corner size as below.
var obj = new fabric.Image(oimg);
obj.set({
cornerSize: 50,
borderScaleFactor:7
});
controlling borders of one object
When I select two or more objects, how can I change the controlling borders of the selected objects ?
Because my canvas is large, the controlling borders of the selected objects are too thin, so I want to enlarge the controlling borders.
controlling borders of two objects
Thank you in advance.
You might want to use selected objects' group, reachable through canvas.getActiveGroup(). Then you should just need to use the same method you are using on objects, i.e :
var grp = canvas.getActiveGroup()
grp.set({
cornerSize: 50,
borderScaleFactor: 7
);
For complementary documentation, please see fabricJs doc about Group
I'm new to Unity and I started with the Catch Game Tutorial to learn to create a 2D game. Everything is working now but for my needs, I would like to add different textboxes to each of the fallen elements (in the tutorial the bowling balls) Those texts should move with the objects. I know I can change text dynamically in the code, but I couldn't figure out how to correctly add the element.
I tried to add a text object as a child of the gameobject and also tried to create a new gameobject which contains a text, but I can't position the element in front of the background and above my wished element (I can't choose a sorting layer for this)
Imagine this is the object which has to be collected and I would like to show a text like this:
My Questions are:
1. How can I add a text to be displayed in the correct position (GUIText, text in a gameobject, only text or something else?
2. How can I make this text dynamically move with the fallen object?
3. Can I set a background to my text as displayed above?
Thank you in advance!
I found a solution for my problem and did the following thing:
I created a Sprite with my wished background (black rectangle) and added it to the scene
I created a 3D Text and added it as a child to the created Sprite (and scaled it and positioned it)
I added a Script to the 3d Text with the following content:
void Start () {
this.gameObject.GetComponent<Renderer>().sortingLayerName = "[MyLayerName]";
this.gameObject.GetComponent<Renderer>().sortingOrder = 3;
}
I added the Sprite (with the text as child) to my gameObject (ananas)
A renewed the object in the Prefabs folder
Maybe my solution helps other people facing a similar problem.