0

我有一个使用 UIBezierPath 制作的饼图。我现在需要这些单独的路径(饼图)是可扩展的。我相信你需要一个能够使用捏缩放的视图,所以我认为 touchesMoved: 是要走的路(除非有解决方法)。

任何建议或帮助表示赞赏!

更新/进度代码

MySliceClass.m

+ (UIBezierPath *)sliceRadius:(float)radius andStartingAngle:(float)startingAngle andFinishingAngle:(float)finishingAngle
{
  static UIBezierPath *path = nil;
  path = [UIBezierPath bezierPath];
  CGPoint center = {300,300};
  [path moveToPoint:center];
  [path addArcWithCenter:center radius:radius startAngle:radians(startingAngle) endAngle:radians(finishingAngle) clockwise:YES];
  [path closePath];
  path.lineWidth = 1;

  [[UIColor redColor] setFill];
  [path fill];

  return path;
}

我的切片视图.m

- (void)drawRect:(CGRect)rect 
{
  NSArray *arrayOfSlices = [NSArray arrayWithObjects:
                            slice01 = [WordplaySlice sliceRadius:200 andStartingAngle:0.5 andFinishingAngle:29.5],
                            slice02 = [WordplaySlice sliceRadius:200 andStartingAngle:30.5 andFinishingAngle:59.5],
                            slice03 = [WordplaySlice sliceRadius:200 andStartingAngle:60.5 andFinishingAngle:89.5],
                            slice04 = [WordplaySlice sliceRadius:200 andStartingAngle:90.5 andFinishingAngle:119.5],
                            slice05 = [WordplaySlice sliceRadius:200 andStartingAngle:120.5 andFinishingAngle:149.5],
                            slice06 = [WordplaySlice sliceRadius:200 andStartingAngle:150.5 andFinishingAngle:179.5],
                            slice07 = [WordplaySlice sliceRadius:200 andStartingAngle:180.5 andFinishingAngle:209.5],
                            slice08 = [WordplaySlice sliceRadius:200 andStartingAngle:210.5 andFinishingAngle:239.5],
                            slice09 = [WordplaySlice sliceRadius:200 andStartingAngle:240.5 andFinishingAngle:269.5],
                            slice10 = [WordplaySlice sliceRadius:200 andStartingAngle:270.5 andFinishingAngle:299.5],
                            slice11 = [WordplaySlice sliceRadius:200 andStartingAngle:300.5 andFinishingAngle:329.5],
                            slice12 = [WordplaySlice sliceRadius:200 andStartingAngle:330.5 andFinishingAngle:359.5], nil];                             
}
4

2 回答 2

3

我认为如果为每个切片创建一个视图并使用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而不是普通的。我们还将添加一个方便的方法,该方法将视图的图层作为.CALayerlayerClassCAShapeLayer

+ (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

这就是它的样子:

SliceView 演示屏幕截图

你可以在这里下载我的测试项目:http: //dl.dropbox.com/u/26919672/pie.zip

更新

为了回应您关于限制规模的评论,我建议在以下位置添加更多属性SliceView

@property (nonatomic) CGFloat minScale;
@property (nonatomic) CGFloat maxScale;
@property (nonatomic) CGFloat scale;

重要提示:您需要将所有三个属性初始化为 1 ininitWithFrame:initWithCoder:

然后,实现scalesetter 以实际执行限制并设置比例:

- (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;
}
于 2012-02-20T05:51:26.480 回答
1

首先,将切片存储在数组中可能是一个更好的主意。

MySliceClass其次,定义一个类(可以从 UIBezierPath 继承)也是一个更好的主意。此类具有定义切片的属性:startingAngle, endAngle.

现在不仅您改进了代码,而且调整切片大小变得更加容易。

radius您必须向该类添加一个参数MySliceClass,并且每次触摸切片时,您都会更改其半径,然后调用[self setNeedsDisplay]该方法以调用该方法drawRect

最后,您还应该将初始化移至视图的初始化方法,因为您这样做的方式是在每次绘制视图时创建新切片。

编辑这是一个示例实现

@implementation Slice // Subclass of NSObject

@synthesize radius, startAngle, endAngle, center;

- (void)draw
{
    UIBezierPath *path = nil;
    path = [UIBezierPath bezierPath];
    [path moveToPoint:center];
    [path addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
    [path closePath];
    path.lineWidth = 1;

    [[UIColor redColor] setFill];
    [path fill];
}

@end

@implementation SliceView

@synthesize slices;

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        int numSlices = 12; // you can change this
        slices = [NSMutableArray array];
        for (int i = 0; i < numSlices; i++) {
            Slice *slice = [[Slice alloc] init];
            slice.center = self.center;
            slice.radius = 100;
            slice.startAngle = (2*M_PI / numSlices) * i;
            slice.endAngle = (2*M_PI / numSlices) * (i+0.9);
        }
    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
    [[UIColor redColor] setFill];
    for (Slice *slice in slices) {
    [slice draw];
    }
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self];
    CGFloat d = sqrtf(powf(point.x-self.center.x, 2) + powf(point.y-self.center.y, 2));

    int index = atan2f(point.x-self.center.x, point.y-self.center.y) * self.slices.count / (2*M_PI);
    Slice *slice = [slices objectAtIndex:index];
    slice.radius = d;
}

@end

我没有测试这段代码,所以可能会有一些错误。但我希望你可以从这个开始。

于 2012-02-20T00:17:37.047 回答