c# - WinRT : How do I ensure Images are drawn in a pixel-perfect way on a Canvas?

Question

我正在添加 Image实例到 Canvas在 Windows 运行时环境中，我的图像在 140 和 180 比例分辨率显示器中不断放大，它在比例分辨率 100 中看起来很完美。我尝试创建 3 个 PNG 图像，每个比例大小一个:100、140、180，但它仍然可以缩放他们起来，他们看起来很模糊。我在青色背景上创建了一个带有 4 个黑色像素的测试图像，然后我从模拟器中截取了一个屏幕截图，看看图像是如何模糊的，我的原始图像只有 4 个完美的黑色像素:

我尝试更改我的 Image 对象的拉伸(stretch)模式，但它没有任何作用。我正在使用此代码在运行时添加图像:

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

如何让图像在 Canvas 中完美地绘制像素而不缩放并且在我想要的精确 x/y 坐标处？

Answer 1

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

首先，我必须使用更标准的方式加载图像，而不涉及像这样获取文件路径。

var bitmapImage = new BitmapImage(imageUri);

这必须以某种方式在内部保留更多信息，即该图像来自具有当前显示的相应 ResolutionScale 的文件。因此，当它被 Canvas 绘制时，它根本不会缩放。然而，这只解决了一半的问题。

下一个问题是用于指定图像绘制位置的 x、y 坐标正在缩放，因此图像绘制在错误的位置，比我想要的位置更远。我唯一能做的就是首先像这样取消缩放它们:

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 类需要一种未缩放模式，该模式不会混淆不同分辨率显示器上的图像或坐标。

更新:这并不完美，使用 double 值存储值会导致精度损失，有时还会出现抗锯齿伪像。如果您想要像素完美的图形，这是 Not Acceptable 。我仍在寻找完美的解决方案。