Android and iOS add handling imageScale

doric-android/doric/src/main/java/pub/doric/engine/DoricJSEngine.java

@@ -100,11 +100,6 @@ public class DoricJSEngine implements Handler.Callback, DoricTimerExtension.Time
         } catch (Exception e) {
             e.printStackTrace();
         }
-        Resources resources = Resources.getSystem();
-        float scale = 0;
-        if (resources.getDisplayMetrics() != null) {
-            scale = resources.getDisplayMetrics().density;
-        }
         JSONBuilder envObject = new JSONBuilder()
                 .put("platform", "Android")
                 .put("platformVersion", String.valueOf(android.os.Build.VERSION.SDK_INT))
@@ -112,7 +107,7 @@ public class DoricJSEngine implements Handler.Callback, DoricTimerExtension.Time
                 .put("appVersion", appVersion)
                 .put("screenWidth", DoricUtils.px2dp(DoricUtils.getScreenWidth()))
                 .put("screenHeight", DoricUtils.px2dp(DoricUtils.getScreenHeight()))
-                .put("screenScale", scale)
+                .put("screenScale", DoricUtils.getScreenScale())
                 .put("statusBarHeight", DoricUtils.px2dp(DoricUtils.getStatusBarHeight()))
                 .put("hasNotch", false)
                 .put("deviceBrand", Build.BRAND)

doric-android/doric/src/main/java/pub/doric/shader/ImageNode.java

@@ -17,8 +17,10 @@ package pub.doric.shader;
 
 import android.annotation.SuppressLint;
 import android.app.Activity;
+import android.content.res.Resources;
 import android.graphics.Bitmap;
 import android.graphics.Color;
+import android.graphics.Matrix;
 import android.graphics.Rect;
 import android.graphics.drawable.BitmapDrawable;
 import android.graphics.drawable.ColorDrawable;
