0

WPF Image コントロールに移動可能な四角形を配置する必要があります。ユーザーが長方形を移動した後にボタンをクリックすると、 Rect 座標が得られます。

これが非常に難しいことを想像することはできませんが、理解できません。マウスで長方形を描いてから画像をトリミングする例をいくつか見つけましたが、それは私が必要とするものではありません。

Image とそのプロパティを表示できる UserControl のコードを次に示します。上で説明したように、画像上に移動可能な長方形を配置する必要があります。

これを達成する方法はありますか？

    <UserControl x:Class="Test.View.UserControls.PhotoEditorControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="500"
             d:DesignWidth="400"
             x:Name="photoEditorControl">
  <UserControl.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="../../Styles.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </UserControl.Resources>
  <Grid Background="Transparent"
        Visibility="{Binding ElementName=photoEditorControl,Path=ControlVisibility, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
    <Grid Name="popupBackground"
          Grid.RowSpan="4">
      <Grid.Background>
        <SolidColorBrush Color="#9995AE"
                         Opacity="0.3" />
      </Grid.Background>
    </Grid>
    <Border BorderBrush="Black"
            Background="WhiteSmoke"
            BorderThickness="1"
            CornerRadius="15"
            DockPanel.Dock="Bottom"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
      <Border.BitmapEffect>
        <DropShadowBitmapEffect Color="Black"
                                Opacity="0.5"
                                Direction="270"
                                ShadowDepth="0.7" />
      </Border.BitmapEffect>
      <Grid Width="380"
            Height="450">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
          <RowDefinition Height="150" />
          <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Border Margin="15,15,15,0"
                Background="WhiteSmoke"
                Grid.Row="1"
                Grid.ColumnSpan="2"
                VerticalAlignment="Top"
                HorizontalAlignment="Center">
          <Border.Effect>
            <DropShadowEffect ShadowDepth="3"
                              Color="LightGray" />
          </Border.Effect>
          <Image Source="{Binding ElementName=photoEditorControl, Path=Image.MediumUrl, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                 Stretch="Uniform">
          </Image>
        </Border>
        <Grid Grid.Row="2"
              Grid.ColumnSpan="2">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="150*" />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="25" />
          </Grid.RowDefinitions>
          <TextBlock Name="textBlock1"
                     Text="Properties"
                     Grid.ColumnSpan="2"
                     HorizontalAlignment="Center"
                     Style="{StaticResource InfoLabel}" />
          <TextBlock Grid.Row="1"
                     Name="textBlockName"
                     Text="Filename:"
                     Style="{StaticResource InfoLabel}" />
          <TextBlock Grid.Row="2"
                     Name="textBlockAlbum"
                     Text="Original name:"
                     Style="{StaticResource InfoLabel}" />
          <TextBlock Grid.Row="3"
                     Name="textBlockFilesize"
                     Text="Filesize:"
                     Style="{StaticResource InfoLabel}" />
          <TextBlock Grid.Row="4"
                     Name="textBlockSize"
                     Text="Size:"
                     Style="{StaticResource InfoLabel}" />
          <TextBlock Grid.Row="5"
                     Name="textBlockSavedDate"
                     Text="Upload date:"
                     Style="{StaticResource InfoLabel}" />
          <TextBlock Grid.Row="1"
                     Grid.Column="1"
                     Name="textBlockNameData"
                     Margin="4"
                     Text="{Binding ElementName=photoEditorControl, Path=Image.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
          <TextBlock Grid.Row="2"
                     Grid.Column="1"
                     Name="textBlockOriginalNameData"
                     Margin="4"
                     Text="{Binding ElementName=photoEditorControl, Path=Image.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
          <TextBlock Grid.Row="3"
                     Grid.Column="1"
                     Name="textBlockFileSizeData"
                     Margin="4"
                     Text="{Binding ElementName=photoEditorControl, Path=Image.FileSize, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
          <TextBlock Grid.Row="4"
                     Grid.Column="1"
                     Name="textBlockSizeData"
                     Margin="4">
              <TextBlock.Text>
                <MultiBinding StringFormat="{}{0}x{1}">
                  <Binding ElementName="photoEditorControl"
                           Path="Image.Width"
                           Mode="TwoWay"
                           UpdateSourceTrigger="PropertyChanged" />
                  <Binding ElementName="photoEditorControl"
                           Path="Image.Height"
                           Mode="TwoWay"
                           UpdateSourceTrigger="PropertyChanged" />
                </MultiBinding>
              </TextBlock.Text>
          </TextBlock>
          <TextBlock Grid.Row="5"
                     Grid.Column="1"
                     Name="textBlockUploadDateData"
                     Margin="4"
                     Text="{Binding ElementName=photoEditorControl, Path=Image.DateUploaded, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        </Grid>
        <Button Content="Close"
                Grid.Row="3"
                Height="30"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                Margin="10 5 5 10"
                Name="buttonCancel"
                Width="75"
                Command="{Binding ElementName=photoEditorControl, Path=CloseControlCommand}" />
        <Button Content="Done"
                Grid.Column="1"
                Grid.Row="3"
                Height="30"
                Margin="5 5 10 10"
                HorizontalAlignment="Right"
                VerticalAlignment="Center"
                Name="buttonDone"
                Width="75"
                Visibility="Visible" />
      </Grid>
    </Border>
  </Grid>
