使用 pangesture 在 UIImageView 图像上绘制贝塞尔路径

Posted 2023-03-16

【中文标题】使用 pangesture 在 UIImageView 图像上绘制贝塞尔路径

【英文标题】：Draw bezier path over an UIImageView image using a pangesture

【发布时间】：2013-12-22 08:00:47

【问题描述】：

我有一个：

CustomView 是 UIView 的子类。 CustomImageView 是 UIImageView 的子类 CustomImageView 是CustomView 的子视图 UIPanGestureRecognizer 应用于另一个名为 UIImageView 的 panImage panImage 是CustomImageView 的子视图

现在，我需要在将panImage 移动到CustomImageView 时进行绘制，但它不应该在CustomView 中进行绘制。

以下是我编写的代码，但不起作用。 需要帮助。

自定义图像视图

#import <UIKit/UIKit.h>
#import "CustomImageView.h"
@interface CustomView : UIView
@property (nonatomic,strong) UIPanGestureRecognizer *panGesture;
@property (nonatomic,strong) UIImageView *panImage;
@property (nonatomic,strong) CustomImageView *backgroundImage;
@end

#import "CustomView.h"
@implementation CustomView

-(void) awakeFromNib 
    // inserting a background image
    self.backgroundImage = [[CustomImageView alloc] initWithImage:[UIImage imageNamed:@"ef-06-chartkey-yellow.jpg"]];
    CGRect imageFrame = CGRectMake(20,14, 450,450);
    self.backgroundImage.userInteractionEnabled = YES;
    self.backgroundImage.exclusiveTouch = YES;
    self.backgroundImage.frame = imageFrame;
    [self addSubview:self.backgroundImage];

    if (nil == self.panGesture) 
        self.panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self.backgroundImage
                                                                  action:@selector(handlePanGesture:)];
    

    self.panImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"slider_thumb.png"]];
    CGRect panFramePoint = CGRectMake(10,10, self.panImage.frame.size.width, self.panImage.frame.size.height);
    self.panImage.frame = panFramePoint;
    self.panImage.userInteractionEnabled = YES;
    [self.panImage addGestureRecognizer:self.panGesture];
    [self.backgroundImage addSubview:self.panImage];

@end

---

自定义图像视图

#import <UIKit/UIKit.h>
@interface CustomImageView : UIImageView
@property (nonatomic,strong) UIBezierPath *path;
@end

#import "CustomImageView.h"
@implementation CustomImageView

-(id) initWithImage:(UIImage *)image 
    self = [super initWithImage:image];
    if (self) 
        self.image = image;
        self.path = [[UIBezierPath alloc] init];
        self.path.lineWidth = 25;
    
    return self;


- (void)drawRect:(CGRect)rect 
    // Drawing code
    [[UIColor redColor] setFill];
    [self.path stroke];


- (void) handlePanGesture:(UIPanGestureRecognizer *)recognizer 
    CGPoint translation = [recognizer translationInView:self];
    recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
                                         recognizer.view.center.y + translation.y);

    //NSLog(@"[recognizer locationInView:self] %f, %f",[recognizer locationInView:self.customLetterImage].x, [recognizer locationInView:self.customLetterImage].y);
    [recognizer setTranslation:CGPointMake(0, 0) inView:self];
    [self.path addLineToPoint:[recognizer locationInView:self]];
    [self setNeedsDisplayInRect:self.frame];


-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
    NSLog(@"CustomImageView touchesBegan");
    UITouch *mytouch = [touches anyObject];
    [self.path moveToPoint: [mytouch locationInView:self]];
    [self setNeedsDisplay];


-(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event 
    NSLog(@"CustomImageView touchesMoved");


-(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event 
    NSLog(@"CustomImageView touchesEnded");


-(void) touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event 
    NSLog(@"CustomImageView touchesCancelled");


@end

【参考方案1】：

我通过在 customImageView 上方创建自定义视图解决了这个问题。这样我就可以使用 pangesture 在 customImageView 上方的视图上绘制。