feat: text background border radius (#139)

JimmyDaddy · Sep 28, 2023 · 7a476ac · 7a476ac
1 parent 1604e3e
commit 7a476ac
Show file tree

Hide file tree

Showing 47 changed files with 492 additions and 128 deletions.
diff --git a/README.0.9.2.MD b/README.0.9.2.MD
@@ -5,12 +5,12 @@ Add text or icon watermark to your images
 ## sample
 
 <p>
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/IOSMarker.gif" width='200'>
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/AndroidMarker.gif" width='200'>
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/shadow_bg_fit.png" width='200'>
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/shadow_bg_sx.png" width='200'>
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/shadow.png" width='200'>
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/shadow_bg_sy.png" width='200'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/IOSMarker.gif" width='200'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/AndroidMarker.gif" width='200'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/shadow_bg_fit.png" width='200'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/shadow_bg_sx.png" width='200'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/shadow.png" width='200'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/shadow_bg_sy.png" width='200'>
 </p>
 
 ## Installation

diff --git a/README.MD b/README.MD
@@ -1,6 +1,6 @@
 <div align="center">
     <a href="https://jimmydaddy.github.io/react-native-image-marker/" title="react native image marker">
-        <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/icon.png" alt="react native image marker Logo" width="150" />
+        <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/icon.png" alt="react native image marker Logo" width="150" />
     </a>
     <a href="https://jimmydaddy.github.io/react-native-image-marker/"><h1 style="color: #424E6D">react native image marker</h1></a>
     <h6>Add text or icon watermarks to images</h6>
@@ -29,13 +29,15 @@
   * text align
   * padding
   * relative position
+  * background border radius
 * Compatible with both Android and iOS
 
 ## Sample
 
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/IOSMarker.gif" width='150'>
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/AndroidMarker.gif" width='150'>
-
+<p>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/IOSMarker.gif" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/AndroidMarker.gif" width='150'>
+</p>
 
 ## Usage
 
@@ -53,7 +55,7 @@
 ##### Sample
 
 
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/shadow_bg_fit.png" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/shadow_bg_fit.png" width='150'>
 
 
 ##### Example
@@ -110,7 +112,7 @@ Marker.markText(options);
 ##### Sample
 
 
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/shadow_bg_sx.png" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/shadow_bg_sx.png" width='150'>
 
 ##### Example
 
@@ -165,7 +167,7 @@ Marker.markText(options);
 ##### Sample
 
 
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/shadow_bg_sy.png" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/shadow_bg_sy.png" width='150'>
 
 ##### Example
 
@@ -211,6 +213,71 @@ ImageMarker.markText(options);
 
 ```
 
+#### Text background border radius
+
+##### API
+
+
+[TextBackgroundType.cornerRadius](https://jimmydaddy.github.io/react-native-image-marker/enums/TextBackgroundType.html#cornerRadius)
+
+##### Sample
+
+
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/textbgcornerradius.png" width='150'>
+
+##### Example
+
+
+```typescript
+import Marker, { Position } from "react-native-image-marker"
+···
+const options = {
+  // background image
+  backgroundImage: {
+    src: require('./images/test.jpg'),
+    scale: 1,
+  },
+  watermarkTexts: [{
+    text: 'text marker normal',
+    positionOptions: {
+      position: Position.center,
+    },
+    style: {
+      color: '#FC0700',
+      fontSize: 30,
+      fontName: 'Arial',
+      shadowStyle: {
+        dx: 10,
+        dy: 10,
+        radius: 10,
+        color: '#008F6D',
+      },
+      textBackgroundStyle: {
+        padding: '10%',
+        color: '#0fA',
+        cornerRadius: {
+          topLeft: {
+            x: '20%',
+            y: '50%',
+          },
+          topRight: {
+            x: '20%',
+            y: '50%',
+          },
+        },
+      },
+    },
+  }],
+  scale: 1,
+  quality: 100,
+  filename: 'test',
+  saveFormat: ImageFormat.png,
+  maxSize: 1000,
+};
+ImageMarker.markText(options);
+
+```
+
 #### Text with shadow
 
 ##### API
@@ -221,7 +288,7 @@ ImageMarker.markText(options);
 ##### Sample
 
 
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/shadow.png" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/shadow.png" width='150'>
 
 ##### Example
 
@@ -273,7 +340,7 @@ Marker.markText(options);
 ##### Sample
 
 
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/multipletexts.png" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/multipletexts.png" width='150'>
 
 ##### Example
 
@@ -326,9 +393,9 @@ Marker.markText({
 
 
 <p>
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/rotatetexts_1.png" width='150'>
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/textswihoutbg.png" width='150'>
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/rotatetexts.png" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/rotatetexts_1.png" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/textswihoutbg.png" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/rotatetexts.png" width='150'>
 </p>
 
 ##### Example
@@ -388,7 +455,7 @@ Marker.markText({
 ##### Sample
 
 
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/imagewatermark.png" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/imagewatermark.png" width='150'>
 
 ##### Example
 
@@ -421,7 +488,7 @@ Marker.markImage({
 
 
 
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/multiple_icon_markers.png" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/multiple_icon_markers.png" width='150'>
 
 
 ##### Example
@@ -461,8 +528,8 @@ Marker.markImage({
 
 
 <p>
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/rotatebg.png" width='150'>
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/rotateimageicon.png" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/rotatebg.png" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/rotateimageicon.png" width='150'>
 </p>
 
 ##### Example
@@ -540,7 +607,7 @@ Marker.markText({
 ##### Sample
 
 
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/rotateicon.png" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/rotateicon.png" width='150'>
 
 ##### Example
 
@@ -569,7 +636,7 @@ Marker.markImage({
 ##### Sample
 
 
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/alphabgonly.png" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/alphabgonly.png" width='150'>
 
 ##### Example
 
@@ -598,7 +665,7 @@ Marker.markImage({
 ##### Sample
 
 
- <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/asset/alphicononly.png" width='150'>
+ <img src="https://raw.githubusercontent.com/JimmyDaddy/react-native-image-marker/master/assets/alphicononly.png" width='150'>
 
 ##### Example
 
@@ -686,6 +753,11 @@ This library use [Fresco](https://github.com/facebook/fresco) to decode image on
 If you want to run the example locally, you can do the following:
 
 ```bash
+
+git clone [email protected]:JimmyDaddy/react-native-image-marker.git
+
+cd ./react-native-image-marker
+
 # Android
 # Open an android emulator or connect a real device at first
 yarn example android

diff --git a/android/src/main/java/com/jimmydaddy/imagemarker/ImageMarkerManager.kt b/android/src/main/java/com/jimmydaddy/imagemarker/ImageMarkerManager.kt
@@ -84,8 +84,8 @@ class ImageMarkerManager(private val context: ReactApplicationContext) : ReactCo
         } else {
           canvas.drawBitmap(
             markerBitmap!!,
-            (Utils.parseSpreadValue(markOpts.x, width) ?: DEFAULT_MARGIN).toFloat(),
-            (Utils.parseSpreadValue(markOpts.y, height) ?: DEFAULT_MARGIN).toFloat(),
+            (Utils.parseSpreadValue(markOpts.x, width.toFloat()) ?: DEFAULT_MARGIN),
+            (Utils.parseSpreadValue(markOpts.y, height.toFloat()) ?: DEFAULT_MARGIN),
             markOpts.imageOption.applyStyle()
           )
         }

diff --git a/android/src/main/java/com/jimmydaddy/imagemarker/base/Constants.kt b/android/src/main/java/com/jimmydaddy/imagemarker/base/Constants.kt
@@ -15,5 +15,5 @@ object Constants {
 
   const val BASE64 = "base64"
 
-  const val DEFAULT_MARGIN = 20;
+  const val DEFAULT_MARGIN = 20f
 }
diff --git a/android/src/main/java/com/jimmydaddy/imagemarker/base/CornerRadius.kt b/android/src/main/java/com/jimmydaddy/imagemarker/base/CornerRadius.kt
@@ -0,0 +1,95 @@
+package com.jimmydaddy.imagemarker.base
+
+import com.facebook.react.bridge.ReadableMap
+
+import android.graphics.RectF
+
+data class CornerRadius(val opts: ReadableMap?) {
+  private var topLeft: Radius? = null
+  private var topRight: Radius? = null
+  private var bottomLeft: Radius? = null
+  private var bottomRight: Radius? = null
+  private var all: Radius? = null
+
+  init {
+
+    val iterator = opts?.entryIterator
+
+    if (iterator != null) {
+      while (iterator.hasNext()) {
+        val entry = iterator.next()
+        val cornerRadius = entry.value
+
+        when (entry.key) {
+          "topLeft" -> {
+            if (cornerRadius == null) break
+            topLeft = Radius(cornerRadius as ReadableMap?)
+          }
+
+          "topRight" -> {
+            if (cornerRadius == null) break
+            topRight = Radius(cornerRadius as ReadableMap?)
+          }
+
+          "bottomLeft" -> {
+            if (cornerRadius == null) break
+            bottomLeft = Radius(cornerRadius as ReadableMap?)
+          }
+
+          "bottomRight" -> {
+            if (cornerRadius == null) break
+            bottomRight = Radius(cornerRadius as ReadableMap?)
+          }
+
+          else -> {
+            if (cornerRadius == null) break
+            all = Radius(cornerRadius as ReadableMap?)
+          }
+        }
+      }
+    }
+  }
+
+  fun radii(rect: RectF): FloatArray {
+    var mxRadius = 0f
+    var myRadius = 0f
+
+    if (all != null) {
+      mxRadius = Utils.parseSpreadValue(all!!.x, rect.width())
+      myRadius = Utils.parseSpreadValue(all!!.y, rect.height())
+    }
+
+    val radii = floatArrayOf(
+      mxRadius, // topLeftX
+      myRadius, // topLeftY
+      mxRadius, // topRightX
+      myRadius, // topRightY
+      mxRadius, // bottomRightX
+      myRadius, // bottomRightY
+      mxRadius, // bottomLeftX
+      myRadius  // bottomLeftY
+    )
+
+    if (topLeft != null) {
+      radii[0] = Utils.parseSpreadValue(topLeft!!.x, rect.width())
+      radii[1] = Utils.parseSpreadValue(topLeft!!.y, rect.height())
+    }
+
+    if (topRight != null) {
+      radii[2] = Utils.parseSpreadValue(topRight!!.x, rect.width())
+      radii[3] = Utils.parseSpreadValue(topRight!!.y, rect.height())
+    }
+
+    if (bottomRight != null) {
+      radii[4] = Utils.parseSpreadValue(bottomRight!!.x, rect.width())
+      radii[5] = Utils.parseSpreadValue(bottomRight!!.y, rect.height())
+    }
+
+    if (bottomLeft != null) {
+      radii[6] = Utils.parseSpreadValue(bottomLeft!!.x, rect.width())
+      radii[7] = Utils.parseSpreadValue(bottomLeft!!.y, rect.height())
+    }
+
+    return radii
+  }
+}
diff --git a/android/src/main/java/com/jimmydaddy/imagemarker/base/ImageOptions.kt b/android/src/main/java/com/jimmydaddy/imagemarker/base/ImageOptions.kt
@@ -9,8 +9,8 @@ import com.jimmydaddy.imagemarker.base.Constants.DEFAULT_ALPHA
 import com.jimmydaddy.imagemarker.base.Constants.DEFAULT_ROTATE
 import com.jimmydaddy.imagemarker.base.Constants.DEFAULT_SCALE
 
-class ImageOptions(options: ReadableMap) {
-  var src: ReadableMap?
+class ImageOptions(val options: ReadableMap) {
+  var src: ReadableMap? = options.getMap("src")
 
   var uri: String?
 
@@ -20,7 +20,6 @@ class ImageOptions(options: ReadableMap) {
   private var alpha: Int
 
   init {
-    src = options.getMap("src")
     if (src == null) {
       throw MarkerError(ErrorCode.PARAMS_REQUIRED, "image is required")
     }