Fabric JS object scaling - fabricjs

I have grouped a set of six squares that form a rectangle and placed a set of 12 circles at the vertices onto the canvas. The first screen shot below shows the unscaled version. The issue is that the rectangle object height and width do not change as I scale it up or down. See the second screen shot.
I have tried to scale up or down and check the dimensions of the rectangle using two methods
1) canvas._objects
2) canvas.getObjects()
Neither of these objects reflect the new dimensions of the scaled group of squares. This must be an error in Fabric JS unless someone can suggest a workaround. Your input is appreciated.

you need to use the scaleX/Y factor from the rect object to calculate the stretched height/width.

Related

Why does my cube in three.js have aliasing and look "Jaggy"?

I am using three.js and created a basic scene with a few meshses rendered with some basic lighting . My torus geometry was previously pointy with few polygons but I was able to smooth it out by adding more segments but now I would like to straighten the lines out in my cube. They seem jaggy. In the pic I am including my render on the left seems a lot jaggier then the example I am following on the right. I have even set width and height segments to very large values (200). Any Ideas why the aliasing/jagginess?My render on left, example on right

Using tk.Scrollbar to update images in tk.canvas

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.

How to add anotations to points created with matplotlib.patches.circle?

I've got an image with circles plotted on top using matplotlib.patches.Circle which worked fine here:
I was just wondering if it is possible to add annotations to the circles using the same class Circle as in the second image (two of the circles have manually added annotations 1 and 2)
I know there is a possibility to add a legend to the circles but I need to have the information next to the circles and not as a separate box.

AndroidPlot - Position TextLabelWidget not consistently on different devices

I have a chart show info of apps, but when run it on devices android. The position of text on chart not consistently.
These images illustrate the problem: https://drive.google.com/folderview?id=0B7-CxJHQ5ZnjYjVlTlFQdElWRGM&usp=sharing
I use TextLabelWidget in AndroidPlot. How to keep position of TextLabelWidget on chart with the same image1 in link above on devices?
The problem appears to be that your plot area is set to fill the width of the screen and since the bars are evenly distributed in that space, their x positions are essentially fractions of the screen width.
At the same time you have labels that appear to be positioned using absolute positioning. As an example, this code will position 4 labels at 0%, 25%, 50% and 75% screen width, 80 pixels down from the top of the screen:
txtWidget1.position(0, XLayoutStyle.RELATIVE_TO_LEFT, PixelUtils.dpToPix(80), YLayoutStyle.ABSOLUTE_FROM_TOP, AnchorPosition.LEFT_TOP);
txtWidget2.position(0.25f, XLayoutStyle.RELATIVE_TO_LEFT, PixelUtils.dpToPix(80), YLayoutStyle.ABSOLUTE_FROM_TOP, AnchorPosition.LEFT_TOP);
txtWidget3.position(0.50f, XLayoutStyle.RELATIVE_TO_LEFT, PixelUtils.dpToPix(80), YLayoutStyle.ABSOLUTE_FROM_TOP, AnchorPosition.LEFT_TOP);
txtWidget4.position(0.75f, XLayoutStyle.RELATIVE_TO_LEFT, PixelUtils.dpToPix(80), YLayoutStyle.ABSOLUTE_FROM_TOP, AnchorPosition.LEFT_TOP);
There are some other factors that you are also probably going to need to deal with such as bar width but this should get you closer. You may find this doc useful as far as a guide for the different positioning methods.
Another tool to consider using if you aren't using it already is the Configurator. This will let you set your positions etc. inside xml and override values based on screen size, orientation, etc.

Can you right-align an SVG rectangle?

I'm using Raphael to draw rectangles. Whoo-hoo!
Is there a way to right align contents of an SVG file?
Not just text, but shapes as well?
I can do the math and get the computed x value, but I'm looking for the lazy-simple solution.
Thank you.
There isn't. Unlike normal web pages where the window is resized and the content flows into it, when a Raphael paper is resized, there is no sort of flow, so aligning is irrelevant. Instead of setting align=right, you just set the right edge to be the same position you set the width of the paper to be. If you enlarge the paper, you can scale the contents with a single operation. Once you've set the position of the right edge, you've essentially set the align position. You don't need to re-set all edge values when the paper changes size, you just scale everything with one command. Hope that helps

Resources