refactor SquirclePath class

Malaa-tech · Jan 19, 2024 · 0774c33 · 0774c33
1 parent 9d3c182
commit 0774c33
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 39 deletions.
diff --git a/android/src/main/java/expo/modules/squircleview/ExpoSquircleView.kt b/android/src/main/java/expo/modules/squircleview/ExpoSquircleView.kt
@@ -3,6 +3,7 @@ package expo.modules.squircleview
 import SquirclePath
 import android.content.Context
 import android.graphics.Canvas
+import android.graphics.Matrix
 import android.graphics.Paint
 import android.graphics.Path
 import expo.modules.kotlin.AppContext
@@ -51,17 +52,29 @@ class ExpoSquircleView(context: Context, appContext: AppContext) : ExpoView(cont
             return
         }
 
-        val newPath = SquirclePath(
-            width,
-            height,
+        val pixelBorderWidth = Utils.convertDpToPixel(this.borderWidth, context);
+
+        val squirclePath = SquirclePath(
+            width - pixelBorderWidth,
+            height - pixelBorderWidth,
             borderRadius,
             cornerSmoothing / 100f,
-            preserveSmoothing,
-            borderWidth = Utils.convertDpToPixel(this.borderWidth, context)
+            preserveSmoothing
         )
 
+        // if borderWidth is greater than 0, we need to shift the shape
+        // to match the original width & height
+        val shiftX = pixelBorderWidth / 2f
+        val shiftY = pixelBorderWidth / 2f
+        val translationMatrix = Matrix().apply {
+            setTranslate(shiftX, shiftY)
+        }
+        val translatedPath = Path().apply {
+            squirclePath.transform(translationMatrix, this)
+        }
+
         path.reset()
-        path.addPath(newPath)
+        path.addPath(translatedPath)
     }
 
     fun setCornerSmoothing(c: Int) {

diff --git a/android/src/main/java/expo/modules/squircleview/SquirclePath.kt b/android/src/main/java/expo/modules/squircleview/SquirclePath.kt
@@ -23,40 +23,28 @@ class SquirclePath(
     private var borderRadius: Float,
     private var cornerSmoothing: Float,
     private var preserveSmoothing: Boolean,
-    private var borderWidth: Float
 ) : Path() {
 
     init {
-        val checkedRadius = minOf(this.borderRadius, (this.width - this.borderWidth) / 2f, (this.height - this.borderWidth) / 2f)
+        val checkedRadius = minOf(this.borderRadius, this.width / 2f, this.height / 2f)
         val checkedCornerSmoothing = maxOf(minOf(this.cornerSmoothing, 1f),0f)
 
         val curvedProperties = calculateCurveProperties(
             checkedRadius,
             checkedCornerSmoothing,
             this.preserveSmoothing,
-            min(this.width - this.borderWidth / 2, this.height - this.borderWidth / 2) / 2
+            min(this.width , this.height) / 2
         );
         val path =
             PathParser.createPathFromPathData(
                 getSVGPathFromPathParams(
-                    this.width - this.borderWidth,
-                    this.height - this.borderWidth,
+                    this.width,
+                    this.height,
                     curvedProperties
                 )
             )
 
-        // if borderWidth is greater than 0, we need to shift the shape
-        // to match the original width & height
-        val shiftX = borderWidth / 2f
-        val shiftY = borderWidth / 2f
-        val translationMatrix = Matrix().apply {
-            setTranslate(shiftX, shiftY)
-        }
-        val translatedPath = Path().apply {
-            path.transform(translationMatrix, this)
-        }
-
-        this.addPath(translatedPath)
+        this.addPath(path)
     }
 
 

diff --git a/ios/ExpoSquircleView.swift b/ios/ExpoSquircleView.swift
@@ -32,7 +32,17 @@ class ExpoSquircleView: ExpoView {
         let width: CGFloat = bounds.width
         let height: CGFloat = bounds.height
 
-        return SquirclePath.create(width: width, height: height, radius: radius, cornerSmoothing: cornerSmoothing, preserveSmoothing: preserveSmoothing, borderWidth: squircleLayer.lineWidth);
+        let path = SquirclePath.create(width: width - squircleLayer.lineWidth, height: height - squircleLayer.lineWidth, radius: radius, cornerSmoothing: cornerSmoothing, preserveSmoothing: preserveSmoothing);
+
+        // if borderWidth is greater than 0, we need to shift the shape
+        // to match the original width & height
+        var translationTransform = CGAffineTransform(translationX: squircleLayer.lineWidth / 2, y: squircleLayer.lineWidth / 2)
+
+        if let translatedPath = path.copy(using: &translationTransform) {
+            return translatedPath
+        }
+
+        return path
     }
 
     func setBackgroundColor(_ backgroundColor: UIColor) {

diff --git a/ios/SquirclePath.swift b/ios/SquirclePath.swift
@@ -20,26 +20,16 @@ struct CurveProperties {
 
 struct SquirclePath {
 
-    static func create(width: CGFloat, height: CGFloat, radius: CGFloat, cornerSmoothing: CGFloat, preserveSmoothing: Bool, borderWidth: CGFloat) -> CGPath {
+    static func create(width: CGFloat, height: CGFloat, radius: CGFloat, cornerSmoothing: CGFloat, preserveSmoothing: Bool) -> CGPath {
 
-        let checkedRadius = min(radius, (width - borderWidth)  / 2, (height - borderWidth) / 2)
+        let checkedRadius = min(radius, width  / 2, height / 2)
         let checkedCornerSmoothing =  max(min(cornerSmoothing / 100, 1), 0)
 
-        let curveProperties = calculateCurveProperties(cornerRadius: checkedRadius, cornerSmoothing: checkedCornerSmoothing, preserveSmoothing: preserveSmoothing, roundingAndSmoothingBudget: min(width - borderWidth / 2, height - borderWidth / 2) / 2)
-        let stringPath = getSVGPathFromPathParams(width: width - borderWidth, height: height - borderWidth, curveProperties: curveProperties)
+        let curveProperties = calculateCurveProperties(cornerRadius: checkedRadius, cornerSmoothing: checkedCornerSmoothing, preserveSmoothing: preserveSmoothing, roundingAndSmoothingBudget: min(width , height) / 2)
+        let stringPath = getSVGPathFromPathParams(width: width, height: height, curveProperties: curveProperties)
         let svgString = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 \(height) \(width)'><path d='\(stringPath)'/></svg>"
         let paths = SVGBezierPath.paths(fromSVGString: svgString)
-        let originalPath = paths[0].cgPath
-
-
-        // if borderWidth is greater than 0, we need to shift the shape
-        // to match the original width & height
-        var translationTransform = CGAffineTransform(translationX: borderWidth / 2, y: borderWidth / 2)
-        if let translatedPath = originalPath.copy(using: &translationTransform) {
-            return translatedPath
-        }
-
-        return originalPath
+        return paths[0].cgPath
     }
 
     static func getSVGPathFromPathParams(width: CGFloat, height: CGFloat, curveProperties: CurveProperties) -> String {