如何在背景图像上保持WPF元素的相对位置 [英] How to keep relative position of WPF elements on background image

问题描述

我是 WPF 的新手，所以以下问题的答案可能很明显，但对我来说不是.我需要显示一个图像，用户可以在上面设置标记(例如:您可能想用矩形在照片上标记一个人的脸)，但是在缩放图像时，标记必须保持其相对位置.

I am new to WPF, so the answer to the following question might be obvious, however it isn't to me. I need to display an image where users can set markers on (As an example: You might want to mark a person's face on a photograph with a rectangle), however the markers need to keep their relative position when scaling the image.

目前，我是通过使用 Canvas 并将 ImageBrush 设置为背景来实现的.这将显示图像，我可以在图像顶部添加诸如 Label 的元素(作为矩形的替换).但是，当我设置这样的标签时，它的位置是绝对的，因此当缩放基础图片时(因为用户将窗口拖动得更大)， Label 会停留在其绝对位置(例如100,100)移到新位置，使其与基础图像保持同步".

Currently I am doing this by using a Canvas and setting an ImageBrush as Background. This displays the image and I can add elements like a Label (as replacement for a rectangle) on top of the image. But when I set a label like this, it's position is absolute and so when the underlying picture is scaled (because the user drags the window larger) the Label stays at it's absolute position (say, 100,100) instead of moving to the new position that keeps it "in sync" with the underlying image.

简而言之:当我在一个人的眼睛上放置一个标记时，缩放窗口后，该标记就不应在该人的耳朵上.

To cut the matter short: When I set a marker on a person's eye, it shouldn't be on the person's ear after scaling the window.

关于如何在WPF中执行此操作的任何建议?也许 Canvas 首先是错误的方法?我可以在代码中保留一组标记，并在每次调整窗口大小时重新计算它们的位置，但是我希望有一种方法可以让WPF对我有用:-)

Any suggestions on how to do that in WPF? Maybe Canvas is the wrong approach in the first place? I could keep a collection of markers in code and recalculate their position every time the window gets resized, but I hope there is a way to let WPF do that work for me :-)

我很想听听您对此的看法.谢谢

I am interested in hearing your opinions on this. Thanks

推荐答案

在我的头上，您可以编写一个转换器类，该类占一定百分比并返回绝对位置.例如，如果您的窗口是200 X 200，并且在将窗口缩放到400 X 400时将标签放置在100 X 100，则标签将保留在原位置(根据您的原始问题).但是，如果使用转换器，则可以将标签位置设置为其父容器大小的50％，则随着窗口缩放，标签将随之移动.

Of the top of my head you could write a converter class that would take in a percentage and return an absolute position. As an example if your window was 200 X 200 and you placed the label at 100 X 100 when you scale the window to 400 X 400 the label would stay where it is (as per your original question). However if you used a converter so that instead you could set the labels position to 50% of its parent container's size then as the window scaled the label would move with it.

您可能还需要为宽度和高度使用相同的转换器，以使其尺寸也增加以匹配.

You may also need to use the same converter for width and height so that it increased in size to match as well.

很抱歉，由于缺少细节，如果有机会，我会在一段时间内使用示例代码进行编辑.

Sorry for the lack of detail, if I get a chance I'll edit this with example code in a little while.

编辑后添加

这个问题给出了百分比转换器的一些代码.

This question gives some code for a percentage converter.

这篇关于如何在背景图像上保持WPF元素的相对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！