滚动时平滑图像剪辑

Question

因此，当您使用 PhotoChooserTask 时，我正在尝试实现类似于原生裁剪器的效果。如果您不熟悉，背景中有一个顶部有边框的图像，并且图像在进出边框时似乎会改变不透明度。下面的代码工作正常，但不是很流畅（剪辑的图像稍微落后于拖动运动）。有什么方法可以加快剪辑或更改内容以减少延迟？我有以下 XAML：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid x:Name="cropContainer" Width="375" MouseLeftButtonDown="cropContainer_MouseLeftButtonDown" MouseLeftButtonUp="cropContainer_MouseLeftButtonUp" MouseMove="cropContainer_MouseMove">
        <Grid.RenderTransform>
            <TranslateTransform x:Name="cropTransform" />
        </Grid.RenderTransform>
        <Image x:Name="fullImage" Source="{Binding Image}" Opacity=".5" />
        <Image x:Name="clippedImage" Source="{Binding Image}">
            <Image.Clip>
                <RectangleGeometry Rect="0,0,375,267" />
            </Image.Clip>
        </Image>
    </Grid>
</Grid>
<Border x:Name="cropBorder" Grid.Row="1" BorderThickness="1" BorderBrush="White" Opacity="1" Height="267.90571169537624660018132366274" Width="375">
</Border>

这里是滑动过程中跟踪和剪辑的代码：

private Point _cropBorderOffset, _original, _newPosition;
private bool _moving;
private double _maxUp, _maxDown;

void Page_Loaded(object sender, RoutedEventArgs e)
{
    var transform = cropBorder.TransformToVisual(Application.Current.RootVisual);
    _cropBorderOffset = transform.Transform(new Point(0, 0));

    _maxDown = ((fullImage.ActualHeight - cropBorder.ActualHeight) / 2);
    _maxUp = -_maxDown;

    var rect = (clippedImage.Clip as RectangleGeometry).Rect;
    (clippedImage.Clip as RectangleGeometry).Rect = new Rect(rect.X, (fullImage.ActualHeight / 2) - 134, rect.Width, rect.Height);
}

private void cropContainer_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    cropContainer.CaptureMouse();
    _original = e.GetPosition(cropBorder);
    _moving = true;
}

private void cropContainer_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    cropContainer.ReleaseMouseCapture();
    _moving = false;
}

private void cropContainer_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
    _newPosition = e.GetPosition(cropBorder);

    if(_moving)
    {
        var deltaY = _newPosition.Y - _original.Y;

        var transform = fullImage.TransformToVisual(Application.Current.RootVisual);
        var fullImageOffset = transform.Transform(new Point(0, 0));

        var marginTop = deltaY;

        //Too far down
        if (marginTop > _maxDown)
        {
            marginTop = _maxDown;
        }
        //Too far up
        else if (marginTop < _maxUp)
        {
            marginTop = _maxUp;
        }

        cropTransform.Y = marginTop;

        var rect = (clippedImage.Clip as RectangleGeometry).Rect;
        (clippedImage.Clip as RectangleGeometry).Rect = new Rect(rect.X, _cropBorderOffset.Y - fullImageOffset.Y, rect.Width, rect.Height);
    }
}

Answer 1

除了绘制图像两次，一次有剪切，一次没有，你能不能简单地绘制半透明矩形来遮挡边缘并为中心绘制一个白色轮廓？这应该会大大减少延迟。

一旦选择了位置，您就可以使用剪切矩形的左侧、顶部、宽度和高度来实际在内存中进行裁剪。