fix the child draw matrix/transformation rendering issues

Author: Oleksandr Kucherenko

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

@@ -4,8 +4,10 @@
 import android.graphics.Bitmap;
 import android.graphics.Canvas;
 import android.graphics.Color;
+import android.graphics.Matrix;
 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;
@@ -14,6 +16,7 @@
 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;
@@ -328,6 +331,8 @@ private Point captureViewImpl(@NonNull final View view, @NonNull final OutputStr
         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;
 
             final TextureView tvChild = (TextureView) child;
             tvChild.setOpaque(false);
@@ -338,12 +343,16 @@ private Point captureViewImpl(@NonNull final View view, @NonNull final OutputStr
             final int childWidth = child.getWidth();
             final int childHeight = child.getHeight();
             final Rect source = new Rect(0, 0, childWidth, childHeight);
-            final Rect destination = new Rect(left, top, left + childWidth, top + childHeight);
+            final RectF destination = new RectF(left, top, left + childWidth, top + childHeight);
 
             // get re-usable bitmap
             final Bitmap childBitmapBuffer = tvChild.getBitmap(getBitmapForScreenshot(child.getWidth(), child.getHeight()));
+
+            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();
             recycleBitmap(childBitmapBuffer);
         }
 
@@ -371,6 +380,23 @@ private Point captureViewImpl(@NonNull final View view, @NonNull final OutputStr
         return resolution; // return image width and height
     }
 
+    /** Concat all the transformation matrix's from child to parent. */
+    @NonNull
+    private Matrix concatMatrix(@NonNull final View view, @NonNull final View child){
+        final Matrix transform = new Matrix();
+
+        View iterator = child;
+        do {
+
+            final Matrix m = iterator.getMatrix();
+            transform.preConcat(m);
+
+            iterator = (View)iterator.getParent();
+        } while( iterator != view );
+
+        return transform;
+    }
+
     @NonNull
     private Point getParentOffsets(@NonNull final View view, @NonNull final View child) {
         int left = 0;

example/App.js

@@ -9,7 +9,8 @@ import {
   TextInput,
   Picker,
   Slider,
-  WebView
+  WebView,
+  ART
 } from "react-native";
 import SvgUri from "react-native-svg-uri";
 import omit from "lodash/omit";
@@ -148,6 +149,8 @@ export default class App extends Component {
             />
             <Btn label="📷 All (ScrollView)" onPress={this.snapshot("full")} />
             <Btn label="📷 SVG" onPress={this.snapshot("svg")} />
+            <Btn label="📷 Transform" onPress={this.snapshot("transformParent")} />
+            <Btn label="📷 Transform Child" onPress={this.snapshot("transform")} />
             <Btn label="📷 GL React" onPress={this.snapshot("gl")} />
             <Btn label="📷 MapView" onPress={this.snapshot("mapview")} />
             <Btn label="📷 WebView" onPress={this.snapshot("webview")} />
@@ -169,6 +172,7 @@ export default class App extends Component {
               <Picker.Item label="PNG" value="png" />
               <Picker.Item label="JPEG" value="jpeg" />
               <Picker.Item label="WEBM (android only)" value="webm" />
+              <Picker.Item label="RAW (android only)" value="raw" />
               <Picker.Item label="INVALID" value="_invalid_" />
             </Picker>
           </View>
@@ -239,6 +243,7 @@ export default class App extends Component {
             >
               <Picker.Item label="tmpfile" value="tmpfile" />
               <Picker.Item label="base64" value="base64" />
+              <Picker.Item label="zip-base64 (Android Only)" value="zip-base64" />
               <Picker.Item label="data URI" value="data-uri" />
               <Picker.Item label="INVALID" value="_invalid_" />
             </Picker>
@@ -258,6 +263,24 @@ 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="transformInner" collapsable={false} style={styles.experimentalTransform}>
+                <Text ref="transform" >Transform</Text>
+                <ART.Surface ref="surface" width={20} height={20}>
+                    <ART.Text
+                            fill="#000000"
+                            font={{fontFamily:'Arial',fontSize: 6}}
+                            >Sample Text</ART.Text>
+                    <ART.Shape
+                            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="blue"
+                            stroke="black"
+                            strokeWidth={0}
+                            >
+                    </ART.Shape>
+                </ART.Surface>
+              </View>
+          </View>
           <View ref="svg" collapsable={false}>
             <SvgUri
               width={200}
@@ -327,6 +350,9 @@ const styles = StyleSheet.create({
     fontSize: 16,
     margin: 10
   },
+  experimentalTransform: {
+    transform: [{ rotate: '180deg' }]
+  },
   p1: {
     marginBottom: 10,
     flexDirection: "row",