0

画像があり、四角形を使用してトリミングしたい場合、以下のコードは、画像を配置して画像の中央に四角形を描画するコードです:

MainPage.Xaml:

<Canvas x:Name="canvas" HorizontalAlignment="Center" VerticalAlignment="Center" Width="340" Height="480" Background="Blue">
        <Image x:Name="photo" HorizontalAlignment="Center" VerticalAlignment="Center" ManipulationMode="All">
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
        </Image>
        <Path Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <RectangleGeometry Rect="0,0,340,480"/>
            </Path.Data>
        </Path>
    </Canvas>

画像を正常に表示し、長方形を描画しました。サンプル画像は以下のとおりです。 ここに画像の説明を入力

ボタンをクリックして、長方形内の画像をトリミングします（自動クリップではありません）。画像が読み込まれると、長方形が自動的に追加されます。したがって、「Point Pressed」と「Point Released」は使用できません。また、画像を自動的にクリップするため、「rectangle.clip」も使用できません。どうすれば解決できますか？ありがとう

更新: 画像を移動できます。データをバインドして四角形の座標を動的に設定するにはどうすればよいですか? 以下のコードは、画像を変換するものです。ありがとう。

public sealed partial class MainPage: Page
{
        private CompositeTransform compositeTranslation;

        public MainPage()
        {
            this.InitializeComponent();
            photo.ManipulationDelta += Composite_ManipulationDelta;
            compositeTranslation = new CompositeTransform();
            photo.RenderTransform = this.compositeTranslation;
        }

        void Composite_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            // scale the image.
            compositeTranslation.CenterX = photo.ActualWidth / 2;
            compositeTranslation.CenterY = photo.ActualHeight / 2;
            compositeTranslation.ScaleX *= e.Delta.Scale;
            compositeTranslation.ScaleY *= e.Delta.Scale;
            compositeTranslation.TranslateX += e.Delta.Translation.X;
            compositeTranslation.TranslateY += e.Delta.Translation.Y;
        }
}
4

1 に答える 1

3

または XAML は混乱を招くため、使用していません。だから私はあなたの問題に従ってスニペットを作成しました。それを試して、結果を教えてください。あなたが投稿したものと同じ画像を使用しました

XAML

<Page.BottomAppBar>
    <AppBar IsSticky="True" IsOpen="True">
        <Button Content="Crop" Click="btnCrop_Click" />
    </AppBar>
</Page.BottomAppBar>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Image x:Name="photo" HorizontalAlignment="Center" VerticalAlignment="Center" ManipulationMode="All" Source="http://i.stack.imgur.com/UIBSp.png" />
    <Path x:Name="path" Stroke="Red" StrokeThickness="3">
        <Path.Data>
            <RectangleGeometry Rect="545,212,440,420"/>
        </Path.Data>
    </Path>
</Grid>

C#

private void btnCrop_Click(object sender, RoutedEventArgs e)
{
    var _rect = new RectangleGeometry();
    _rect.Rect = path.Data.Bounds;
    photo.Clip = _rect;
}
于 2013-10-06T18:26:06.443 に答える