</UserControl>

完全な UserControl コードが表示されないのはなぜですか? edit を vlick すると、テキスト エディタに表示されます。

4

2 に答える 2

1

XAML:

<Window x:Class="moveableRectangle.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Image Name="Image" Source="bsp.jpg" MouseMove="Image_MouseMove" MouseUp="Rectangle_MouseLeftButtonUp" />
    <Rectangle Name="Rect"  Width="100" Height="100" Fill="Transparent"  Stroke="Red" StrokeThickness="5" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp"  />
</Grid>

コードビハインド:

 public partial class MainWindow : Window
{
    private bool moveRect;
    TranslateTransform trans = null;
    Point originalMousePosition;
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        moveRect = true;
        originalMousePosition = e.GetPosition(Image);
        Rect.IsHitTestVisible = false;

    }

    private void Image_MouseMove(object sender, MouseEventArgs e)
    {
        if (moveRect)
        {
            trans = Rect.RenderTransform as TranslateTransform;
            if (trans == null)
            {
                Rect.RenderTransformOrigin = new Point(0, 0);
                trans = new TranslateTransform();
                Rect.RenderTransform = trans;

            }
            trans.Y = -(originalMousePosition.Y - e.GetPosition(Image).Y);
            trans.X = -(originalMousePosition.X - e.GetPosition(Image).X);
        }
        e.Handled = false;
    }

    private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        moveRect = false;
        Rect.IsHitTestVisible = true;
    }


}
于 2013-06-19T15:11:03.163 に答える
0

この単純な XAML を使用しました。

<Grid Name="grdBoard">
    <Image Source="http://lorempixel.com/400/200/sports/" />
    <Rectangle Name="rctRectangle" Fill="Transparent" Stroke="Yellow" StrokeThickness="2" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
<Button Content="Get the coordinates" Name="btnGetCoordinates"/>
<TextBlock Name="txtOutput" />

これは長方形を移動するコードです。いつでも、ボタンをクリックすると、余白を取得することで四角形の位置を取得できます。

public partial class MainWindow : Window
{
    bool IsMouseDown;

    public MainWindow()
    {
        InitializeComponent();
        rctRectangle.MouseLeftButtonDown += StartMoveRectangle;
        rctRectangle.MouseLeftButtonUp += EndMoveRectangle;
        rctRectangle.MouseMove += MoveRectangle;
    }

    private void GetCoordinates()
    {
        Thickness margin = rctRectangle.Margin;
        double x = margin.Left;
        double y = margin.Top;
        WriteToOutput("Coordinates are: X = " + x + " and Y = " + y);
    }

    private void StartMoveRectangle(object sender, EventArgs e) 
    {
        IsMouseDown = true;
    }

    private void MoveRectangle(object sender, MouseEventArgs e)
    {
        if (IsMouseDown)
        {
            Point cursorposition = e.GetPosition(grdBoard);
            rctRectangle.Margin = new Thickness(cursorposition.X - (rctRectangle.Width / 2), cursorposition.Y - (rctRectangle.Height / 2), 0, 0);
        }
    }

    private void EndMoveRectangle(object sender, EventArgs e)
    {
        IsMouseDown = false;
    }

    private void WriteToOutput(string text)
    {
        txtOutput.Text = text;
    }
}

これがあなたがしようとしていたものかどうか教えてください。

于 2013-06-19T15:28:36.820 に答える