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

问题描述

我要添加将实例映射到 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:

我试图改变我的Image对象的拉伸模式，但它什么也不做。我使用这个代码在运行时添加图像：

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);

如何让图像在画布上完美地绘制像素而不缩放

How do I get the images to draw pixel perfectly in the canvas without scaling and at the exact x/y coordinates I want?

推荐答案

我想我有一个解决方法，但它需要两个步骤：

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.

UPDATE ：This doesn完全工作，使用双精度存储值导致精度损失，有时还有抗锯齿伪像。这是不可接受的，如果你想像素完美的图形。我仍在寻找一个完美的解决方案。

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屋！