我认为如果为每个切片创建一个视图并使用UIPinchGestureRecognizer
. 就是这样。
首先,我们需要一个UIView
绘制一个切片的子类。它还应该覆盖pointInside:withEvent:
以忽略落在切片之外的触摸(即使触摸在视图的矩形边界内)。
所以我们将创建一个名为SliceView
. 它用于CAShapeLayer
进行切片绘制:
@interface SliceView : UIView
@property (nonatomic) CGFloat padding;
@property (nonatomic) CGFloat startRadians;
@property (nonatomic) CGFloat endRadians;
@property (nonatomic, strong) UIColor *fillColor;
@end
@implementation SliceView
@synthesize padding = _padding;
@synthesize startRadians = _startRadians;
@synthesize endRadians = _endRadians;
@synthesize fillColor = _fillColor;
我们通过覆盖方法告诉它使用 aCAShapeLayer
而不是普通的。我们还将添加一个方便的方法,该方法将视图的图层作为.CALayer
layerClass
CAShapeLayer
+ (Class)layerClass {
return [CAShapeLayer class];
}
- (CAShapeLayer *)shapeLayer {
return (CAShapeLayer *)self.layer;
}
我们将在 中计算切片的路径layoutSubviews
,因为视图在layoutSubviews
其大小发生变化时都会收到消息。
我们将布置每个切片视图以覆盖整个饼图,但只绘制饼图的楔形。每个切片的帧将覆盖整个屏幕(如果饼图是全屏的)。这意味着切片视图知道其弧的中心位于其边界的中心。但随后我们使用一点三角法在相邻切片之间添加填充。
我们还调整了图层的锚点;这是图层中缩放或旋转图层时不会移动的点。我们希望锚点位于最靠近中心的切片的角上。
- (void)layoutSubviews {
CAShapeLayer *layer = self.shapeLayer;
CGRect bounds = self.bounds;
CGFloat radius = MIN(bounds.size.width, bounds.size.height) / 2 - 2 * _padding;
CGPoint center = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds));
CGFloat sine = sinf((_startRadians + _endRadians) * 0.5f);
CGFloat cosine = cosf((_startRadians + _endRadians) * 0.5f);
center.x += _padding * cosine;
center.y += _padding * sine;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:center];
[path addArcWithCenter:center radius:radius startAngle:_startRadians endAngle:_endRadians clockwise:YES];
[path closePath];
layer.path = path.CGPath;
// Move my anchor point to the corner of my path so scaling will leave the corner in the same place.
CGPoint cornerInSuperview = [self convertPoint:center toView:self.superview];
layer.anchorPoint = CGPointMake(center.x / bounds.size.width, center.y / bounds.size.height);
self.center = cornerInSuperview;
}
当与切片相关的任何视图属性发生更改时,我们需要重新计算勾勒切片的路径。当切片的填充颜色发生变化时,我们需要将该变化传递给图层。所以我们将覆盖属性设置器。
- (void)setPadding:(CGFloat)padding {
_padding = padding;
[self setNeedsLayout];
}
- (void)setStartRadians:(CGFloat)startRadians {
_startRadians = startRadians;
[self setNeedsLayout];
}
- (void)setEndRadians:(CGFloat)endRadians {
_endRadians = endRadians;
[self setNeedsLayout];
}
- (void)setFillColor:(UIColor *)color {
_fillColor = color;
self.shapeLayer.fillColor = color.CGColor;
}
最后,我们重写pointInside:withEvent:
,这样命中测试只会在触摸实际上在切片路径内时将触摸分配给切片视图。这是至关重要的,因为所有的切片视图都会有一个覆盖整个屏幕的框架。
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
return CGPathContainsPoint(self.shapeLayer.path, NULL, point, NO);
}
@end
现在我们有了一个方便的SliceView
类,我们可以用它来绘制一个带有可缩放切片的饼图。在 iPhone 屏幕上很难将两根手指放入切片中,因此我们将让用户点击切片以选择它,然后在任意位置捏合以缩放所选切片。(这个接口也使它可以在模拟器中测试。)
@implementation ViewController {
__weak SliceView *_selectedSlice;
}
我们将用红色绘制未选择的切片,用蓝色绘制选定的切片。
+ (UIColor *)unselectedSliceFillColor {
return UIColor.redColor;
}
+ (UIColor *)selectedSliceFillColor {
return UIColor.blueColor;
}
当用户点击一个切片时,我们需要改变先前选择和新选择的颜色,并记录新选择。
- (IBAction)sliceWasTapped:(UITapGestureRecognizer *)tapper {
_selectedSlice.fillColor = self.class.unselectedSliceFillColor;
_selectedSlice = (SliceView *)tapper.view;
_selectedSlice.fillColor = self.class.selectedSliceFillColor;
}
当用户捏合时,我们调整所选切片的变换(如果有的话)。
- (IBAction)pinched:(UIPinchGestureRecognizer *)pincher {
if (!_selectedSlice)
return;
CGFloat scale = pincher.scale;
pincher.scale = 1;
_selectedSlice.transform = CGAffineTransformScale(_selectedSlice.transform, scale, scale);
}
最后,我们需要实际创建切片视图和手势识别器。我们为每个切片创建一个点击识别器,以及一个附加到背景视图的“全局”捏合识别器。
- (void)viewDidLoad {
static int const SliceCount = 12;
CGRect bounds = self.view.bounds;
for (int i = 0; i < SliceCount; ++i) {
SliceView *slice = [[SliceView alloc] initWithFrame:bounds];
slice.startRadians = 2 * M_PI * i / SliceCount;
slice.endRadians = 2 * M_PI * (i + 1) / SliceCount;
slice.padding = 4;
slice.fillColor = self.class.unselectedSliceFillColor;
slice.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.view addSubview:slice];
UITapGestureRecognizer *tapper = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(sliceWasTapped:)];
[slice addGestureRecognizer:tapper];
}
UIPinchGestureRecognizer *pincher = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinched:)];
[self.view addGestureRecognizer:pincher];
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}
@end
这就是它的样子:
你可以在这里下载我的测试项目:http: //dl.dropbox.com/u/26919672/pie.zip
更新
为了回应您关于限制规模的评论,我建议在以下位置添加更多属性SliceView
:
@property (nonatomic) CGFloat minScale;
@property (nonatomic) CGFloat maxScale;
@property (nonatomic) CGFloat scale;
重要提示:您需要将所有三个属性初始化为 1 ininitWithFrame:
和initWithCoder:
。
然后,实现scale
setter 以实际执行限制并设置比例:
- (void)setScale:(CGFloat)scale {
_scale = MAX(minScale, MIN(scale, maxScale));
self.transform = CGAffineTransformMakeScale(_scale, _scale);
}
在pinched:
中,您更新scale
视图的属性,而不是直接设置视图的transform
属性:
- (IBAction)pinched:(UIPinchGestureRecognizer *)pincher {
if (!_selectedSlice)
return;
CGFloat scale = pincher.scale;
pincher.scale = 1;
_selectedSlice.scale = _selectedSlice.scale * scale;
}