fixed bug with child views transformation loss

android/src/main/java/fr/greweb/reactnativeviewshot/DebugViews.java

@@ -0,0 +1,223 @@
+package fr.greweb.reactnativeviewshot;
+
+import android.annotation.TargetApi;
+import android.app.Activity;
+import android.content.res.Resources;
+import android.graphics.Matrix;
+import android.os.Build;
+import android.support.annotation.NonNull;
+import android.support.v4.util.Pair;
+import android.util.Log;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.TextView;
+
+import java.util.Locale;
+import java.util.Stack;
+
+import javax.annotation.Nullable;
+
+import static android.view.View.GONE;
+import static android.view.View.INVISIBLE;
+import static android.view.View.VISIBLE;
+
+/**
+ * @see <a href="https://gist.github.com/OleksandrKucherenko/054b0331ec791edb39db76bd690ecdb2">Author of the Snippet</a>
+ */
+@SuppressWarnings("WeakerAccess")
+public final class DebugViews {
+    /**
+     * Chunk of the long log line.
+     */
+    public static final int LOG_MSG_LIMIT = 200;
+    /**
+     * Initial matrix without transformations.
+     */
+    public static final Matrix EMPTY_MATRIX = new Matrix();
+
+    /**
+     * Log long message by chunks
+     *
+     * @param message message to log.
+     */
+    @SuppressWarnings("UnusedReturnValue")
+    public static int longDebug(@NonNull final String tag, @NonNull final String message) {
+        int counter = 0;
+
+        String msg = message;
+
+        while (msg.length() > 0) {
+            final int endOfLine = msg.indexOf("\n"); // -1, 0, 1
+            final int breakPoint = Math.min(endOfLine < 0 ? LOG_MSG_LIMIT : endOfLine + 1, LOG_MSG_LIMIT);
+            final int last = Math.min(msg.length(), breakPoint);
+            final String out = String.format(Locale.US, "%02d: %s", counter, msg.substring(0, last));
+            Log.d(tag, out);
+
+            msg = msg.substring(last);
+            counter++;
+        }
+
+        return counter;
+    }
+
+    /**
+     * Print into log activity views hierarchy.
+     */
+    @NonNull
+    public static String logViewHierarchy(@NonNull final Activity activity) {
+        final View view = activity.findViewById(android.R.id.content);
+
+        if (null == view)
+            return "Activity [" + activity.getClass().getSimpleName() + "] is not initialized yet. ";
+
+        return logViewHierarchy(view);
+    }
+
+    /**
+     * Print into log view hierarchy.
+     */
+    @NonNull
+    private static String logViewHierarchy(@NonNull final View root) {
+        final StringBuilder output = new StringBuilder(8192).append("\n");
+        final Resources r = root.getResources();
+        final Stack<Pair<String, View>> stack = new Stack<>();
+        stack.push(Pair.create("", root));
+
+        while (!stack.empty()) {
+            @NonNull final Pair<String, View> p = stack.pop();
+            @NonNull final View v = p.second;
+            @NonNull final String prefix = p.first;
+
+            final boolean isLastOnLevel = stack.empty() || !prefix.equals(stack.peek().first);
+            final String graphics = "" + prefix + (isLastOnLevel ? "└── " : "├── ");
+
+            final String className = v.getClass().getSimpleName();
+            final String line = graphics + className + dumpProperties(r, v);
+
+            output.append(line).append("\n");
+
+            if (v instanceof ViewGroup) {
+                final ViewGroup vg = (ViewGroup) v;
+                for (int i = vg.getChildCount() - 1; i >= 0; i--) {
+                    stack.push(Pair.create(prefix + (isLastOnLevel ? "    " : "│   "), vg.getChildAt(i)));
+                }
+            }
+        }
+
+        return output.toString();
+    }
+
+    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
+    @NonNull
+    private static String dumpProperties(@NonNull final Resources r, @NonNull final View v) {
+        final StringBuilder sb = new StringBuilder();
+
+        sb.append(" ").append("id=").append(v.getId()).append(resolveIdToName(r, v));
+
+        switch (v.getVisibility()) {
+            case VISIBLE:
+                sb.append(", V--");
+                break;
+            case INVISIBLE:
+                sb.append(", -I-");
+                break;
+            case GONE:
+                sb.append(", --G");
+                break;
+            default:
+                sb.append(", ---");
+                break;
+        }
+
+        // transformation matrix exists, rotate/scale/skew/translate/
+        if (!v.getMatrix().equals(EMPTY_MATRIX)) {
+            sb.append(", ").append("matrix=").append(v.getMatrix().toShortString());
+
+            if (0.0f != v.getRotation() || 0.0f != v.getRotationX() || 0.0f != v.getRotationY()) {
+                sb.append(", rotate=[")
+                        .append(v.getRotation()).append(",")
+                        .append(v.getRotationX()).append(",")
+                        .append(v.getRotationY())
+                        .append("]");
+
+                // print pivote only if its not default
+                if (v.getWidth() / 2 != v.getPivotX() || v.getHeight() / 2 != v.getPivotY()) {
+                    sb.append(", pivot=[")
+                            .append(v.getPivotX()).append(",")
+                            .append(v.getPivotY())
+                            .append("]");
+                }
+            }
+
+            if (0.0f != v.getTranslationX() || 0.0f != v.getTranslationY() || 0.0f != v.getTranslationZ()) {
+                sb.append(", translate=[")
+                        .append(v.getTranslationX()).append(",")
+                        .append(v.getTranslationY()).append(",")
+                        .append(v.getTranslationZ())
+                        .append("]");
+            }
+
+            if (1.0f != v.getScaleX() || 1.0f != v.getScaleY()) {
+                sb.append(", scale=[")
+                        .append(v.getScaleX()).append(",")
+                        .append(v.getScaleY())
+                        .append("]");
+            }
+        }
+
+        // padding's
+        if (0 != v.getPaddingStart() || 0 != v.getPaddingTop() ||
+                0 != v.getPaddingEnd() || 0 != v.getPaddingBottom()) {
+            sb.append(", ")
+                    .append("padding=[")
+                    .append(v.getPaddingStart()).append(",")
+                    .append(v.getPaddingTop()).append(",")
+                    .append(v.getPaddingEnd()).append(",")
+                    .append(v.getPaddingBottom())
+                    .append("]");
+        }
+
+        // margin's
+        final ViewGroup.LayoutParams lp = v.getLayoutParams();
+        if (lp instanceof ViewGroup.MarginLayoutParams) {
+            final ViewGroup.MarginLayoutParams mlp = (ViewGroup.MarginLayoutParams) lp;
+
+            if (0 != mlp.leftMargin || 0 != mlp.topMargin ||
+                    0 != mlp.rightMargin || 0 != mlp.bottomMargin) {
+                sb.append(", ").append("margin=[")
+                        .append(mlp.leftMargin).append(",")
+                        .append(mlp.topMargin).append(",")
+                        .append(mlp.rightMargin).append(",")
+                        .append(mlp.bottomMargin)
+                        .append("]");
+            }
+        }
+
+        // width, height, size
+        sb.append(", position=[").append(v.getLeft()).append(",").append(v.getTop()).append("]");
+        sb.append(", size=[").append(v.getWidth()).append(",").append(v.getHeight()).append("]");
+
+        // texts
+        if (v instanceof TextView) {
+            final TextView tv = (TextView) v;
+
+            sb.append(", text=\"").append(tv.getText()).append("\"");
+        }
+
+        return sb.toString();
+    }
+
+    /**
+     * @see <a href="https://stackoverflow.com/questions/10137692/how-to-get-resource-name-from-resource-id">Lookup resource name</a>
+     */
+    @NonNull
+    private static String resolveIdToName(@Nullable final Resources r, @NonNull final View v) {
+        if (null == r) return "";
+
+        try {
+            return " / " + r.getResourceEntryName(v.getId());
+        } catch (Throwable ignored) {
+            return "";
+        }
+    }
+}

