Xamarin Forms中使用SkiaSharp在图片上方高亮指定区域的技术问题咨询

根据你提供的代码，目前SKCanvasView在Grid的下方区域，没法覆盖到图片上层，我给你两个简单可行的方案，完美适配你当前的ContentPage结构：

方案一：利用Grid的渲染顺序实现覆盖 #

Grid里元素的显示层级是按代码书写顺序来的——后面写的元素会自动覆盖在前面的元素之上。你只需要调整SKCanvasView的位置，让它和Image共享同一行，并放在Image代码的后面：

<ContentPage>
  <ContentPage.Content>
    <Grid>
      <!-- 保留你原有的行、列定义 -->
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <!-- 其他行配置... -->
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>

      <!-- 图片放在前面 -->
      <Image Grid.Column="0" Grid.Row="0" x:Name="myStoryPage" Grid.ColumnSpan="3" Source="你的图片路径"/>
      
      <!-- 上一页、下一页按钮（如果需要让按钮在绘制层上方，就放在SKCanvasView后面） -->
      <Button Grid.Row="1" Grid.Column="0" Text="上一页"/>
      <Button Grid.Row="1" Grid.Column="2" Text="下一页"/>

      <!-- SKCanvasView放在图片后面，共享同一行，直接覆盖在图片上方 -->
      <skiaforms:SKCanvasView x:Name="canvasView" PaintSurface="canvasView_PaintSurface" 
                              Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"/>
    </Grid>
  </ContentPage.Content>
</ContentPage>

这个方案最简单，不需要额外容器，完全利用Grid的特性实现层级覆盖，你依然可以通过C#代码动态控制SKCanvasView的大小和绘制内容。

方案二：在Grid行内嵌套AbsoluteLayout实现精准定位 #

如果需要更灵活的动态位置控制（比如只让绘制层覆盖图片的某一块区域），可以把Image和SKCanvasView放到同一个Grid行的AbsoluteLayout里：

<ContentPage>
  <ContentPage.Content>
    <Grid>
      <!-- 保留你原有的行、列定义 -->
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
          <!-- 其他行配置... -->
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>

      <!-- 用AbsoluteLayout包裹图片和绘制层，实现重叠布局 -->
      <AbsoluteLayout Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3">
          <Image x:Name="myStoryPage" 
                 AbsoluteLayout.LayoutBounds="0,0,1,1" 
                 AbsoluteLayout.LayoutFlags="All" 
                 Source="你的图片路径"/>
          <!-- 这里可以通过LayoutBounds自由控制绘制层的位置、宽高 -->
          <skiaforms:SKCanvasView x:Name="canvasView" 
                                  PaintSurface="canvasView_PaintSurface" 
                                  AbsoluteLayout.LayoutBounds="10,0,5,65" 
                                  AbsoluteLayout.LayoutFlags="None"/>
      </AbsoluteLayout>

      <!-- 上一页、下一页按钮 -->
      <Button Grid.Row="1" Grid.Column="0" Text="上一页"/>
      <Button Grid.Row="1" Grid.Column="2" Text="下一页"/>
    </Grid>
  </ContentPage.Content>
</ContentPage>

在C#代码里，你还能随时动态修改绘制层的位置：

// 示例：把绘制层移到(50,50)位置，宽200高150
AbsoluteLayout.SetLayoutBounds(canvasView, new Rect(50, 50, 200, 150));

这两个方案都不需要改动你当前的ContentPage根布局，直接就能实现图片上方的高亮绘制需求。

内容的提问来源于stack exchange，提问作者Rauf