@@ -71,6 +73,7 @@ public class ImageNode extends ViewNode<ImageView> {
     private int placeHolderColor = Color.TRANSPARENT;
     private int errorColor = Color.TRANSPARENT;
     private JSObject stretchInset = null;
+    private float imageScale = DoricUtils.getScreenScale();
 
     public ImageNode(DoricContext doricContext) {
         super(doricContext);
@@ -242,7 +245,13 @@ public class ImageNode extends ViewNode<ImageView> {
             protected void setResource(@Nullable Drawable resource) {
                 if (resource instanceof BitmapDrawable) {
                     Bitmap bitmap = ((BitmapDrawable) resource).getBitmap();
-
+                    if (imageScale != DoricUtils.getScreenScale()) {
+                        float scale = DoricUtils.getScreenScale() / imageScale;
+                        Matrix matrix = new Matrix();
+                        matrix.setScale(scale, scale);
+                        bitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
+                        resource = new BitmapDrawable(getContext().getResources(), bitmap);
+                    }
                     if (stretchInset != null) {
                         float left = stretchInset.getProperty("left").asNumber().toFloat();
                         float top = stretchInset.getProperty("top").asNumber().toFloat();
@@ -250,10 +259,10 @@ public class ImageNode extends ViewNode<ImageView> {
                         float bottom = stretchInset.getProperty("bottom").asNumber().toFloat();
 
                         Rect rect = new Rect(
-                                (int) (bitmap.getWidth() * left),
-                                (int) (bitmap.getHeight() * top),
-                                (int) (bitmap.getWidth() * (1 - right)),
-                                (int) (bitmap.getHeight() * (1 - bottom))
+                                (int) left,
+                                (int) top,
+                                (int) (bitmap.getWidth() - right),
+                                (int) (bitmap.getHeight() - bottom)
                         );
 
                         NinePatchDrawable ninePatchDrawable = new NinePatchDrawable(
@@ -354,6 +363,11 @@ public class ImageNode extends ViewNode<ImageView> {
                     stretchInset = prop.asObject();
                 }
                 break;
+            case "imageScale":
+                if (prop.isNumber()) {
+                    imageScale = prop.asNumber().toFloat();
+                }
+                break;
             default:
                 super.blend(view, name, prop);
                 break;

doric-android/doric/src/main/java/pub/doric/utils/DoricUtils.java

@@ -229,6 +229,14 @@ public class DoricUtils {
         }
     }
 
+    public static float getScreenScale() {
+        Resources resources = Resources.getSystem();
+        if (resources.getDisplayMetrics() != null) {
+            return resources.getDisplayMetrics().density;
+        } else {
+            return 1;
+        }
+    }
 
     private final static int NO_COLOR = 0x00000001;
     private final static int X_SIZE = 2;

doric-demo/src/ImageDemo.ts

@@ -5,6 +5,7 @@ import { img_base64 } from "./image_base64";
 const imageUrl = 'https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.jpg@1280w_1l_2o_100sh.jpg'
 
 import logo from "./images/logo_w.png"
+import button from "./images/button.png"
 
 @Entry
 class ImageDemo extends Panel {
@@ -22,6 +23,59 @@ class ImageDemo extends Panel {
                         textAlignment: gravity().center(),
                         height: 50,
                     }),
+
+                    label('Button'),
+                    image({
+                        imageBase64: button,
+                        scaleType: ScaleType.ScaleToFill,
+                        layoutConfig: {
+                            widthSpec: LayoutSpec.FIT,
+                            heightSpec: LayoutSpec.FIT,
+                        },
+                        imageScale: 2,
+                    }),
+                    image({
+                        imageBase64: button,
+                        scaleType: ScaleType.ScaleToFill,
+                        layoutConfig: {
+                            widthSpec: LayoutSpec.FIT,
+                            heightSpec: LayoutSpec.FIT,
+                        },
+                    }),
+                    image({
+                        imageBase64: button,
+                        scaleType: ScaleType.ScaleToFill,
+                        layoutConfig: {
+                            widthSpec: LayoutSpec.JUST,
+                            heightSpec: LayoutSpec.JUST,
+                        },
+                        width: 200,
+                        height: 150 / 2.75,
+                        stretchInset: {
+                            left: 100,
+                            top: 0,
+                            right: 100,
+                            bottom: 0
+                        },
+                        imageScale: 2.75,
+                    }),
+                    image({
+                        imageBase64: button,
+                        scaleType: ScaleType.ScaleToFill,
+                        layoutConfig: {
+                            widthSpec: LayoutSpec.JUST,
+                            heightSpec: LayoutSpec.JUST,
+                        },
+                        width: 200,
+                        height: 75,
+                        stretchInset: {
+                            left: 100,
+                            top: 0,
+                            right: 100,
+                            bottom: 0
+                        },
+                        imageScale: 2,
+                    }),
                     label('Gif'),
                     image({
                         imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world-cup_2014_42.gif",
@@ -29,7 +83,8 @@ class ImageDemo extends Panel {
                         loadCallback: function (ret) {
                             log('this')
                             log('loadCallback', ret)
-                        }
+                        },
+                        imageScale: 2,
                     }),
                     label('APNG'),
                     image({
@@ -128,15 +183,6 @@ class ImageDemo extends Panel {
                             bottom: 0
                         }
                     }),
-                    label('Asset Image'),
-                    image({
-                        imageBase64: logo,
-                        width: 235,
-                        height: 235,
-                        backgroundColor: Color.BLACK,
-                        scaleType: ScaleType.ScaleAspectFill,
-                        layoutConfig: layoutConfig().just(),
-                    }),
                 ],
                 {
                     layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),

doric-iOS/Pod/Classes/Shader/DoricImageNode.m

@@ -41,11 +41,13 @@ @interface DoricImageNode ()
 @property(nonatomic, strong) NSString *errorImage;
 @property(nonatomic, strong) UIVisualEffectView *blurEffectView;
 @property(nonatomic, strong) NSDictionary *stretchInsetDic;
+@property(nonatomic, assign) CGFloat imageScale;
 @end
 
 @implementation DoricImageNode
 
 - (UIImageView *)build {
+    self.imageScale = UIScreen.mainScreen.scale;
     return [[DoricImageView new] also:^(UIImageView *it) {
         it.clipsToBounds = YES;
         it.contentMode = UIViewContentModeScaleAspectFill;
@@ -65,6 +67,9 @@ - (void)blend:(NSDictionary *)props {
     [props[@"errorImage"] also:^(id it) {
         self.errorImage = it;
     }];
+    [props[@"imageScale"] also:^(NSNumber *it) {
+        self.imageScale = it.floatValue;
+    }];
     [super blend:props];
 }
 
@@ -129,6 +134,10 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
                     [self callJSResponse:self.loadCallbackId, nil];
                 }
             } else {
+                if (image.scale != self.imageScale) {
+                    image = [YYImage imageWithCGImage:image.CGImage scale:self.imageScale orientation:image.imageOrientation];
+                    self.view.image = image;
+                }
                 if (self.loadCallbackId.length > 0) {
                     [self callJSResponse:self.loadCallbackId,
                                          @{@"width": @(image.size.width), @"height": @(image.size.height)},
@@ -169,7 +178,7 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
         }
         NSData *imageData = [[NSData alloc] initWithBase64EncodedString:base64
                                                                 options:NSDataBase64DecodingIgnoreUnknownCharacters];
-        YYImage *image = [YYImage imageWithData:imageData scale:UIScreen.mainScreen.scale];
+        YYImage *image = [YYImage imageWithData:imageData scale:self.imageScale];
         view.image = image;
     } else if ([@"isBlur" isEqualToString:name]) {
         NSInteger value = [prop intValue];
@@ -218,7 +227,8 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
     } else if ([@"imagePath" isEqualToString:name]) {
         NSString *path = [[NSBundle mainBundle] bundlePath];
         NSString *fullPath = [path stringByAppendingPathComponent:prop];
-        YYImage *image = [YYImage imageWithContentsOfFile:fullPath];
+        NSData *imgData = [[NSData alloc] initWithContentsOfFile:fullPath];
+        YYImage *image = [YYImage imageWithData:imgData scale:self.imageScale];
         view.image = image;
         if (self.loadCallbackId.length > 0) {
             if (image) {
@@ -231,6 +241,8 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
         }
     } else if ([@"stretchInset" isEqualToString:name]) {
         self.stretchInsetDic = (NSDictionary *)prop;
+    } else if ([@"imageScale" isEqualToString:name]) {
+        //Do not need set
     } else {
         [super blendView:view forPropName:name propValue:prop];
     }
@@ -242,7 +254,8 @@ - (void)afterBlended:(NSDictionary *)props {
         CGFloat top = [self.stretchInsetDic[@"top"] floatValue];
         CGFloat right = [self.stretchInsetDic[@"right"] floatValue];
         CGFloat bottom = [self.stretchInsetDic[@"bottom"] floatValue];
-        UIImage *result = [self.view.image resizableImageWithCapInsets:UIEdgeInsetsMake(top * self.view.image.size.height, left * self.view.image.size.width, bottom * self.view.image.size.height, right * self.view.image.size.width) resizingMode:UIImageResizingModeStretch];
+        CGFloat scale = self.imageScale;
+        UIImage *result = [self.view.image resizableImageWithCapInsets:UIEdgeInsetsMake(top/scale, left/scale, bottom/scale, right/scale) resizingMode:UIImageResizingModeStretch];
         self.view.image = result;
     }
 }

doric-web/dist/index.js

@@ -2853,6 +2853,10 @@ __decorate$4([
     Property,
     __metadata$4("design:type", Function)
 ], Image.prototype, "loadCallback", void 0);
+__decorate$4([
+    Property,
+    __metadata$4("design:type", Number)
+], Image.prototype, "imageScale", void 0);
 __decorate$4([
     Property,
     __metadata$4("design:type", Object)