android/src/main/java/fr/greweb/reactnativeviewshot/RNViewShotModule.java

@@ -100,7 +100,8 @@ public class RNViewShotModule extends ReactContextBaseJavaModule {
                     scaleWidth, scaleHeight, outputFile, resultStreamFormat,
                     snapshotContentContainer, reactContext, activity, promise)
             );
-        } catch (final Throwable ignored) {
+        } catch (final Throwable ex) {
+            Log.e(RNVIEW_SHOT, "Failed to snapshot view tag " + tag, ex);
             promise.reject(ViewShot.ERROR_UNABLE_TO_SNAPSHOT, "Failed to snapshot view tag " + tag);
         }
     }

android/src/main/java/fr/greweb/reactnativeviewshot/ViewShot.java

@@ -5,18 +5,17 @@ import android.graphics.Bitmap;
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Matrix;
+import android.graphics.Paint;
 import android.graphics.Point;
-import android.graphics.Rect;
-import android.graphics.RectF;
 import android.net.Uri;
 import android.support.annotation.IntDef;
 import android.support.annotation.NonNull;
 import android.support.annotation.StringDef;
 import android.util.Base64;
+import android.util.Log;
 import android.view.TextureView;
 import android.view.View;
 import android.view.ViewGroup;
-import android.view.ViewParent;
 import android.widget.ScrollView;
 
 import com.facebook.react.bridge.Promise;
