feat:add ImageView scaleType

Android/doric/src/main/java/pub/doric/shader/ImageNode.java

@@ -19,7 +19,6 @@ import android.graphics.drawable.Drawable;
 
 import androidx.annotation.Nullable;
 
-import android.view.ViewGroup;
 import android.widget.ImageView;
 
 import com.bumptech.glide.Glide;
@@ -31,7 +30,6 @@ import com.bumptech.glide.request.target.Target;
 import pub.doric.DoricContext;
 import pub.doric.extension.bridge.DoricPlugin;
 
-import com.github.pengfeizhou.jscore.JSObject;
 import com.github.pengfeizhou.jscore.JSValue;
 
 /**
@@ -66,6 +64,19 @@ public class ImageNode extends ViewNode<ImageView> {
                         }
                     })
                     .into(view);
+        } else if ("scaleType".equals(name)) {
+            int scaleType = prop.asNumber().toInt();
+            switch (scaleType) {
+                case 1:
+                    view.setScaleType(ImageView.ScaleType.FIT_CENTER);
+                    break;
+                case 2:
+                    view.setScaleType(ImageView.ScaleType.CENTER_CROP);
+                    break;
+                default:
+                    view.setScaleType(ImageView.ScaleType.FIT_XY);
+                    break;
+            }
         } else {
             super.blend(view, name, prop);
         }

demo/index.ts

@@ -6,4 +6,5 @@ export default [
     'src/SliderDemo',
     'src/LayoutDemo',
     'src/EffectsDemo',
+    'src/ImageDemo',
 ]

demo/src/EffectsDemo.ts

@@ -1,6 +1,6 @@
 
 import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig } from "doric";
-import { colors } from "./colorutils";
+import { colors } from "./utils";
 
 
 function box(idx = 0) {
@@ -361,7 +361,7 @@ class EffectsDemo extends Panel {
                 it.space = 20
             }),
         ).also(it => {
-            it.layoutConfig = layoutConfig().wrap()
+            it.layoutConfig = layoutConfig().atmost()
         }).in(rootView)
     }
 }

demo/src/ImageDemo.ts

@@ -0,0 +1,61 @@
+import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, scroller, layoutConfig, image, IView, IVLayout, ScaleType } from "doric";
+import { colors, label } from "./utils";
+const imageUrl = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574244792703&di=c49ed8cd284c367fa8f00065a85428bd&imgtype=0&src=http%3A%2F%2Fimg3.iqilu.com%2Fdata%2Fattachment%2Fforum%2F201308%2F21%2F201709zikkhkjh7dgfi9f0.jpg'
+@Entry
+class ImageDemo extends Panel {
+    build(rootView: Group): void {
+        scroller(vlayout([
+            text({
+                text: "Image Demo",
+                layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
+                textSize: 30,
+                textColor: Color.WHITE,
+                bgColor: colors[1],
+                textAlignment: gravity().center(),
+                height: 50,
+            }),
+            label('ScaleToFill'),
+            image({
+                imageUrl,
+                width: 300,
+                height: 300,
+                border: {
+                    width: 2,
+                    color: Color.GRAY,
+                },
+                scaleType: ScaleType.ScaleToFill,
+                layoutConfig: layoutConfig().exactly(),
+            }),
+            label('ScaleAspectFit'),
+            image({
+                imageUrl,
+                width: 300,
+                height: 300,
+                border: {
+                    width: 2,
+                    color: Color.GRAY,
+                },
+                scaleType: ScaleType.ScaleAspectFit,
+                layoutConfig: layoutConfig().exactly(),
+            }),
+            label('ScaleAspectFill'),
+            image({
+                imageUrl,
+                width: 300,
+                height: 300,
+                border: {
+                    width: 2,
+                    color: Color.GRAY,
+                },
+                scaleType: ScaleType.ScaleAspectFill,
+                layoutConfig: layoutConfig().exactly(),
+            }),
+        ]).apply({
+            layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT),
+            gravity: gravity().center(),
+            space: 10,
+        } as IVLayout)).apply({
+            layoutConfig: layoutConfig().atmost(),
+        }).in(rootView)
+    }
+}

demo/src/SliderDemo.ts

@@ -1,5 +1,5 @@
 import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, slider, slideItem, image, layoutConfig } from "doric";
-import { colors } from "./colorutils";
+import { colors } from "./utils";
 
 const imageUrls = [
     'http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg',

demo/src/colorutils.ts

@@ -1,14 +0,0 @@
-import { Color } from "doric";
-
-export const colors = [
-    "#70a1ff",
-    "#7bed9f",
-    "#ff6b81",
-    "#a4b0be",
-    "#f0932b",
-    "#eb4d4b",
-    "#6ab04c",
-    "#e056fd",
-    "#686de0",
-    "#30336b",
-].map(e => Color.parse(e))

demo/src/utils.ts

@@ -0,0 +1,36 @@
+import { Color, text, Stack, Text } from "doric";
+
+export const colors = [
+    "#70a1ff",
+    "#7bed9f",
+    "#ff6b81",
+    "#a4b0be",
+    "#f0932b",
+    "#eb4d4b",
+    "#6ab04c",
+    "#e056fd",
+    "#686de0",
+    "#30336b",
+].map(e => Color.parse(e))
+
+export function label(str: string) {
+    return text({
+        text: str,
+        textSize: 16,
+    })
+}
+
+export function box(idx = 0) {
+    return (new Stack).also(it => {
+        it.width = it.height = 20
+        it.bgColor = colors[idx || 0]
+    })
+}
+export function boxStr(str: string, idx = 0) {
+    return (new Text).also(it => {
+        it.width = it.height = 20
+        it.text = str
+        it.textColor = Color.WHITE
+        it.bgColor = colors[idx || 0]
+    })
+}

iOS/Pod/Classes/Shader/DoricImageNode.m

@@ -21,21 +21,39 @@
 //
 
 #import "DoricImageNode.h"
+#import "Doric.h"
 #import <SDWebImage/SDWebImage.h>
 
 @implementation DoricImageNode
 
 - (UIImageView *)build {
-    return [[UIImageView alloc] init];
+    return [[UIImageView new] also:^(UIImageView *it) {
+        it.clipsToBounds = YES;
+    }];
 }
 
 - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id)prop {
-    if ([name isEqualToString:@"imageUrl"]) {
+    if ([@"imageUrl" isEqualToString:name]) {
         __weak typeof(self) _self = self;
         [view sd_setImageWithURL:[NSURL URLWithString:prop] completed:^(UIImage *_Nullable image, NSError *_Nullable error, SDImageCacheType cacheType, NSURL *_Nullable imageURL) {
             __strong typeof(_self) self = _self;
             [self requestLayout];
         }];
+    } else if ([@"scaleType" isEqualToString:name]) {
+        switch ([prop integerValue]) {
+            case 1: {
+                self.view.contentMode = UIViewContentModeScaleAspectFit;
+                break;
+            }
+            case 2: {
+                self.view.contentMode = UIViewContentModeScaleAspectFill;
+                break;
+            }
+            default: {
+                self.view.contentMode = UIViewContentModeScaleToFill;
+                break;
+            }
+        }
     } else {
         [super blendView:view forPropName:name propValue:prop];
     }

js-framework/src/ui/widgets.ts

@@ -42,11 +42,21 @@ export class Text extends View implements IText {
     textAlignment?: Gravity
 }
 
+export enum ScaleType {
+    ScaleToFill = 0,
+    ScaleAspectFit,
+    ScaleAspectFill,
+}
+
 export interface IImage extends IView {
     imageUrl?: string
+    scaleType?: ScaleType
 }
 
 export class Image extends View implements IImage {
     @Property
     imageUrl?: string
+
+    @Property
+    scaleType?: ScaleType
 }