如何在 canvas 中的圖像上獲取繪制矩形的 position

Question

我正在創建 OCR 應用程序，我的想法是在圖像上繪制矩形以創建我想從圖像中提取文本的邊界框，而不是獲取所有 ocr 識別的文本。

我有 canvas 和里面的圖像和矩形。 圖像默認設置為 top=0 和 left=0，然后均勻拉伸以適合 canvas，因此頂部和左側仍然相同。 如何在圖像上獲得映射到 position 的矩形的 position。

使用下面的代碼和結果圖像，因為我在 canvas 上繪制矩形，矩形頂部為 100，左側為 300。 但我想在圖像上獲得矩形的 position。

<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/>

結果圖像

Answer 1

通過測試，我們無法通過使用{Binding}擴展設置Width和Height屬性來拉伸圖像以填充Canvas面板時圖像的實際大小。 Image的Width和Heigtht屬性的值實際上是Canvas的值。

您需要根據可以從相應的BitmapImage中獲取的圖像的原始大小來計算圖像的實際大小。 然后，通過計算得到圖像上矩形的position。

請檢查以下代碼：

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;