@@ -34,6 +33,7 @@ import java.nio.charset.Charset;
 import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.Collections;
+import java.util.LinkedList;
 import java.util.List;
 import java.util.Locale;
 import java.util.Set;
@@ -42,12 +42,21 @@ import java.util.zip.Deflater;
 
 import javax.annotation.Nullable;
 
+import static android.view.View.VISIBLE;
+
 /**
  * Snapshot utility class allow to screenshot a view.
  */
 public class ViewShot implements UIBlock {
     //region Constants
-    static final String ERROR_UNABLE_TO_SNAPSHOT = "E_UNABLE_TO_SNAPSHOT";
+    /**
+     * Tag fort Class logs.
+     */
+    private static final String TAG = ViewShot.class.getSimpleName();
+    /**
+     * Error code that we return to RN.
+     */
+    public static final String ERROR_UNABLE_TO_SNAPSHOT = "E_UNABLE_TO_SNAPSHOT";
     /**
      * pre-allocated output stream size for screenshot. In real life example it will eb around 7Mb.
      */
@@ -163,6 +172,7 @@ public class ViewShot implements UIBlock {
         }
 
         if (view == null) {
+            Log.e(TAG, "No view found with reactTag: " + tag, new AssertionError());
             promise.reject(ERROR_UNABLE_TO_SNAPSHOT, "No view found with reactTag: " + tag);
             return;
         }
@@ -181,7 +191,8 @@ public class ViewShot implements UIBlock {
             } else if (Results.DATA_URI.equals(result)) {
                 saveToDataUriString(view);
             }
-        } catch (final Throwable ignored) {
+        } catch (final Throwable ex) {
+            Log.e(TAG, "Failed to capture view snapshot", ex);
             promise.reject(ERROR_UNABLE_TO_SNAPSHOT, "Failed to capture view snapshot");
         }
     }
