Let's say you have a bingo card that's 3000x3000. The tiles of the bingo card are 500x500, and the width of the borders separating the tiles are 83.333 pixels wide. Each row has five tiles and six borders. So 5*500 + 6*83.33 = 3000.
I want to be able to resize the width and height of the bingo card and then be able to determine two things:
1.) The width of the borders separating the tiles
2.) The width of the tiles
In other words, I need to solve width = 5x + 6y where x represents the width of the tiles and y represents the width of the separating borders. Since there's only one equation with two unknowns, it's unsolvable with just this information.
I tried doing the following: If the bingo card is 3000x3000 and we resize to 1000x1000, then we downscaled by 1/3. So I tried assuming that x and/or y was also downscaled by 1/3. However, this kind of assumption didn't hold. The width of the tiles and the border width were downscaled by some other ratio that wasn't 1/3.
How can I determine the width of the tiles and the width of the borders separating the tiles? Is there any other kind of information I can use or is this impossible to solve? In the worst case, I guess I could calculate these values by counting pixels in the image somehow, but if possible I'd like to avoid that.
Related
I have two elements that are supposed to be laid out in a column, but one of them is supposed to rotate as it is meant to visually depict the orientation changes read by an IMU. Since that rotating element is a rectangle, when it rotates it overlaps with the item below.
I have tried using both Column and ColumnLayout elements to see if the spacing between these elements can be kept constant even if the top element takes more space because of rotation, but no luck. I then removed both items from Column and tried binding the y property of the lower element to be h*cos(rotation) + w*sin(rotation) where h is height, w is width, and rotation is the angle of rotation in degrees of the top-most element. This results in the second item moving up and down pretty wildly on the screen instead of smoothly following the rotation of the first element.
What can I do to achieve the desired effect?
I have the following layout set up in react with a flexbox:
Ideally I'd like them to align themselves left to right and cover the gaps - i.e. from the above example there are two gaps under the smaller boxes and two smaller boxes below them, would like those boxes to flyp up and fill in the last two spots.
Not sure what sort of algorithm or idea I'm looking for here, it also has to work for arbitrary boxes (though I can control for alimited range of sizes)
I am running into a weird scenario where I don't understand the output of adjustSize(). I am calling adjustSize() on a QLabel, and the resulting size does not match the minimumSizeHint or the sizeHint - it is in between. The only other factor I can imagine is the length of the text inside the QLabel, but I get the same result for differing lengths, so that doesn't seem right either.
Here is the exact scenario:
I have a horizontal layout containing two QLabels.
One QLabel contains text and has a fixed width fw and minimum height mh. If all the text can fit within that size, the dimensions should be exactly fw x mh. If there is more text, the height should increase.
The second QLabel contains a pixmap and should always maintain its aspect ratio. The minimum width and minimum height exactly match the pixmap's original dimensions. If the height of the text-based QLabel increases, this second QLabel needs to increase in both width and height to match the text-based QLabel's new height while maintaining the aspect ratio of the pixmap.
This seems like it should be readily do-able. After the text of the first QLabel is changed (dynamically to any arbitrary length (within reason, not going outside the bounds of the screen or anything)), I call adjustSize() on that first QLabel. Then, based on the resulting height, I calculate the scale factor that the pixmap would have to increase by to match that height and reset the pixmap with scaled height and scaled width.
The problem is that the height of the text-based QLabel does not behave in any reasonable way I can discern. Even with drastically smaller text than what can fit in the starting size, adjustSize() still results in the height increasing past that starting minimum. Here I'm going to use some exact numbers to illustrate the issue. The minimum height is 385. The sizeHint says 401, and adjustSize results in 390. Why is the sizeHint 401 when the text can easily fit in the minimum of 385? And why is 390 chosen by adjustSize(), matching neither value?
I am working on a FLEX / AIR Spark list which lists a collection of images with differing width and height.
I am using a custom layout which works this way:
decide how many images can be fit in the current row based on their widths.
justify them in such a way that first image in the row obeys the "left" margin and the last image in the row obeys "right" margin, so with the "top" and "bottom" as specified by the user, let us say 10 pixels.
As an example, assuming that the current row has 4 images, the images 1 & 4 will have 10 pixels each as "left" margin "right" margin respectively. But the left and right gaps between 1-2, 2-3 & 3-4 will be equally divided based on the varying widths.
now i would like to draw a background that will fill the dynamic area. Please see the image below to get an idea:
Layout requirement Image
** In the image, The grey area is the background I would like to draw, and the colored rectangles represent images of differing widths and heights.**
the "rowHeight" is variable based on the maximum height of individual images within the row.
Issues:
a) Now I would like to draw a background (see the grey area in the pic) that fills the background area of the list. I know the current item's width & height, but I don't know the rowHeight decided by the layout, left and right margins between the images.
Something like:
bgRect:Rectangle = new rectangle ( 0, 0, (imgWidth + (LeftMargin/2) + (Right Margin/2) ), rowHeight)
b) How / where should the background be implemented? if i add the BG area within the item renderer based on the layout, again the layout will be relaid.
Children should be added in the createChildren method. Drawing (painting) the background should happen in updateDisplayList method.
You can pass data to your itemrenderers via an itemrenderer factory. See - Flex - Sending a parameter to a custom ItemRenderer?.
var productRenderer:ClassFactory = new ClassFactory(ProductRenderer);
productRenderer.properties = { showProductImage: true };
myList.itemRenderer = productRenderer;
Every time I create a sprite to use as css background-image, I have to crunch the math and remind myself how to remember the X and the Y coordinates in pixels. How can I remember it or see it visually to keep it straight?
I came up with this graphic, hope it's helpful to someone else as well.
Think 'Y' rhymes with 'SKY' so thats your top measurement (distance in px) from the top. That leaves 'X' as the remaining distance (distance from left in pixels)
When I say distance from left and distance from top, I am referring to the distance in pixels from the side of your overall image to when the part you want to show, begins.
I usually keep the images anywhere on the Sprite sheet and then check out there co-ordinates by clicking on each graphic element in Fireworks(i use fireworks) and then negating the co-ordinates. For eg:if an element is at x=23px and y=20px, then in the CSS, i use background-position:-23px -20px. This always does the work.