Question

我希望一旦从图库中选择图像，用户就可以在画布上移动图像，一旦满意，就可以添加另一个图像，依此类推。我通过画布的点击事件实现了前一部分，使得所选图像移动到用户在画布上轻敲的位置。难度是当我尝试选择另一个图像添加到画布时，而不是创建新图像替换画布上的现有图像。代码如下

public void chooseImage_Completed(object sender, PhotoResult e)
    {
        if (e.TaskResult != TaskResult.OK || e.ChosenPhoto == null)
        {
            return;
        }
        Image img = new Image();
        SelectedBitmap = new WriteableBitmap(160,160);
        SelectedBitmap.SetSource(e.ChosenPhoto);
        img.Source = SelectedBitmap;
        img.Name = "photo" + i++;
        imgSelected = true;
    }

 private void CollageCanvas_Tap(object sender,System.Windows.Input.GestureEventArgs e)
    {
        if (imgSelected)
        {
            pt = e.GetPosition(CollageCanvas);
            img.Source = SelectedBitmap;
            img.Name = "photo" + i++; 
            CollageCanvas.Children.Remove(img);
            CollageCanvas.Children.Add(img);
            Canvas.SetLeft(img, pt.X);
            Canvas.SetTop(img, pt.Y);             
        }
    }

我想知道是什么原因导致新图像替换现有图像，如果可能，请更正代码以获得所需的输出。

Answer 1

您没有显示所有代码，因此无法确定问题所在。但似乎只有一个img引用。这意味着每次用户选择图像时，它都会进入相同的图像元素。

以下是我如何解决这个问题。使用canvas.x绝对定位和canvas.y的FWIW是一种旧式的方法。在基于XAML的应用程序中使用Translate Transform更为常见。

XAML

<Grid Background='#FFEDB788'>
      <Grid.RowDefinitions>
        <RowDefinition Height='17*' />
        <RowDefinition Height='143*' />
      </Grid.RowDefinitions>
      <Button Content='Choose Picture'
              HorizontalAlignment='Left'
              Margin='44,10,0,0'
              VerticalAlignment='Top'
              Click='Button_Click' />
      <Canvas HorizontalAlignment='Stretch'
              Width='Auto'
              Margin='3'
              x:Name='CollageCanvas'
              Grid.Row='1'
              VerticalAlignment='Stretch'
              Background='#FF080808' />

    </Grid>

<强>代码

public MainPage() {
    InitializeComponent();

    this.Loaded += MainPage_Loaded;
  }

  private void MainPage_Loaded(object sender, RoutedEventArgs e) {
    photoChooserTask = new PhotoChooserTask();
    photoChooserTask.Completed += 
      new EventHandler<PhotoResult>(photoChooserTask_Completed);
  }

  private PhotoChooserTask photoChooserTask;
  private WriteableBitmap SelectedBitmap;
  private int i;

  public void photoChooserTask_Completed(object sender, PhotoResult e) {
    if (e.TaskResult != TaskResult.OK || e.ChosenPhoto == null)
    {
      return;
    }
    // create the image control
    Image img = new Image() { Width = 160, Height = 160 };
    SelectedBitmap = new WriteableBitmap(160, 160);
    SelectedBitmap.SetSource(e.ChosenPhoto);
    img.Source = SelectedBitmap;
    img.Name = "photo" + i++;

    // add new image control to canvas
    CollageCanvas.Children.Add(img);

    // add the ManipulationDelta event to the new image
    img.ManipulationDelta += img_ManipulationDelta;

    // Add a transform to the image
    // Eventually this transform is used to move the image to a new position
    // See  the ManipulationDelta event handler
    img.RenderTransform = new TranslateTransform();
  }

  private void img_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e) {
    // The ManipulationDelta occurs when the image is dragged to a new position
    var currentImage = sender as Image; // get the image
    var currentTransform = currentImage.RenderTransform as TranslateTransform;  // get the transform

    currentTransform.X += e.DeltaManipulation.Translation.X;
    currentTransform.Y += e.DeltaManipulation.Translation.Y;
  }

  private void Button_Click(object sender, RoutedEventArgs e) {
    photoChooserTask.Show();
  }

无法将多个图像添加到画布

1 个答案: