アプリケーションでグラフを描いています。私の問題は、頂点を結ぶ線を曲線として描きたいということです。現在はUIBezierPath's functionで描いていますaddLineToPoint:。それらを曲線として描きたい。UIBezierPathこの機能をサポートするために、次の 2 つの機能があることをよく知っています。
3 次曲線: addCurveToPoint:controlPoint1:controlPoint2:
2 次曲線:addQuadCurveToPoint:controlPoint:
しかし、問題は、コントロール ポイントがないことです。私が持っているのは2つのエンドポイントだけです。コントロールポイントを決定する方法/式も見つかりませんでした。誰でもここで私を助けることができますか? 誰かが代替案を提案できれば幸いです...
12 年 12 月 5 日の Abid Hussain の回答を拡張します。
私はコードを実装しましたが、うまくいきましたが、結果は次のようになりました:
少し調整するだけで、私が望むものを得ることができました：
私がしたことは、中間点を制御点として使用して、中間点にもQuadCurveToPointを追加することでした。以下は、Abid のサンプルに基づくコードです。それが誰かを助けることを願っています。
+ (UIBezierPath *)quadCurvedPathWithPoints:(NSArray *)points
{
UIBezierPath *path = [UIBezierPath bezierPath];
NSValue *value = points[0];
CGPoint p1 = [value CGPointValue];
[path moveToPoint:p1];
if (points.count == 2) {
value = points[1];
CGPoint p2 = [value CGPointValue];
[path addLineToPoint:p2];
return path;
}
for (NSUInteger i = 1; i < points.count; i++) {
value = points[i];
CGPoint p2 = [value CGPointValue];
CGPoint midPoint = midPointForPoints(p1, p2);
[path addQuadCurveToPoint:midPoint controlPoint:controlPointForPoints(midPoint, p1)];
[path addQuadCurveToPoint:p2 controlPoint:controlPointForPoints(midPoint, p2)];
p1 = p2;
}
return path;
}
static CGPoint midPointForPoints(CGPoint p1, CGPoint p2) {
return CGPointMake((p1.x + p2.x) / 2, (p1.y + p2.y) / 2);
}
static CGPoint controlPointForPoints(CGPoint p1, CGPoint p2) {
CGPoint controlPoint = midPointForPoints(p1, p2);
CGFloat diffY = abs(p2.y - controlPoint.y);
if (p1.y < p2.y)
controlPoint.y += diffY;
else if (p1.y > p2.y)
controlPoint.y -= diffY;
return controlPoint;
}
@ user1244109 の回答を使用して、Swift 5 でより優れたアルゴリズムを実装します。
class GraphView: UIView {
var data: [CGFloat] = [2, 6, 12, 4, 5, 7, 5, 6, 6, 3] {
didSet {
setNeedsDisplay()
}
}
func coordYFor(index: Int) -> CGFloat {
return bounds.height - bounds.height * data[index] / (data.max() ?? 0)
}
override func draw(_ rect: CGRect) {
let path = quadCurvedPath()
UIColor.black.setStroke()
path.lineWidth = 1
path.stroke()
}
func quadCurvedPath() -> UIBezierPath {
let path = UIBezierPath()
let step = bounds.width / CGFloat(data.count - 1)
var p1 = CGPoint(x: 0, y: coordYFor(index: 0))
path.move(to: p1)
drawPoint(point: p1, color: UIColor.red, radius: 3)
if (data.count == 2) {
path.addLine(to: CGPoint(x: step, y: coordYFor(index: 1)))
return path
}
var oldControlP: CGPoint?
for i in 1..<data.count {
let p2 = CGPoint(x: step * CGFloat(i), y: coordYFor(index: i))
drawPoint(point: p2, color: UIColor.red, radius: 3)
var p3: CGPoint?
if i < data.count - 1 {
p3 = CGPoint(x: step * CGFloat(i + 1), y: coordYFor(index: i + 1))
}
let newControlP = controlPointForPoints(p1: p1, p2: p2, next: p3)
path.addCurve(to: p2, controlPoint1: oldControlP ?? p1, controlPoint2: newControlP ?? p2)
p1 = p2
oldControlP = antipodalFor(point: newControlP, center: p2)
}
return path;
}
/// located on the opposite side from the center point
func antipodalFor(point: CGPoint?, center: CGPoint?) -> CGPoint? {
guard let p1 = point, let center = center else {
return nil
}
let newX = 2 * center.x - p1.x
let diffY = abs(p1.y - center.y)
let newY = center.y + diffY * (p1.y < center.y ? 1 : -1)
return CGPoint(x: newX, y: newY)
}
/// halfway of two points
func midPointForPoints(p1: CGPoint, p2: CGPoint) -> CGPoint {
return CGPoint(x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2);
}
/// Find controlPoint2 for addCurve
/// - Parameters:
/// - p1: first point of curve
/// - p2: second point of curve whose control point we are looking for
/// - next: predicted next point which will use antipodal control point for finded
func controlPointForPoints(p1: CGPoint, p2: CGPoint, next p3: CGPoint?) -> CGPoint? {
guard let p3 = p3 else {
return nil
}
let leftMidPoint = midPointForPoints(p1: p1, p2: p2)
let rightMidPoint = midPointForPoints(p1: p2, p2: p3)
var controlPoint = midPointForPoints(p1: leftMidPoint, p2: antipodalFor(point: rightMidPoint, center: p2)!)
if p1.y.between(a: p2.y, b: controlPoint.y) {
controlPoint.y = p1.y
} else if p2.y.between(a: p1.y, b: controlPoint.y) {
controlPoint.y = p2.y
}
let imaginContol = antipodalFor(point: controlPoint, center: p2)!
if p2.y.between(a: p3.y, b: imaginContol.y) {
controlPoint.y = p2.y
}
if p3.y.between(a: p2.y, b: imaginContol.y) {
let diffY = abs(p2.y - p3.y)
controlPoint.y = p2.y + diffY * (p3.y < p2.y ? 1 : -1)
}
// make lines easier
controlPoint.x += (p2.x - p1.x) * 0.1
return controlPoint
}
func drawPoint(point: CGPoint, color: UIColor, radius: CGFloat) {
let ovalPath = UIBezierPath(ovalIn: CGRect(x: point.x - radius, y: point.y - radius, width: radius * 2, height: radius * 2))
color.setFill()
ovalPath.fill()
}
}
extension CGFloat {
func between(a: CGFloat, b: CGFloat) -> Bool {
return self >= Swift.min(a, b) && self <= Swift.max(a, b)
}
}
ポイントが 2 つしかない場合、それらを実際に曲線に外挿することはできません。
2 つ以上のポイント (つまり、曲線に沿った複数のポイント) がある場合は、それらに沿って曲線を大まかに描くことができます。
次のようにすると...
では、5 点あるとします。p1、p2、p3、p4、および p5。ポイントの各ペアの間の中点を計算する必要があります。m1 = p1 と p2 の中点 (など)...
したがって、m1、m2、m3、および m4 があります。
これで、中間点を曲線のセクションの終点として使用し、点を四角形曲線の制御点として使用できます...
そう...
ポイント m1 に移動します。p2 を制御点として点 m2 に四角形曲線を追加します。
p3 を制御点として点 m3 に四角形曲線を追加します。
p4 を制御点として点 m4 に四角形曲線を追加します。
等々...
これにより、曲線の端からすべて離れます (現時点ではそれらを取得する方法を思い出せません。申し訳ありません)。
SO @ Fogmeisterの回答に基づいて回避策を見つけました。
UIBezierPath *path = [UIBezierPath bezierPath];
[path setLineWidth:3.0];
[path setLineCapStyle:kCGLineCapRound];
[path setLineJoinStyle:kCGLineJoinRound];
// actualPoints are my points array stored as NSValue
NSValue *value = [actualPoints objectAtIndex:0];
CGPoint p1 = [value CGPointValue];
[path moveToPoint:p1];
for (int k=1; k<[actualPoints count];k++) {
NSValue *value = [actualPoints objectAtIndex:k];
CGPoint p2 = [value CGPointValue];
CGPoint centerPoint = CGPointMake((p1.x+p2.x)/2, (p1.y+p2.y)/2);
// See if your curve is decreasing or increasing
// You can optimize it further by finding point on normal of line passing through midpoint
if (p1.y<p2.y) {
centerPoint = CGPointMake(centerPoint.x, centerPoint.y+(abs(p2.y-centerPoint.y)));
}else if(p1.y>p2.y){
centerPoint = CGPointMake(centerPoint.x, centerPoint.y-(abs(p2.y-centerPoint.y)));
}
[path addQuadCurveToPoint:p2 controlPoint:centerPoint];
p1 = p2;
}
[path stroke];
適切な解決策は、ポイントを通る直線を作成してUIBezierPathから、スプラインを使用して線を湾曲させることです。Catmull-Rom スプラインを実行する UIBezierPath のカテゴリを提供するこの他の回答を確認してください。滑らかな曲線を描く - 必要な方法
すべてのポイントの近くに「水平」曲線が必要な場合:
let path = createCurve(from: points, withSmoothness: 0.5) // 0.5 smoothness
let path = createCurve(from: points, withSmoothness: 0) // 0 smoothness
/// Create UIBezierPath
///
/// - Parameters:
/// - points: the points
/// - smoothness: the smoothness: 0 - no smooth at all, 1 - maximum smoothness
private func createCurve(from points: [CGPoint], withSmoothness smoothness: CGFloat, addZeros: Bool = false) -> UIBezierPath {
let path = UIBezierPath()
guard points.count > 0 else { return path }
var prevPoint: CGPoint = points.first!
let interval = getXLineInterval()
if addZeros {
path.move(to: CGPoint(x: interval.origin.x, y: interval.origin.y))
path.addLine(to: points[0])
}
else {
path.move(to: points[0])
}
for i in 1..<points.count {
let cp = controlPoints(p1: prevPoint, p2: points[i], smoothness: smoothness)
path.addCurve(to: points[i], controlPoint1: cp.0, controlPoint2: cp.1)
prevPoint = points[i]
}
if addZeros {
path.addLine(to: CGPoint(x: prevPoint.x, y: interval.origin.y))
}
return path
}
/// Create control points with given smoothness
///
/// - Parameters:
/// - p1: the first point
/// - p2: the second point
/// - smoothness: the smoothness: 0 - no smooth at all, 1 - maximum smoothness
/// - Returns: two control points
private func controlPoints(p1: CGPoint, p2: CGPoint, smoothness: CGFloat) -> (CGPoint, CGPoint) {
let cp1: CGPoint!
let cp2: CGPoint!
let percent = min(1, max(0, smoothness))
do {
var cp = p2
// Apply smoothness
let x0 = max(p1.x, p2.x)
let x1 = min(p1.x, p2.x)
let x = x0 + (x1 - x0) * percent
cp.x = x
cp2 = cp
}
do {
var cp = p1
// Apply smoothness
let x0 = min(p1.x, p2.x)
let x1 = max(p1.x, p2.x)
let x = x0 + (x1 - x0) * percent
cp.x = x
cp1 = cp
}
return (cp1, cp2)
}
/// Defines interval width, height (not used in this example) and coordinate of the first interval.
/// - Returns: (x0, y0, step, height)
internal func getXLineInterval() -> CGRect {
return CGRect.zero
}