如何在触摸时旋转图像并将图像拖到另一个图像上 [英] How to rotate an Image on touch and Drag image over another Image

问题描述

我正在开发一个应用程序，我需要一个包含许多图像的图库.我想要做的是当用户点击/点击任何图像时，它应该将该图像旋转到 90 度，如果用户将任何图像拖动到任何其他图像的顶部，那么这些图像应该切换它们的位置(或者我们可以说交换放在一起).

I'm developing an app where I need a gallery which will have many images. And what I want to do is when user Tap/click on any image it should rotate that image to 90 degree, And if user drag any image to the top of any other image then those images should switch their places (or we can say swap places with each other).

说明:

A B C

D E F

假设上面是我画廊的图像，所以如果用户将图像 A 拖到图像 E 的顶部，那么画廊应该看起来像这样

Suppose above is the images of my gallery so if user drag image A on top of image E then gallery should look like this

E B C

D A F

我正在使用 UICollectionView 制作我的画廊.这是我到目前为止所做的.

I'm using UICollectionView for making my gallery. Here is what I have done so far.

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.imageArray = [NSArray arrayWithObjects:@"angry_birds_cake.jpg", @"creme_brelee.jpg", @"egg_benedict.jpg", @"full_breakfast.jpg", @"green_tea.jpg", @"ham_and_cheese_panini.jpg", nil];

    [self.collectionView registerClass:[ClosetsCell class] forCellWithReuseIdentifier:@"ClosetsCell"];
    [self.collectionView setPagingEnabled:YES];

    // Configure layout
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    [flowLayout setItemSize:CGSizeMake(100, 100)];
    [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
    [self.collectionView setCollectionViewLayout:flowLayout];
}

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
        return [self.imageArray count];
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    // Setup cell identifier
    static NSString *cellIdentifier = @"ClosetsCell";

    ClosetsCell *cell = (ClosetsCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];

    cell.imageView.image = [UIImage imageNamed:[self.imageArray objectAtIndex:indexPath.row]];
    cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"checked.png"]];

    // Return the cell
    return cell;

}

-(CGFloat) collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
    return 1;
}

-(CGFloat) collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 4;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellIdentifier = @"ClosetsCell";

    ClosetsCell *cell = (ClosetsCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];

    printf("Selected View index=%d",indexPath.row);

    cell.imageView.transform = CGAffineTransformMakeRotation(M_PI_2);

}

但我认为 CGAffineTransformMakeRotation 在我的案例中不起作用.

But I don't think that CGAffineTransformMakeRotation will work in my Case.

推荐答案

就轮换而言，您可以通过以下方式实现:

As far as rotation is concerned, here's how you can achieve this:

CGAffineTransform rotation = CGAffineTransformMakeRotation(M_PI / 2.0);

/* If you want an animation
[UIView beginAnimations: @"" context: NULL];
[UIView setAnimationDuration: 0.3];
*/

cell.imageView.transform = CGAffineTransformConcat(cell.transform, rotation);

/*[UIView commitAnimations];*/

CGAffineTransformMakeRotation 参数是角度，可让您以所需的方式旋转.M_PI/2.0 表示向左旋转，M_PI/-2.0 向右旋转，角度为 0 将使您回到纵向.如果您的实现想要在单击单元格时来回旋转，您可以实现如下所示:

The CGAffineTransformMakeRotation parameter is the angle and will allow you to rotate the way you want it. M_PI / 2.0 means left rotation, M_PI / -2.0 right rotation and an angle of 0 will set you back to portrait. If your implementation wants to rotate back and forth when clicking on a cell, you could implement something like this:

CGAffineTransform leftRotation = CGAffineTransformMakeRotation(M_PI / 2.0);
CGAffineTransform portraitRotation = CGAffineTransformMakeRotation(0.0);

if (CGAffineTransformEqualToTransform(leftRotation, cell.imageView.transform)){
    cell.imageView.transform = CGAffineTransformConcat(cell.transform, portraitRotation);
}
else if (CGAffineTransformEqualToTransform(portraitRotation, cell.imageView.transform)){
    cell.imageView.transform = CGAffineTransformConcat(cell.transform, leftRotation);
}

现在对于您的第二个问题，切换单元格，我从未使用过 UICollectionViews 但我认为您应该查看 - (void)moveItemAtIndexPath:(NSIndexPath *)indexPath toIndexPath:(NSIndexPath *)newIndexPath当拖动结束时(通过检查拖动开始和拖动结束的 indexPath).

Now for your second problem, switching cells, I've never used UICollectionViews but I think you should look into - (void)moveItemAtIndexPath:(NSIndexPath *)indexPath toIndexPath:(NSIndexPath *)newIndexPath when a drag ends (by checking the indexPath where dragging started and dragging ended).

根据Apple 文档 这是用于处理 UI 操作的方法.

According to Apple documentation it's the method to use to handle to UI actions.

使用此方法重新组织现有数据项.你可能会这样做当您重新排列数据源对象中的项目或响应用户与集合视图的交互.

Use this method to reorganize existing data items. You might do this when you rearrange the items within your data source object or in response to user interactions with the collection view.

这篇关于如何在触摸时旋转图像并将图像拖到另一个图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！