I have a responsive Image which is working on different mobile resolution.
I want to Ask you, when I clicked on image at any place like top-left, left-botton etc, I want to get its(image) position.Means On which position it is being clicked. I tried the following scenario While Implementation of my Source Code, I get a coordinate on particular place on which The image is clicked.
Problem: Each of Mobile device has different resolution, So, For the same scenario, the coordinate will be differed. I required the implementation like the place of clicked image should be same on every resolution.
please tell me how can I resolve my Issues, And which one is best technology, tell me if anyone has knowledge to resolve this.
There have been some previous posts that try to achieve what you want, the basic logic can be achieved by calculating ratio:
var xratio=225/420; // 420-mouse-x-coord divided by 420
var yratio=38/38; // mouse-y-coord/element height
var x=320*xratio;
var y=38*yratio;
Please see the following references:
How to convert click coordinates of different dimensions into 320 dimension size?
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
Related
I'm trying to put some logos in a chart for print them, but depending of the screen resolution logo at the right sometimes is out of the chart area and sometimes is far of the edge. I'm using stage and putting the logo with graphics.image. This is the code anychart v 8.2.1
var image = anychart.graphics.image("logo_mues2020.png", "12%", "9%",102, 43);
image.parent(container);
image = anychart.graphics.image("gepp2020.jpg", "72%", "9%", 155, 47);
image.parent(container);
container is a stage
And these are the examples in two different devices
https://imagizer.imageshack.com/img924/5741/tmDgQA.png
https://imagizer.imageshack.com/img923/7563/QuQJcI.png
does somebody has made something similar?
is there a way to fix it with the chart area or make it fit more better and really responsive?
Thanks in advance
It happens because the image size is applied in pixels, not percents. it means that the image is not resized along with the container and when the container has a small width the image goes beyond the chart.
To solve that you should use percents for the image size and apply the align setting. For details, check the sample and pay attention to lines 17 and 19.
Try to resize the chart view to see how it works.
I have applied some post processing effects to my camera. They looked fine in the free aspect minimized game view but when I maximize it or change the aspect ratio the effects look different. And also how can I make my UI elements change as the screen size changes.
Images:
This is a bug in post processing stack and is still not fixed by them. But I found a fix here.
Fix:
open the DepthOfFieldComponent.cs, remove const from before k_FilmHeight, then have it update somewhere such as in Prepare, above CalculateFocalLength, add something like: k_FilmHeight = 0.024f * (Screen.height / 720.0f);
720 can be changed to whatever number you want to use as your default screen height.
I want to create List View. In this List View, I will have following fields.
StackPanel
1- Image with 300 x 400 size
2- Text-Label Controls
1 Screen will hardly cover 1 and Half ViewCell.
Images will have ImageURL. I want to load image smoothly. I also want to make smooth scroll up/down with image appearing.
Can anybody please suggest me which control I should use?
If List View, which CacheStrategy I should use?
Note: For one of such functionality, I had used List View with default CacheStrategy. In that, I just faced 1 major problem of image appearing. When page initialize first time, it show image properly. But as soon as I scroll down or scroll up, image disappear or misplace. In that case, I had suffered a lot and removed image finally.
Please suggest appropriate way for above functionality.
Thank you.
For the listview, you should definitely use RecycleElement as the CachingStrategy. See here https://developer.xamarin.com/api/type/Xamarin.Forms.ListViewCachingStrategy/#Remarks
And because the images are URLs, you can use FFImageLoading. It will fade-in the image after it is downloaded (as opposed to appearing instantly after downloaded), and you can even specify a placeholder image to use while the image is being downloaded.
It seemed so simple just a day ago, but I can't figure it out:
How do I center an image on a page, giving it fixed % margins (10% on all sides) and still have it scale with the window on resize?
It's very important that the page and the image display well on all platforms, without scrollers (!).
The page itself is very simple and only contains the image (which on different versions of the page has different dimensions), and a bar on the top with a link to send it to another page.
The max size of the image would be 1500x1000px, no minimum size.
I wholeheartedly hope someone can help me out with this, thanks so much!
Best way to do that is using JavaScript. Get the window size, subscribe for window.onresize event and update the image size and position accordingly.
Using CSS only will NOT work, because any position properties depend on the container. In your case the container is the window, which will size itself based on the content. This creates a sort of circular dependency (window size depends on the image, the image size and position depend on the window size).
For information about getting the exact available window size in cross-browser way you could check this post: Get the size of the screen, current web page and browser window - haven't done that in a while to provide you with exact code.
Also note that you don't mention keeping the aspect ratio of the image. If it should not be maintained there is no way to do it HTML/CSS only, because all operations with them do maintain AR of images.
I've got an Image with an overlay Canvas with some rectangles whose position is relative to image's size. The problem comes when I change the phone orientation, because image size changes (or at least, the renderization) but I can't manage to re-distribute the rectangles according to the new size, and the OrientationChanged event doesn't help me because it's fired before rendering the image (so all the rectangles go to (0,0))
Anyone can help me finding the correct event?
I'd either not use percentage widths or save them as exact values when first rendered/measured for one orientation. You can then adjust the dimensions relative to the orientation.
Update
If you can't get the exact values passed to you then you coudl load the image where teh user can't see it to measure it.
If you're getting the image and positions from an external source which always assumes a portrait orientation then why not just always display it as such in your app.
Finally got it!
The event I was looking for was the SizeChanged, I can't imagine how I didn't see it before...