[Feature]: event Textbox from Resizing While Maintaining Position and Scaling in F*gma-like Behavior #10063
Replies: 5 comments
-
|
The description of the issue and the behaviour is a bit confusing, i really do not understand what are you trying to achieve |
Beta Was this translation helpful? Give feedback.
-
|
@maxiannunziata , is this what you're looking for? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @drinkspiller thank you por the response! I need https://youtu.be/PR5ElnPnY2k Thank you for your feedback! To clarify, the feature I’m hoping to achieve is similar to how frames work in Figma when zooming in and out. Specifically, I would like a textbox to maintain a consistent position and size on the canvas without resizing or moving in an unintended way as the canvas zoom level changes. What I’m Trying to Achieve: Keeps its initial position relative to the canvas (anchored coordinates). 
Initial Behavior of the Title Frame Behavior: Anchored Position: The title frame is anchored to a specific corner of the main frame (typically the top-left corner). This means that regardless of zooming or canvas movement, the title maintains its relative position to the main frame. 
Description: The second image illustrates how the title frame behaves when zooming or resizing the main frame. It shows that the title continues to maintain its position and scale consistently. Behavior: Dynamic Adjustment: When zooming in or out, the title frame automatically readjusts to maintain its anchored position, ensuring that the title remains visible and properly aligned with the main frame. |
Beta Was this translation helpful? Give feedback.
-
The zoom example in the docs explain how to to control the point the zoom is "anchored" to. TL;DR,
The previous link explains maintaining the appearance of not scaling. These may also help you achieve the desired result: |
Beta Was this translation helpful? Give feedback.
-
|
An object is bound to the canvas/document units, and the zoom is applied over as a blanket. For example while zooming you have to go through this process. My current viewport is a matrix X, so i take my position of the textbox and i transform it for the current matrix X, i get a sort of screen position. i keep it. I change zoom and pan and now my viewport is X2, i have my screen position and i transform it by the inverse of X2 ( you have an utility to invert the matrix ). Once you transform it by the inverse of the new viewport you can set it as the position of the textbox. Same apply for scale. |
Beta Was this translation helpful? Give feedback.
-
CheckList
Description
Feature Request: Prevent Textbox from Resizing While Maintaining Position and Scaling in Figma-like Behavior
Example:
Description:
I would like to request a feature that allows the textbox to maintain its original size and position, scaling appropriately without losing its coordinates, similar to how Figma handles it.
Current Approach:
I have attempted to implement this behavior using the following code:
updateZoom = () => { const zoom = this.canvas.getZoom(); this.set({ left: this.originalLeft / zoom, top: this.originalTop / zoom, scaleX: 1 / zoom, scaleY: 1 / zoom, }); this.setCoords(); this.canvas.requestRenderAll(); }However, this approach is not entirely accurate. The textbox does not always maintain its exact position and scaling as expected, particularly when zoom levels change.
Preview: https://imgflip.com/gif/905628
Request:
It would be beneficial to have an out-of-the-box solution or feature that ensures the textbox does not resize or lose its position, while still scaling proportionally, similar to the behavior seen in design tools like Figma.
This would greatly enhance the user experience and precision when working with textboxes in dynamic canvases.
Thank you for considering this request!
Current State
Canvas Zooming: The canvas is set up with a zoom feature, allowing users to zoom in and out, which affects the scale and positioning of objects on the canvas.
Textbox Scaling and Positioning: The SingleLineTextbox class adjusts its position (top, left) and font size dynamically in response to canvas zooming. However, achieving consistent behavior for text elements, particularly maintaining their size and position relative to the canvas during zooming, has proven challenging.
Problem with Zoom: When the canvas zoom level changes, the font size, top, and left positions of the textboxes are not behaving as expected. The goal is to maintain the text's appearance (size, position) consistently regardless of the zoom level. The current implementation adjusts the font size and positions but has required fine-tuning and complex formulas to achieve the desired result.
Non-linear Relationship: The relationship between the zoom level and the top position has been found to be non-linear, requiring a quadratic formula to describe it accurately.
Additional Context
Existing Solutions/Workarounds
Direct Adjustment of Font Size and Position: Initial approaches involved directly adjusting the font size and positions (top, left) based on the zoom level. This approach worked to some extent but introduced complexity, particularly when dealing with varying zoom levels and their non-linear impact.
Quadratic Formula: A quadratic formula was derived to more accurately calculate the top position based on the zoom level. This formula was determined by fitting a curve to the data points of zoom levels and corresponding top positions. The formula is:
[
\text{top} = -2411.64 \times (\text{zoom})^2 + 3199.48 \times \text{zoom} - 685.66
]
Custom Event Handling: Custom event handlers were introduced to listen for zoom changes and adjust the textbox properties accordingly. These handlers attempt to maintain the textbox's size and position consistent with the user's expectations during zooming.
Iteration and Testing: Multiple iterations of testing and adjustments have been made to refine the behavior, particularly with the use of the quadratic formula to manage non-linear scaling issues.
Beta Was this translation helpful? Give feedback.
All reactions