Home Reference Source

src/three/RoundRectCurve.js

class RoundRectCurve {
	static generateCurve(width, height, radius) {
		const halfWidth = width / 2
		const halfHeight = height / 2
		radius = Math.min(radius, halfWidth / 2, halfHeight / 2)
		const diameter = 2 * radius

		const curvePath = new THREE.CurvePath()
		//  Top side
		curvePath.add(
			new THREE.LineCurve(
				new THREE.Vector2(-halfWidth + diameter, halfHeight),
				new THREE.Vector2(halfWidth - diameter, halfHeight)
			)
		)
		if (radius > 0) {
			// Top right corner
			curvePath.add(
				new THREE.QuadraticBezierCurve(
					new THREE.Vector2(halfWidth - diameter, halfHeight),
					new THREE.Vector2(halfWidth, halfHeight),
					new THREE.Vector2(halfWidth, halfHeight - diameter)
				)
			)
		}
		//  Right side
		curvePath.add(
			new THREE.LineCurve(
				new THREE.Vector2(halfWidth, halfHeight - diameter),
				new THREE.Vector2(halfWidth, -halfHeight + diameter)
			)
		)
		if (radius > 0) {
			// Bottom right corner
			curvePath.add(
				new THREE.QuadraticBezierCurve(
					new THREE.Vector2(halfWidth, -halfHeight + diameter),
					new THREE.Vector2(halfWidth, -halfHeight),
					new THREE.Vector2(halfWidth - diameter, -halfHeight)
				)
			)
		}
		//  Bottom side
		curvePath.add(
			new THREE.LineCurve(
				new THREE.Vector2(halfWidth - diameter, -halfHeight),
				new THREE.Vector2(-halfWidth + diameter, -halfHeight)
			)
		)
		if (radius > 0) {
			// Bottom left corner
			curvePath.add(
				new THREE.QuadraticBezierCurve(
					new THREE.Vector2(-halfWidth + diameter, -halfHeight),
					new THREE.Vector2(-halfWidth, -halfHeight),
					new THREE.Vector2(-halfWidth, -halfHeight + diameter)
				)
			)
		}
		//  Left side
		curvePath.add(
			new THREE.LineCurve(
				new THREE.Vector2(-halfWidth, -halfHeight + diameter),
				new THREE.Vector2(-halfWidth, halfHeight - diameter)
			)
		)
		if (radius > 0) {
			// Bottom left corner
			curvePath.add(
				new THREE.QuadraticBezierCurve(
					new THREE.Vector2(-halfWidth, halfHeight - diameter),
					new THREE.Vector2(-halfWidth, halfHeight),
					new THREE.Vector2(-halfWidth + diameter, halfHeight)
				)
			)
		}
		return curvePath
	}
}

export default RoundRectCurve