c# - UWP Magnifier control (tool) that follows cursor

Question

I am working on an assignment right now and was asked to create an app to select an area on image with ability to magnify a part of the image around cursor.

Right now I stuck on the magnifier part. There is a Magnifier control in WPF, but how about UWP? Has anyone had any experience creating magnifier in UWP?

SO far I've found this, but UWP has different API's: http://csharphelper.com/blog/2015/06/zoom-and-crop-a-picture-in-c/

My logic is: 1. Draw circle around the cursor and re-draw it every time the cursor moves. 2. Take a screenshot (render) specified area around it 3. Magnify the are 4. Fill the circle with the magnified image (Bitmap)

Any tips or suggestions would be much appreciated. Thank you

Answer 1

1. 在光标周围画圈，每次光标移动时重新绘制。

您可以PointerMoved使用以下方法为您的面板（例如 Canvas）注册事件并获取当前指针：

private void Canvas_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    var pointer = e.GetCurrentPoint(sender as UIElement);
}

然后，您可以在其上添加 aEllipse并通过当前指针设置其位置。

2. 截取（渲染）它周围的指定区域

您可以使用RenderTargetBitmap类 API 来渲染特定区域。

3. 放大范围

您可以调整渲染目标位图的大小。检查此线程如何调整 RenderTargetBitmap 的大小。

4. 用放大的图像填充圆圈（位图）

获得最终的 rendertargetbitmap 后，您可以使用它来制作ImageBrush，然后您可以将此 ImageBrush 指定给 Ellipse 的 Fill 属性，如下所示：

ellipse.Fill = new ImageBrush() { ImageSource = renderTargetBitmap};