WinRT的：我如何确保图像在一个画布像素完美的方式绘制的？ [英] WinRT: How do I ensure Images are drawn in a pixel-perfect way on a Canvas?

问题描述

我加入图片实例到帆布在Windows运行环境和我的形象不断得到扩大规模的时候在140和180级分辨率的显示器，它看起来完美的尺度分辨率100.我尝试创建3 PNG图像，每个刻度尺寸：100，140，180，但它仍然扩展他们和他们看起来模糊。我青色背景创建的测试图像与4黑色像素，我把截图从模拟器，看到的图像是如何模糊，我的原始图像刚刚4完美的黑色像素：

I am adding Image instances to a Canvas in Windows Runtime environment and my image keeps getting scaled up when in 140 and 180 scale resolution displays, it looks perfect in scale resolution 100. I tried creating 3 PNG images, one for each scale size: 100, 140, 180 but it still scales them up and they look blurry. I created a test image with 4 black pixels on a cyan background and I took a screenshot from the simulator, see how the image is blurry, my original image has just 4 perfect black pixels:

我试图改变我的形象对象的拉伸模式，但不起任何作用。我使用这个代码在运行时添加图像：

I tried changing the stretch mode of my Image objects, but it does nothing. I'm using this code to add the images at runtime:

var bitmapImage = new BitmapImage();
StorageFile bitmapFile = await StorageFile.GetFileFromApplicationUriAsync(imageUri);
await bitmapImage.SetSourceAsync(await bitmapFile.OpenReadAsync());

Image image = new Image{ Source = bitmapImage};
image.SetValue(Canvas.LeftProperty, x);
image.SetValue(Canvas.TopProperty, y);
canvas.Children.Add(image);

如何我得到的图像在画布上完全借鉴像素不进行缩放，并在确切的x / y坐标我想

推荐答案

我觉得我有一个解决办法，但它需要两个步骤？

I think I have a workaround, but it requires two steps:

首先我采用了较为标准的方式，不涉及越来越像这样的文件路径来加载图像。

First I have to load the image using a more a standard way that doesn't involve getting the file path like so.

var bitmapImage = new BitmapImage(imageUri);

不知怎的，这必须在内部保留更多的信息，这种图像从文件中附带当前对应ResolutionScale显示。因此，当它被画布绘制它不是在所有的缩放。然而，这只是解决了问题的一半。

Somehow this must retain more information internally that this image came from a file with the corresponding ResolutionScale for the current display. Thus when it is drawn by the canvas it is not scaled at all. However this only solves half the problem.

接下来的问题是，X，Y坐标用于指定绘制图像被缩放，图像被放错了地方绘制，进一步不到哪里我通缉。我可以计算做的唯一的事情就是unscale他们第一次像这样：

The next problem is that the x, y coordinates used to specify where the image is drawn are being scaled so the image is drawn in the wrong place, further than where I wanted. The only thing I can figure to do is unscale them first like so:

var resScale = DisplayInformation.GetForCurrentView().ResolutionScale;
Image image = new Image{ Source = bitmapImage};
image.SetValue(Canvas.LeftProperty, (x * 100.0) / (int)resScale);
image.SetValue(Canvas.TopProperty, (y * 100.0) / (int)resScale);
canvas.Children.Add(image);

整个事情似乎有点疯狂，但它似乎工作至今......任何人都有一个更好的溶液或解释这一切为什么是必要的？ 。好像Canvas类需要一个未缩放模式，它不惹的图像或在不同分辨率的显示器坐标

The whole thing seems a bit crazy but it seems to work so far... Anyone have a better solution or an explanation why all this is necessary? Seems like the Canvas class needs an unscaled mode that doesn't mess with the images or coordinates across different resolution displays.

更新：这并未T很好地工作，采用了双存储在精度损失的数值结果，有时有抗混叠假象。如果你想像素完美的图形，这是不能接受的。我仍然在寻找一个完美的解决方案。

UPDATE: This doesn't work perfectly, using a double to store the value results in precision loss and sometimes there are anti-aliasing artifacts. This is not acceptable if you want pixel perfect graphics. I am still looking for a perfect solution.

这篇关于WinRT的：我如何确保图像在一个画布像素完美的方式绘制的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！