Swift ER図を書きたいが、Sin線を使いたくない。

Question

こんにちは

swiftで下記のようなER図(ERD)を作ろうと考えています。
下図のERDは青ペンで囲った直線の部分が長いです。
そのため、赤ペンで囲ったカーブの部分は短いです。
これを作りたいです。

UIBeizerpathを使ってテストしました。

初めはSinカーブを下記のコードで作って見ました。
すると下図のようになりました。

//Sinカーブコード

import UIKit

class TestDraw: UIView {
    let graphWidth: CGFloat = 1.0
    let amplitude: CGFloat = 0.2
    
    override func draw(_ rect: CGRect) {
        let width = rect.width
        let height = rect.height
        
        let origin = CGPoint(x: width * (1 - graphWidth) / 2, y: height * 0.50)
        
        let path = UIBezierPath()
        path.move(to: origin)
        
        for angle in stride(from: 5.0, through: 360.0, by: 5.0) {
            let x = origin.x + CGFloat(angle/360.0) * width * graphWidth
            let y = origin.y - CGFloat(sin(angle/180.0 * Double.pi)) * height * amplitude
            path.addLine(to: CGPoint(x: x, y: y))
        }
        
        UIColor.lightGray.setStroke()
        path.lineWidth = 2.0
        path.stroke()
    }
}

ん〜これだとどこの辺も必ず曲線を描いているので、少し違います。
また、カーブ部もとても大きいです。

そこで、第２の方法を考えました。

それは、カーブ部と直線部を分けて生成し、それぞれが繋がるように位置を調整する方法です。

カーブ部が２つ、直線部を１つ生成することになります。

この方法以外に解決方法はありませんでしょうか？

まだSwiftは経験が浅いので、もしかしたらもっと便利な関数があったりしないかな〜と思って質問しました。

「こんな考え方はどうだろー」などでも構いません！

何卒お願いいたします。

Answer 1

そんなに難しくありませんでした。

結果としてUIBezierPathを２回使うだけで実現できました。

１回目の下図の線が半分ずつ処理された構造になってます。

aPathYとbPathYに同じ数を掛ければ横幅を変えずにたての長さを調整できます。

class TestDraw: UIView {
    override func draw(_ rect: CGRect) {
        let aPathX = 50
        let aPathY = 100 // * 2
        let bPathX = 100
        let bPathY = 200 // * 2
        let xCurve = 20
        let yCurve = 2
        let path = UIBezierPath()
        let apath = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: yCurve))
        apath.move(to: CGPoint(x: aPathX, y: aPathY))
        path.addCurve(to: CGPoint(x: aPathX, y: aPathY), controlPoint1: CGPoint(x: xCurve, y: yCurve), controlPoint2: CGPoint(x: xCurve, y: yCurve))
        apath.addCurve(to: CGPoint(x: bPathX, y: bPathY), controlPoint1: CGPoint(x: bPathX - xCurve, y: bPathY - yCurve), controlPoint2: CGPoint(x: bPathX - xCurve, y: bPathY - yCurve))
        path.lineWidth = 2.0
        apath.lineWidth = 2.0
        UIColor.lightGray.setStroke()
        path.stroke()
        apath.stroke()
    }
}

Comments

[kevin.c.michael]

aPathYとbPathYに同じ数を掛ければ横幅を変えずにたての長さを調整できます。