I have this IText object within a parent Group object.
When I select the Group and resize it horizontally (and vertically as well) the IText resizes as well which makes the text Strech and look awfull.
Now what I would like to do is have the IText center itself (keeping its aspect ratio) within the Group.
How can I do that. I tried modifying the Width and Left of the IText when the object is scaling, but that did not work.
try use latest fabricjs version ( 1.6.0.rc1 ) and instead of using fabric.IText use fabric.Textbox.
This new class has the properties you are looking for, the controls normally used for scaling are instead used for resizing the element and the text flows inside it.
I was not able to make the latest fabric.Textbox work exactly like I wanted.
Luckily, I found a way of making the fabric.ITextcenter horizontally when the parent fabric.Group is resized horizontally and also make the same fabric.IText Text grow in size based on the vertical resize. No ugly text stretch.
Here is the solution:
https://jsfiddle.net/t44wyday/46/
Related
I am trying to create dashboard edit mode grid with gridstack javscript library.
Here is what I am trying to accomplish which is similar to this Databox platform. This is what it looks like when you edit any of the dashboard to view/edit it in grid mode.
So when I drag the blue border handle and scale the div(or even move with cursor hand) then the around grid(which is background layer with absolute position in reality) is automatically adjusted to match the corresponding div. Like this.
Even if there are multiple widgets there, resizing is working everything perfectly fine.
e.g. if there was any sibling widget then resizing this widget would also resize the sibling widget but can not go beyong 1 * 1 grid which is smallest size there.
Even after resizing both widgets, the background static grid boxes (with yellow border) fills the remaining vacant space similar to what is the concept of dense packing algorithm in css grid.
They are removed when widget is grown and added when it is shrinked.
As it seems super complicated to achieve this, is there any default feature like this with grid-stack library?
I developed a small tkinter GUI to display (and export) images stored in a proprietary format. I managed to load the data into a 3D numpy uint8 array. I want to display one slice of that 3D array in a tkinter.canvas. To do so I used ImageTk.PhotoImage.
Underneath the Canvas I inserted a tk.Scrollbar. My goal is to use that scrollbar to let the user actively "scroll" though the 3D Array. Basically when the slider is moved or any of the arrows is pressed the slice corresponding to the slider position should be displayed in the canvas.
Right now I have the issue that I don't understand how to set the range of the scrollbar to my z-Dimension and then how to bind the scrollbar events to the movement or arrow actions to update the canvas.
Right now I don't have example code since this is a more conceptual problem.
Could you point me in the right direction how to solve this?
Best TMC
edit: Photo
Tkinter Gui with Canvas and Scrollbar
The solution is to use tkinter.Scale instead of tkinter.Scrollbar . As a side note, the command within:
scale = tk.Scale(yourTkFrame, from_=min, to=max, orient='horizontal', command=doSomething)
passes two values to the function doSomething.
Using the Scale allows to use the scale.get() method to retrieve the position between min and max values. Those can then be used to set the image corresponding to the selected position on the slide.
I have done my own version of the PropertyCross Demo (provided in their demo section).
The problem I currently face is the size of the "Recent Search" area. While I have a non-scrollable container, I can easily define the preferred height. As the Box Layout adheres to the preferred size, all is well, with the little issue of not being able to scroll it and see more than one result:
recentSearchContainer = new Container(new BoxLayout(BoxLayout.Y_AXIS)); recentSearchContainer.setPreferredH((int)(this.getContentPane().getHeight() * 0.1f));
Once I set the container to scrollable, the preferred height gets overwritten and takes up as much space as it needs, taking too much space from the BorderLayout Center piece above it.
How to manipulate the preferred size of scrollable components?
You don't manipulate the preferred size. Scrollables take up more space so if you need them to take up a specific amount of space you need to use the right type of layout which in this case might not be border layout...
Border layout gives NORTH/SOUTH elements their preferred height which might not be what you want. You might want a grid layout which will divide the height 50/50. You might want a table layout where you can define the height in percentages etc.
For those who are interested, here is the solution:
Setup a table layout with a single column and as many rows as you need (similar to box layout y axis or border layout which only north, center and south).
Set the table layout to non-scrollable so it defaults to 100% of your screen.
add the components with height % of the screen they should take up.
those components can be scrollable and will still stick to the height constraint!
// inside a form object, setup the layout
TableLayout tl = new TableLayout(3, 1);
tl.setGrowHorizontally(true);
setScrollable(false);
setLayout(tl);
...
// and add stuff to it
add(tl.createConstraint().heightPercentage(15), labelDesc);
add(tl.createConstraint().heightPercentage(50), compGroup);
add(tl.createConstraint().heightPercentage(35), recentSearchContainer);
Works like a charm!
So here is the problem:
I am trying to create dynamic buttons that have text. The text will be generated dynamically so the svg object doesn't know the size of the text. There are two things that I am looking to do and I hope that SVG will do this
First I want the left and right edge of the svg element to stay the same even if I scale the element horizontally
The problem is that I have to set a width on the svg otherwise it doesn't show up when I display the page. Also on the Home and blog buttons you can see that the edge is compressed. I want the edge to stay the same no matter how much text is in the element.
Also I can't seem to set the scale or width properly even with a javascript .getComputedTextLength()
Any help or a point in the right direction would be very helpful
Buttons that are sized to their text content is functionality that can be adressed with Raphael's getBBox()
The use of this js library means that you are implicitly using SVG or VML and this functionality is more easily addressed by referencing this JavaScript library
To see the getBBox() function in action you could visit the Autobox example here:
http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2
I am working on a SVG application and now want to let a user resize an object using draggable corners, very much like in SVG-edit (http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html).
The functionality should work as follows: The user selects an SVG object, drags it to the main ‘canvas’ and once on the ‘canvas’, four corners on the outside of the object appear, the user can drag on each of the corner points & drag to enlarge the object. The objects will be rectangular in shape and created using paths, not using the SVG ‘rect’ function.
Would anyone have any suggestions as to how this should be implemented?
Thanks in Advance
You could take a look at some existing open source implementations. svg-edit is one which you already mentioned.
To showcase a tool that I developed, I wrote a demo which implements this functionality. This which may serve as a simpler and more restrictive example than svg-edit, as it doesn't do too much other than allow you to draw rects and circles, and rotate/translate/scale them.
I have edited jquery to make rect draggable, recently put them in a g and lost this functionality. The g doesn't contain the position data.
Might be possible to bubble down to the children elements.