I am attempting to organize one to six images in a grid with a fairly random layout. I am passing the method an array of images that I want to iterate over and return a view containing the grid of images similar to my example below. What would be the best approach to accomplish this?
Edit: I am trying to figure out how to layout each view on the fly. Also, the first grid in count == 5 in the image is incorrect.
Let's say, you have 3 images. You will have 4 possible layouts. Calculate for each layout, in which combination of subviews and images you lose less pixels from the images, when scaling and cropping them to the dimensions of the subimages. If several layouts have the same result, pick one randomly.
Related
I am trying to display a large matrix that is constructed of 0/1, each cell is a div which could be black or white, when trying to display matrix of size 1000x1000 the browser crashes...
I am using v-for nested with v-for to display it...
how can i improve the performance?
This is not a Vue-related problem, but rather a DOM related problem. You are putting over a million DOM elements on a page. A tab where I ran a test that generated a stable 1000x1000 matrix with empty divs and classes showed that it consumed 2.3GB of memory. It took quite some time to even render, and scrolling is very slow, which suggests that it is the browser that is having trouble here. Vue does not do anything in my test after having rendered the page.
What you can do depends on the use case. If you just want to display data in a graphical way, consider using a canvas. You can freely draw on a canvas, and since you do not have to juggle around a million dom elements, the performance should be much better.
Other techniques include lazy loading, where you use scroll position to only load/show the rows that are in the viewport. This will reduce the number of dom elements, which should increase performance.
Alternatively you can limit the amount of data that is served to the user, by providing a filter or something similar. If a filter matches too many items, you can cut it off at a certain number of items you know will render fine in a browser and show a message that some of the results are hidden for performance reasons.
My problem is three-fold. I'm going to try to explain as detailed as I can, because I've asked this question before and haven't gotten any clear answers.
What I'm Trying to Do:
I have diagonally shaped images, that I'm trying to make clickable, so I separated them out of the background image. They were originally one image, but I've cut out several pieces of the image and I want to align them identically to how they were in the original image. This might not the best method for what I am trying to achieve, and if there is a better way to make non-square areas of an image clickable, that would solve all of these problems. If not, here is my problem. The problem is, as soon as I align them in XML, I boot them up on an Android emulator or my phone, and they are aligned differently on both, differently than the preview and from each other.
Below is my example, and I'll try to explain what I mean.
The black and white grid is my background. The brown, red, and yellow lines are separate images. I don't want to just combine them with the background, because I need those lines to be clickable. I'd set a button behind them, but they are diagonally shaped and I need the entire shape to be clickable. However, they have to be EXACTLY where they are in the background, aligned specifically as they are to the background. The problem is, as soon as I load it on another device, it scales, and everything misaligns.
It also misaligns depending the device, so I presume it's because it's scaling the different parts differently.
I need a way to align it the way I want it, and have each image scale together.
How I've Been Trying This So Far:
Initially, I tried just using XML. And herein was my first problem. My background image is 1920x1080. It loads on the emulator without a problem. However, if I try to load it on my phone, I get the following error:
OpenGLRenderer: Bitmap too large to be uploaded into a texture (5760x3240, max=4096x4096)
So that leads to my first question. Why is my 1920x1080 trying to load as 5760x3240?!
I bypassed this, by using Picasso to scale the image to 1920x1080. As a sidenote, in addition to programmatically loading the image, I also am removing the title bar. Here is my OnCreate:
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main_layout);
Picasso.with(this).load(R.drawable.backgroundimage).resize(1920,1080).into((ImageView)findViewById(R.id.background));
On the XML side, I've tried all sorts of different things. Relative layouts, linear layouts, frame layouts...None seem to scale the separate imageviews the same.
Which leads to my second question.
How do I scale two differently sized imageviews together, so that they maintain their alignment on different sized devices?
My second imageview is 198x547(this would be the equivalent of one of the squiggly lines in the example images) and even setting that in Picasso does not maintain my alignment. In fact, that doesn't seem to work at all, since I have to scale it differently to even match the alignment I have in the original image.
Summary Questions
I need a diagonally shaped portion of an image to be clickable. Is cutting the shape out as a separate image the appropriate method for doing so? If not, how do I make such a specific, non-square area of an image clickable?
I need specific alignments to scale together. Why aren't they?
Why does my png file upscale itself?
I'm trying to create an app with groups you can switch between. My idea was to pick the first 3 photo's of the members in the group, and lay the images over each other. Adding three images over each other is not really difficult, the difficult part for me is to make the other two images show up like a "half moon" beneath the other images. See the attached image for an example.
It isn't really a half moon. It's more like a crescent moon or lunate shape.
The principle is not a difficult one. Practice as follows:
Start with an image, roughly a square.
Make an image context the same size as the image.
Fill a circle the size of the image, roughly offset about a third of its width to the left.
Fill another circle the size of the image, roughly offset about two thirds of its width to the left, using Clear blend mode.
Extract the resulting image from the image context.
You now have the desired lunate shape:
Now use that lunate shape as a mask or clipping area for the original image:
I have a collection of UIImageViews, made from PNGs with transparency.
I want to be able to overlap these images on top of each other, but only show where they overlap, not the entire image. So image B is placed over image A, but I only want to display image B where image A is not transparent.
The UIImageViews also move around.
So effectively I want to use one PNG to mask another PNG, using Objective C.
Can this be done?
I don't know if this is the ideal way to accomplish this, but you could do this by using a combination of masking and cropping.
So, for example, you check to see if Image A is transparent, if it is, perform some masking on the two images. Masking Tutorial Here
After you've masked the images, perform a cropping operation based on the intersecting coordinates. Check the Second Answer Here
In the event that that Image A is not transparent, just perform the cropping operation without masking the object. Not sure if this will help, but I figure it will give you a start!
I am designing a simple music app where the user gets to play instruments i.e. Drums, and the problem that I am facing is with resolutions.
The drums are images, which I have converted them into buttons. Everything looks great at the state that I have designed it.
However, when I switch to other resolution states, the button(image) are distorted, e.g. skewed, scaled, and looks nasty.
I have tried designing or arranging them via selecting 'Enable state Recording', but the specific designs for that state are not being saved.
Have you tried the approaches discussed here? http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx For the actual button sizes, make sure you are not fixing the width/height with pixel values. Use * weighted rows and columns to layout your grids and have the buttons autosize to fill a given cell in the grid. Then match with the appropriate image resource per the article.
Grids are great for dividing up available space but they can't account for changes in aspect ratios. If your items are still set to Stretch (or Fill) then they can end up out of aspect ratio. Another option is to design the entire layout at a fixed size (let's say 1024 x 768 or 1366 x 768) and wrap the entire thing in a ViewBox. ViewBox will scale all elements equally and maintain the aspect ratio, adding letterboxing (or empty space) on the sides / top & bottom if necessary. This might be a better approach for a drum kit.
Hope that helps.
Redid the whole project of designing again.
This time, I put the image inside a specific grid and that made things lot better. :)