I have a xml file containing 1 small graphic and 1 big graphic.
In my XAML i have a column that contains both graphics.
But the problem is that the first grahic is smaller then the column, so it was scaling the image up, to fit the column... dont know why!
Anyway, I was setting the attribute Strech="None" to the < Image> element, and it worked out great, accept that the bigger graphic now is to big for the column, so it cuts the graphic in half!
What can I do?
I tried Strech="None" together with MaxWidth="8cm", not helping the bigger graphic to be scaled down.
Summary: I want that graphics never should be scaling up, only down when needed.
Please help me!! :)
Wrap them in ViewBox's and set your Height/Widths to it instead.
Related
I started to write a small engine to render a 2d isometric map. A friend of mine made a small basic image of a train station to use example art for my engine. I tried to import the .png into tiled and create a tileset for it, to then use the information for the rendering of that house.
When I import the image, tiled cuts off the edges of the picture (see attachment "tiled .png import to tileset") on the right and bottom side. I looked into the menus and tried to find information about it but I could'nt find any helpful advice why it happens.
Another thing I find curious is the information within the .tsx file:
<?xml version="1.0" encoding="UTF-8"?>
<tileset version="1.2" tiledversion="1.2.1" name="bAHNHOF" tilewidth="30"
tileheight="30" tilecount="195" columns="13">
<image source="bAHNHOF.png" width="401" height="468"/>
</tileset>
Shouldn't columns(13) multiplied by tile width(30) result in width of the imported image (i.e. 401). It only is 390 though, so roughly 11 pixels less then the original width.
I probably made a mistake somewhere or am confusing something. Maybe someone can help me?
Thanks in advance :)
Seem like whatever editor you are using wants "whole tile" sizes. This is not uncommon. Increase the size of your base image so that the X and Y align to tile size boundaries to prevent this. 30 for a tile size is also very unusual. I'd expect a power of 2 like "32" or "16".
In short, your importer is culling tiles that are not full size. I'd expect it to display a warning about image size before it did this, but who knows as you didn't state the programs.
When this goes onto whatever platform you are using, a power of 2 tile size will help as well in terms of efficiency, so consider making that change sooner rather than later as well.
Finally, often tiling is done to save memory. If, when you divide up your image into tiles (tile it), you can create identical tiles, the computer can use that knowledge to lessen the amount of memory is needed.
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?
Good morning!
I'm currently trying to create a view similar to this mockup.
I have put down 3 different screen sizes so you can see the issue.
I have a header background image (grey box) with an angled bottom. On the right I want to display an image, which obviously needs to be positioned.
Positioning it horizontally is no issue but how can I position the image vertically? I have it positioned fixed for one screen size but obviously need to make it flexible.
Any ideas? Help would be much appreciated!
David
You can definitely use measure as #rajesh pointed out, or you can use Dimensions. As far as getting the layout consistent across devices, using position absolute and measuring the device height should allow you to get consistency across these devices.
Check out this example I set up, it should be a good starting point at least.
https://rnplay.org/apps/pSzCKg
I'm working with documents, so maintaining the the original image dimensions and subsequent dpi is important.
The aspect ratio is always maintained so the automatic fill modes and alike don't seem to have any effect.
Say I have a 300 dpi document and the user want to clear an inch border around the image. So I need an inch cropped from the image but the result needs to be the original image dimensions (2550x3300).
I have been able to achieve this effect with...
...&crop=300,300,-300,-300&margin=300,300,300,300
This works, but seems more than a little clunky. I've tried a lot of other combinations but they all seem to enlarge or reduce the image size which is undesirable in my case.
So does someone know a simpler syntax to achieve the desired result, or do I need to re-size the image then calculate and fill with a margin as I'm doing now.
Thanks
It turns out that my example requests the image in it's full size which turns out to be a special case. When I introduce a width or height into the command line things don't work very well since crop size is in respect to the original image dimensions and margin size is in respect to the result image.
Thinking about it more I abandoned the crop approach. What I really needed was a way to introduce a clipping region into the result bitmap. So I built an extension to do just that. It works well as it doesn't interfere with any of Resizer's layout calculations and the size of the returned image is whatever the height or width were specified as. Which is just what I needed. The Faces plugin has an example of introducing a clipping region.
Karlton
Cropping and re-adding 300px on each edge is best accomplished exactly the way you're doing it:
&crop=300,300,-300,-300&margin=300
What kind of improved syntax would you expect? This isn't a common operation.
I'm using a 40 x 40 sized image as a search result suggestion image in Windows 8 search. Only advice about the image format I can find is to have correct size for it (http://msdn.microsoft.com/en-us/library/windows/apps/Hh700542.aspx: "Windows will scale or crop smaller or larger images").
However, the correctly sized image blurs annoyingly. The same thing happens whether I use jpg or png. Original image looks fine, but the result suggestion in the search charm is very ugly, being still of same size! Is Windows converting the image somehow, and how could I get the image to stay crisp?
I haven't noticed blurring with photo-like images, but this image contains clear lines and areas which are vulnerable to any scaling etc.
Update Sep 24:
Here is the test image I used when trying to figure out the problem. I also created different scale versions, but in my case the 100% version was used (that's why the "100" marking) - as I supposed because the resulting image really is 40x40. As you can see, the resulting image (right) is of same size as original (left), but blurry.
it does not happen that often but it seems the right solution in this case was simply to wait ;) I haven't done anything new regarding result suggestion images in my solution and today I realized that the images became crisp. Probably fixed by any of the windows updates.
[Took a stab at answering what seems the related question mentioned in the comments, so I'm posting here as well.]
It sounds like this could be related to automatic scaling of the images. Windows will automatically scale up/down based on pixel density, and you can help things scale well by either using vector-based images or, for bitmap images, supplying scale-specific versions.
For example, to scale an image referenced in markup as "AppLogo.jpg", you'd include these images:
AppLogo.scale-100.jpg
AppLogo.scale-140.jpg
AppLogo.scale-180.jpg
You can also use folders, e.g. "\scale-140\AppLogo.jpg".
For search result images, the 100% image is the 40x40 pixel version, 140 is 56x56, and 180 is 72x72. Just reference the image as "AppLogo.jpg" and the appropriate version will be used automatically. (You can also detect scale with DisplayProperties.ResolutionScale and manually choose an image.)
Here's a couple of articles with more examples/details:
"Guidelines for scaling to pixel density"
"Quickstart: Using file or image resources"
There's also some scaling discussion in the forums (general, not specific to search) here and here.