おにぎりのような右向きの角が丸い三角形

音楽アプリの再生/停止ボタンによくある、おにぎりのような右向きの角が丸い三角形を書くSwiftプログラムです。

この関数はUIBezierPathを返します。
関数の引数は x y radius ratio angleの5つです。それぞれの意味は図の通りです。angleは後から追加したので図に載っていませんが、全体を時計周り方向に回転させるパラメータです。

パスの作成に使用しているメソッドは

open func addQuadCurve(to endPoint: CGPoint, controlPoint: CGPoint)

です。

引数をCGFloatにするかDoubleにするかは迷うところでありました。使用する際、都合が悪ければ変更してください。

func roundTriangle(x: Double, y: Double, radius: Double, ratio: Double, angle: Double) -> UIBezierPath {
	
	var ratio = CGFloat(ratio)
	if ratio < 0.0 {
		ratio = 0.0
	} else if 1.0 < ratio {
		ratio = 1.0
	}
	
	let pos1 = CGPoint(x: x + radius * cos(0.0 + angle), y: y + radius * sin(0.0 + angle))
	let pos2 = CGPoint(x: x + radius * cos(2.0 / 3.0 * M_PI + angle), y: y + radius * sin(2.0 / 3.0 * M_PI + angle))	
	let pos3 = CGPoint(x: x + radius * cos(4.0 / 3.0 * M_PI + angle), y: y + radius * sin(4.0 / 3.0 * M_PI + angle))	
	
	let ratio2 = 1.0 - ratio
	let pos1f = CGPoint(x: (pos1.x + pos2.x) / 2.0 * ratio + pos1.x * ratio2,
	                    y: (pos1.y + pos2.y) / 2.0 * ratio + pos1.y * ratio2)
	let pos2b = CGPoint(x: (pos1.x + pos2.x) / 2.0 * ratio + pos2.x * ratio2,
	                    y: (pos1.y + pos2.y) / 2.0 * ratio + pos2.y * ratio2)
	let pos2f = CGPoint(x: (pos2.x + pos3.x) / 2.0 * ratio + pos2.x * ratio2,
	                    y: (pos2.y + pos3.y) / 2.0 * ratio + pos2.y * ratio2)
	let pos3b = CGPoint(x: (pos2.x + pos3.x) / 2.0 * ratio + pos3.x * ratio2,
	                    y: (pos2.y + pos3.y) / 2.0 * ratio + pos3.y * ratio2)
	let pos3f = CGPoint(x: (pos3.x + pos1.x) / 2.0 * ratio + pos3.x * ratio2,
	                    y: (pos3.y + pos1.y) / 2.0 * ratio + pos3.y * ratio2)
	let pos1b = CGPoint(x: (pos3.x + pos1.x) / 2.0 * ratio + pos1.x * ratio2,
	                    y: (pos3.y + pos1.y) / 2.0 * ratio + pos1.y * ratio2)
	
	let roundTrianglePath = UIBezierPath()
	
	roundTrianglePath.move(to: pos1f)
	roundTrianglePath.addLine(to: pos2b)
	roundTrianglePath.addQuadCurve(to: pos2f, controlPoint: pos2)
	roundTrianglePath.addLine(to: pos3b)
	roundTrianglePath.addQuadCurve(to: pos3f, controlPoint: pos3)
	roundTrianglePath.addLine(to: pos1b)
	roundTrianglePath.addQuadCurve(to: pos1f, controlPoint: pos1)
	
	return roundTrianglePath
}

ratioを変化させるとこのようになります。

angleを変化させるとこのようになります。

また、ratioが0.0のときは、始点と終点が頂点になります。このとき太い線で輪郭を描くと、lineCapStyleによっては端がぎざぎざになります。