如何在画布中的图像上获取绘制矩形的位置答案

【问题标题】：How to get position of drawn rectangle on image in canvas如何在画布中的图像上获取绘制矩形的位置
【发布时间】：2020-11-30 13:45:59
【问题描述】：

我正在创建 OCR 应用程序，我的想法是在图像上绘制矩形以创建边界框，从该边界框我想从图像中提取文本，这样就不会获取所有 ocr 识别的文本。

我有画布，里面有图像和矩形。图像默认设置为 top=0 和 left=0，然后均匀拉伸以适合画布，因此顶部和左侧仍然相同。如何将矩形的位置映射到图像上的位置。

使用下面的代码和结果图像，因为我在画布上绘制矩形，矩形顶部为 100，左侧为 300。但我想获取图像上矩形的位置。

<Grid Grid.Row="1">
        <Canvas 
            Background="Aquamarine"
            x:Name="CanvasImagePreview"
            SizeChanged="Canvas_SizeChanged"
            PointerPressed="Canvas_PointerPressed"
            PointerReleased="Canvas_PointerReleased"
            PointerMoved="Canvas_PointerMoved"
            >
            <Image x:Name="ImagePreview"
                   Width="{Binding Path=ActualWidth, ElementName=CanvasImagePreview}" 
                   Height="{Binding Path=ActualHeight, ElementName=CanvasImagePreview}" 
                  Stretch="Uniform"/>
           
            <Rectangle 
                x:Name="BoudingBox_Rect"
                RadiusX="10"
                RadiusY="10"
                StrokeThickness="3"
                Stroke="Red"
                Visibility="Collapsed"
                />
        </Canvas>
    <Grid/>

result image

【问题讨论】：

标签： c# uwp

【解决方案1】：

通过测试，通过使用{Binding}扩展设置Width和Height，当图像被拉伸以填充Canvas面板时，我们无法得到图像的实际大小财产。 Image的Width和Heigtht属性的值是Canvas的实际值。

您需要根据对应的BitmapImage获取图片的原始大小来计算图片的实际大小。然后，通过计算得到矩形在图像上的位置。

请检查以下代码：

var CanvasActualHeight = CanvasImagePreview.ActualHeight;
var CanvasActualWidth = CanvasImagePreview.ActualWidth;
double visualHeight=0.0;
double visualWeight=0.0;

BitmapImage bitmapImage = (BitmapImage)ImagePreview.Source;
if(bitmapImage!=null)
{
    var originalHeight = bitmapImage.PixelHeight;
    var originalWidth = bitmapImage.PixelWidth;
    
    if((CanvasActualHeight / originalHeight) >(CanvasActualWidth / originalWidth))
    {
        visualHeight = originalHeight* CanvasActualWidth / originalWidth;
        visualWeight = CanvasActualWidth;
    }
    else
    {
        visualHeight = CanvasActualHeight;
       visualWeight = originalWidth * CanvasActualHeight / originalHeight;
    }
}

var relativeToCanvasTop = BoudingBox_Rect.Margin.Top;
var relativeToCanvasLeft = BoudingBox_Rect.Margin.Left;

var relativeToImageTop = BoudingBox_Rect.Margin.Top - (CanvasActualHeight - visualHeight)/2;
var relativeToImageLeft = BoudingBox_Rect.Margin.Left-(CanvasActualWidth - visualWeight)/2;

【讨论】：