iOS开发：交互式图形

Question

请看一下上图。红色圆圈表示用户的触摸动作。因此，如果用户触摸了第一个圆圈的位置（向左），则应该有一个向左倾斜的图形。如果用户在中间触摸，则是正态分布图。如果用户触摸了正确的部分，则图表应该向右倾斜。

我是iOS开发的新手，我想知道如何实现这样的功能。任何对合适的图书馆，框架，文件的建议都将不胜感激。

Answer 1

好的，让我们一次浏览那个组件。

1. 要知道用户触摸的位置，您可以使用UIPanGestureRecognizer或UITapGestureRecognizer之类的内容。

2. 要绘制曲线，常用的技巧是添加CAShapeLayer：

   CAShapeLayer *shapeLayer = [CAShapeLayer layer];
   shapeLayer.strokeColor = [UIColor blueColor].CGColor;
   shapeLayer.fillColor = [UIColor clearColor].CGColor;
   shapeLayer.lineWidth = 4.0;
   [self.view.layer addSublayer:shapeLayer];
   

   然后，您可以为path设置CAShapeLayer，每次更改path时，视图上的曲线都会发生变化。如果您经常更改该路径（例如，您使用每次用户手指移动时调用的UIPanGestureRecognizer），您实际上可以设置曲线更改的动画。

3. 那么，你如何创建path？好吧，你只需创建一个UIBezierPath

   UIBezierPath *path = [UIBezierPath bezierPath];
   [path moveToPoint:...];
   
   // build the path as a series of curves
   //
   // [path addCurveToPoint:...
   //         controlPoint1:...
   //         controlPoint2:...];
   
   // or a series of lines that are so numerous that it looks like a nice curve
   //
   // for (NSInteger x = 0; x <= view.bounds.size.width; x++) {
   //     [path addLineToPoint:...];
   // }
   
   shapeLayer.path = path.CGPath;
   

   因此，唯一的问题是曲线是否需要是正态分布，或者您是否只想要绘制具有用户触摸的局部最大值的平滑曲线的东西。

   如果你想要一些精确和数学上代表某个特定曲线的东西（例如，如果在中心，这是一个真正的正态分布），那么你需要提出方程来表示你的曲线（作为用户所在位置的函数）窃听）。然后使用addLineToPoint和UIBezierPath绘制一大堆点来绘制曲线。

   如果您只需要看起来很接近的东西，那么您可以使用两个贝塞尔曲线（使用addCurveToPoint:controlPoint1:controlPoint2:创建）近似它。

我们不打算为你写这个，但这些是解决方案的基本构建块。我建议你一次拿这些，对每一个进行一些研究，试一试，然后进行改进。从小处开始，从那里开始构建。