objective-c - 在路径上找到一个点

Question

我有一个在 UIView 中绘制贝塞尔曲线的应用程序，当我为 Y 设置值时我需要找到 X 相交。首先，据我所知，没有办法直接找到 UIBezierPath 的点，但您可以找到 CGPath 的点。

首先，如果我“抚摸”我的 UIBezierPath(正如我在我的代码中所做的那样)，这实际上是在创建 CGPath 还是我需要采取进一步的步骤将其实际转换为 CGPath?

其次，我想通过提供 Y 的值来找到在 X 处相交的曲线。

我的目的是在用户移动 slider (分别向左或向右移动曲线)时自动计算给定 Y 值的 X。

我的开始展示。

当我当前调整 slider 时会发生什么。

我希望我的显示器看起来也像。

GraphView.h

#import <UIKit/UIKit.h>

@interface GraphView : UIView
{
    float adjust;
    int x;
    int y;
}

- (IBAction)sliderChanged:(id)sender;
- (IBAction)yChanged:(id)sender;

@property (weak, nonatomic) IBOutlet UISlider *sliderValue;
@property (weak, nonatomic) IBOutlet UITextField *xValue;
@property (weak, nonatomic) IBOutlet UITextField *yValue;

@end

GraphView.m

#import "GraphView.h"

@interface GraphView ()


@end

@implementation GraphView

@synthesize sliderValue, xValue, yValue;

- (id)initWithCoder:(NSCoder *)graphView
{
    self = [super initWithCoder:graphView];
    if (self) {
        adjust = 194;
        y = 100;
    }
    return self;
}

- (IBAction)sliderChanged:(id)sender
{
    adjust = sliderValue.value;
    // Calcualtion of the X Value and setting of xValue.text textField goes here
    [self setNeedsDisplay];
}

- (IBAction)yChanged:(id)sender
{
    y = yValue.text.intValue;
    [self setNeedsDisplay];
    [self resignFirstResponder];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch * touch = [touches anyObject];
    if(touch.phase == UITouchPhaseBegan) {
        y = yValue.text.intValue;
        [self setNeedsDisplay];
        [yValue resignFirstResponder];
    }
}

- (void)drawRect:(CGRect)rect
{
    UIBezierPath *lines = [[UIBezierPath alloc] init];
    [lines moveToPoint:CGPointMake(0, y)];
    [lines addLineToPoint:CGPointMake(200, y)];
    [lines addLineToPoint:CGPointMake(200, 280)];
    [lines setLineWidth:1];
    [[UIColor redColor] setStroke];
    float dashPattern[] = {2, 2};
    [lines setLineDash:dashPattern count:2 phase:0.0];
    [lines stroke];

    UIBezierPath *curve = [[UIBezierPath alloc] init];
    [curve moveToPoint:CGPointMake(0, 280)];
    [curve addCurveToPoint:CGPointMake(280, 0) controlPoint1:CGPointMake(adjust, 280) controlPoint2:CGPointMake(adjust, 0)];
    [curve setLineWidth:2];
    [[UIColor blueColor] setStroke];
    [curve stroke];

}

@end

Answer 1

三次贝塞尔曲线由 4 个点定义

P0 = (x0, y0) = start point,
P1 = (x1, y1) = first control point,
P2 = (x2, y2) = second control point,
P3 = (x3, y3) = end point,

由所有点组成

x(t) = (1-t)^3 * x0 + 3*t*(1-t)^2 * x1 + 3*t^2*(1-t) * x2 + t^3 * x3
y(t) = (1-t)^3 * y0 + 3*t*(1-t)^2 * y1 + 3*t^2*(1-t) * y2 + t^3 * y3

哪里t从 0 运行至 1 .

因此，要针对给定的 Y 值计算 X，您首先必须计算参数值 T这样 0 <= T <= 1和

 Y = (1-T)^3 * y0 + 3*T*(1-T)^2 * y1 + 3*T^2*(1-T) * y2 + T^3 * y3      (1)

然后用

计算X坐标

 X = (1-T)^3 * x0 + 3*T*(1-T)^2 * x1 + 3*T^2*(1-T) * x2 + T^3 * x3      (2)

所以你必须求解T的三次方程(1)并将值代入 (2)。

三次方程可以显式求解(参见例如 http://en.wikipedia.org/wiki/Cubic_function )或迭代求解(例如使用 http://en.wikipedia.org/wiki/Bisection_method )。

一般来说，一个三次方程最多可以有三个不同的解。在您的具体案例中，我们有

P0 = (0, 280), P1 = (adjust, 280), P3 = (adjust, 0), P4 = (280, 0)

这样等式(1)就变成了

Y = (1-T)^3 * 280 + 3*T*(1-T)^2 * 280

简化为

Y/280 = 1 - 3*T^2 + 2*T^3    (3)

(3) 的右边是 T 的严格递减函数在区间[0, 1] , 所以不难看出如果 0 <= Y <= 280 (3) 只有一个解.将此解代入 (2) 得到所需的 X 值。