@@ -290,6 +301,8 @@ public class ViewShot implements UIBlock {
      */
     private Point captureView(@NonNull final View view, @NonNull final OutputStream os) throws IOException {
         try {
+            DebugViews.longDebug(TAG, DebugViews.logViewHierarchy(this.currentActivity));
+
             return captureViewImpl(view, os);
         } finally {
             os.close();
@@ -310,7 +323,7 @@ public class ViewShot implements UIBlock {
             throw new RuntimeException("Impossible to snapshot the view: view is invalid");
         }
 
-        //evaluate real height
+        // evaluate real height
         if (snapshotContentContainer) {
             h = 0;
             ScrollView scrollView = (ScrollView) view;
@@ -322,6 +335,14 @@ public class ViewShot implements UIBlock {
         final Point resolution = new Point(w, h);
         Bitmap bitmap = getBitmapForScreenshot(w, h);
 
+        final Paint paint = new Paint();
+        paint.setAntiAlias(true);
+        paint.setFilterBitmap(true);
+        paint.setDither(true);
+
+        // Uncomment next line if you want to wait attached android studio debugger:
+        //   Debug.waitForDebugger();
+
         final Canvas c = new Canvas(bitmap);
         view.draw(c);
 
@@ -331,28 +352,24 @@ public class ViewShot implements UIBlock {
         for (final View child : childrenList) {
             // skip any child that we don't know how to process
             if (!(child instanceof TextureView)) continue;
+
             // skip all invisible to user child views
-            if (child.getVisibility() != View.VISIBLE) continue;
+            if (child.getVisibility() != VISIBLE) continue;
 
             final TextureView tvChild = (TextureView) child;
-            tvChild.setOpaque(false);
+            tvChild.setOpaque(false); // <-- switch off background fill
 
-            final Point offsets = getParentOffsets(view, child);
-            final int left = child.getLeft() + child.getPaddingLeft() + offsets.x;
-            final int top = child.getTop() + child.getPaddingTop() + offsets.y;
-            final int childWidth = child.getWidth();
-            final int childHeight = child.getHeight();
-            final Rect source = new Rect(0, 0, childWidth, childHeight);
-            final RectF destination = new RectF(left, top, left + childWidth, top + childHeight);
+            // NOTE (olku): get re-usable bitmap. TextureView should use bitmaps with matching size,
+            // otherwise content of the TextureView will be scaled to provided bitmap dimensions
+            final Bitmap childBitmapBuffer = tvChild.getBitmap(getExactBitmapForScreenshot(child.getWidth(), child.getHeight()));
 
-            // get re-usable bitmap
-            final Bitmap childBitmapBuffer = tvChild.getBitmap(getBitmapForScreenshot(child.getWidth(), child.getHeight()));
+            final int countCanvasSave = c.save();
+            applyTransformations(c, view, child);
 
-            c.save();
-            c.setMatrix(concatMatrix(view, child));
             // due to re-use of bitmaps for screenshot, we can get bitmap that is bigger in size than requested
-            c.drawBitmap(childBitmapBuffer, source, destination, null);
-            c.restore();
+            c.drawBitmap(childBitmapBuffer, 0, 0, paint);
+
+            c.restoreToCount(countCanvasSave);
             recycleBitmap(childBitmapBuffer);
         }
 
@@ -380,38 +397,43 @@ public class ViewShot implements UIBlock {
         return resolution; // return image width and height
     }
 
-    /** Concat all the transformation matrix's from child to parent. */
+    /**
+     * Concat all the transformation matrix's from parent to child.
+     */
     @NonNull
-    private Matrix concatMatrix(@NonNull final View view, @NonNull final View child){
+    @SuppressWarnings("UnusedReturnValue")
+    private Matrix applyTransformations(final Canvas c, @NonNull final View root, @NonNull final View child) {
         final Matrix transform = new Matrix();
+        final LinkedList<View> ms = new LinkedList<>();
 
+        // find all parents of the child view
         View iterator = child;
         do {
+            ms.add(iterator);
 
-            final Matrix m = iterator.getMatrix();
-            transform.preConcat(m);
-
-            iterator = (View)iterator.getParent();
-        } while( iterator != view );
+            iterator = (View) iterator.getParent();
+        } while (iterator != root);
 
-        return transform;
-    }
-
-    @NonNull
-    private Point getParentOffsets(@NonNull final View view, @NonNull final View child) {
-        int left = 0;
-        int top = 0;
+        // apply transformations from parent --> child order
+        Collections.reverse(ms);
 
-        View parentElem = (View) child.getParent();
-        while (parentElem != null) {
-            if (parentElem == view) break;
+        for (final View v : ms) {
+            c.save();
 
-            left += parentElem.getLeft();
-            top += parentElem.getTop();
-            parentElem = (View) parentElem.getParent();
+            // apply each view transformations, so each child will be affected by them
+            final float dx = v.getLeft() + ((v != child) ? v.getPaddingLeft() : 0) + v.getTranslationX();
+            final float dy = v.getTop() + ((v != child) ? v.getPaddingTop() : 0) + v.getTranslationY();
+            c.translate(dx, dy);
+            c.rotate(v.getRotation(), v.getPivotX(), v.getPivotY());
+            c.scale(v.getScaleX(), v.getScaleY());
+
+            // compute the matrix just for any future use
+            transform.postTranslate(dx, dy);
+            transform.postRotate(v.getRotation(), v.getPivotX(), v.getPivotY());
+            transform.postScale(v.getScaleX(), v.getScaleY());
         }
 
-        return new Point(left, top);
+        return transform;
     }
 
     @SuppressWarnings("unchecked")
@@ -450,13 +472,32 @@ public class ViewShot implements UIBlock {
     }
 
     /**
-     * Try to find a bitmap for screenshot in reusabel set and if not found create a new one.
+     * Try to find a bitmap for screenshot in reusable set and if not found create a new one.
      */
     @NonNull
     private static Bitmap getBitmapForScreenshot(final int width, final int height) {
         synchronized (guardBitmaps) {
             for (final Bitmap bmp : weakBitmaps) {
-                if (bmp.getWidth() * bmp.getHeight() <= width * height) {
+                if (bmp.getWidth() >= width && bmp.getHeight() >= height) {
+                    weakBitmaps.remove(bmp);
+                    bmp.eraseColor(Color.TRANSPARENT);
+                    return bmp;
+                }
+            }
+        }
+
+        return Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
+    }
+
+    /**
+     * Try to find a bitmap with exact width and height for screenshot in reusable set and if
+     * not found create a new one.
+     */
+    @NonNull
+    private static Bitmap getExactBitmapForScreenshot(final int width, final int height) {
+        synchronized (guardBitmaps) {
+            for (final Bitmap bmp : weakBitmaps) {
+                if (bmp.getWidth() == width && bmp.getHeight() == height) {
                     weakBitmaps.remove(bmp);
                     bmp.eraseColor(Color.TRANSPARENT);
                     return bmp;

example/App.js

@@ -263,7 +263,7 @@ export default class App extends Component {
         <View ref="empty" collapsable={false} />
         <View style={styles.experimental} ref="complex" collapsable={false}>
           <Text style={styles.experimentalTitle}>Experimental Stuff</Text>
-          <View ref="transformParent" collapsable={false}>
+          <View ref="transformParent" collapsable={false} style={{flex: 1, flexDirection: 'row'}}>
               <View ref="transformInner" collapsable={false} style={styles.experimentalTransform}>
                 <Text ref="transform" >Transform</Text>
                 <ART.Surface ref="surface" width={20} height={20}>
@@ -280,6 +280,17 @@ export default class App extends Component {
                     </ART.Shape>
                 </ART.Surface>
               </View>
+              <View ref="right" style={styles.experimentalTransformV2}>
+                <ART.Surface ref="surface2" width={20} height={20}>
+                    <ART.Shape
+                            x={0}
+                            y={10}
+                            d='M2.876,10.6499757 L16.375,18.3966817 C16.715,18.5915989 17.011,18.4606545 17.125,18.3956822 C17.237,18.3307098 17.499,18.1367923 17.499,17.746958 L17.499,2.25254636 C17.499,1.86271212 17.237,1.66879457 17.125,1.6038222 C17.011,1.53884983 16.715,1.4079055 16.375,1.60282262 L2.876,9.34952866 C2.537,9.54544536 2.5,9.86930765 2.5,10.000252 C2.5,10.1301967 2.537,10.4550586 2.876,10.6499757 M16.749,20 C16.364,20 15.98,19.8990429 15.629,19.6971288 L2.13,11.9504227 L2.129,11.9504227 C1.422,11.5445953 1,10.8149056 1,10.000252 C1,9.18459879 1.422,8.45590864 2.129,8.04908162 L15.629,0.302375584 C16.332,-0.10245228 17.173,-0.10045313 17.876,0.306373884 C18.579,0.713200898 18.999,1.44089148 18.999,2.25254636 L18.999,17.746958 C18.999,18.5586129 18.579,19.2863035 17.876,19.6931305 C17.523,19.8970438 17.136,20 16.749,20'
+                            fill="red"
+                            >
+                    </ART.Shape>
+                </ART.Surface>
+              </View>
           </View>
           <View ref="svg" collapsable={false}>
             <SvgUri
@@ -351,7 +362,12 @@ const styles = StyleSheet.create({
     margin: 10
   },
   experimentalTransform: {
-    transform: [{ rotate: '180deg' }]
+    transform: [{ rotate: '180deg' }],
+    backgroundColor: 'powderblue',
+  },
+  experimentalTransformV2: {
+//    transform: [{ rotate: '180deg' }],
+    backgroundColor: 'skyblue',
   },
   p1: {
     marginBottom: 10,

example/android/app/build.gradle

@@ -142,16 +142,16 @@ repositories {
 }
 
 dependencies {
-    compile project(':react-native-svg')
-    compile fileTree(dir: "libs", include: ["*.jar"])
+    implementation project(':react-native-svg')
+    implementation fileTree(dir: "libs", include: ["*.jar"])
 
-    compile "com.android.support:appcompat-v7:27.+"
-    compile "com.facebook.react:react-native:+"  // From node_modules
+    implementation "com.android.support:appcompat-v7:27.+"
+    implementation "com.facebook.react:react-native:+"  // From node_modules
 
-    compile project(':react-native-view-shot')
-    compile project(':gl-react-native')
-    compile project(':react-native-maps')
-    compile project(':react-native-video')
+    implementation project(':react-native-view-shot')
+    implementation project(':gl-react-native')
+    implementation project(':react-native-maps')
+    implementation project(':react-native-video')
 }
 
 // Run this once to be able to run the application with BUCK