如何使用 C# WPF 在图像上显示字母

Question

我正在使用 C# WPF 构建一个应用程序。我正在使用 MVVM 架构。我想在给定坐标的图像上显示一些字母。到目前为止，我唯一能做的就是使用“几何”类渲染一些形状，比如矩形。

我附上了一张图片供参考。

网格是图像（PNG 文件）

下面是我当前的视图模型和 XAML 文件代码。

视图模型

public class InspectionGridViewModel : RegionViewModelBase
{
    public ObservableCollection<Drawing> Drawings { get; set; }

    public InspectionGridViewModel(IRegionManager regionManager, ILogger<InspectionGridViewModel> logger, MainModuleConfiguration configuration) : base(regionManager, logger)
    {
        PlotMarkersInTheGrid();
    }

    public void PlotMarkersInTheGrid()
    {
        Drawings = new ObservableCollection<Drawing>();
        Drawings.Add(new Drawing
        {
            Geometry = new StreamGeometry(),
            Fill = Brushes.LightBlue,
            Stroke = Brushes.Blue,
            StrokeThickness = 2
        });
        Drawings.Add(new Drawing
        {
            Geometry = new RectangleGeometry(new Rect(50, 150, 100, 60)),
            Fill = Brushes.LightGreen,
            Stroke = Brushes.Green,
            StrokeThickness = 2
        });
    }
}

public class Drawing
{
    public Geometry Geometry { get; set; }
    public Brush Fill { get; set; }
    public Brush Stroke { get; set; }
    public double StrokeThickness { get; set; }
}

XAML 文件

<ItemsControl ItemsSource="{Binding Drawings}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Path Data="{Binding Geometry}"
              Fill="{Binding Fill}"
              Stroke="{Binding Stroke}"
              StrokeThickness="{Binding StrokeThickness}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

我想知道的第一件事。这可能吗？如果是这样，任何人都可以帮助我吗？

Answer 1

您使用TextBlock 并使用ViewBox 来缩放它，而不是弄乱几何图形怎么样？您可以将这些放在Canvas 中，类似于您尝试对这些几何项目执行的操作。因此，您的 XAML 将与您已有的非常相似，但将项目模板化为 ViewBox。

<ItemsControl ItemsSource="{Binding Path=Markers}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Viewbox Width="{Binding Size}" Height="{Binding Size}">
                <TextBlock Text="{Binding MarkerText}" />
            </Viewbox>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding Path=PosX}" />
            <Setter Property="Canvas.Top" Value="{Binding Path=PosY}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

请注意，ItemContainerStyle 用于定位，因为画布的直接子级需要使用 Canvas.Left 和 Canvas.Top 属性。

有了这些，然后查看这些模型 ..

public class InspectionGridViewModel
{
    public ObservableCollection<MarkerViewModel> Markers { get; } = new ObservableCollection<MarkerViewModel>();

    public InspectionGridViewModel()
    {
        Markers = new ObservableCollection<MarkerViewModel>()
        {
            new MarkerViewModel()
            {
                MarkerText = "A",
                Size = 50,
                PosX = 10,
                PosY = 20
            },
            new MarkerViewModel()
            {
                MarkerText = "B",
                Size = 100,
                PosX = 80,
                PosY = 50
            }
        };
    }
}

public class MarkerViewModel
{
    public string MarkerText { get; set; }
    public int PosX { get; set; }
    public int PosY { get; set; }
    public int Size { get; set; }
}

我得到以下结果。我想这就是你要找的。​​p>