diff --git a/Android/doric/src/main/java/pub/doric/shader/ImageNode.java b/Android/doric/src/main/java/pub/doric/shader/ImageNode.java index 4c397afc..3d2ac126 100644 --- a/Android/doric/src/main/java/pub/doric/shader/ImageNode.java +++ b/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 { } }) .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); } diff --git a/demo/index.ts b/demo/index.ts index 432ed215..bd38e707 100644 --- a/demo/index.ts +++ b/demo/index.ts @@ -6,4 +6,5 @@ export default [ 'src/SliderDemo', 'src/LayoutDemo', 'src/EffectsDemo', + 'src/ImageDemo', ] \ No newline at end of file diff --git a/demo/src/EffectsDemo.ts b/demo/src/EffectsDemo.ts index 71780949..355a8350 100644 --- a/demo/src/EffectsDemo.ts +++ b/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) } } \ No newline at end of file diff --git a/demo/src/ImageDemo.ts b/demo/src/ImageDemo.ts new file mode 100644 index 00000000..ff3b3313 --- /dev/null +++ b/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) + } +} \ No newline at end of file diff --git a/demo/src/SliderDemo.ts b/demo/src/SliderDemo.ts index 65767eaa..09cb47db 100644 --- a/demo/src/SliderDemo.ts +++ b/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', diff --git a/demo/src/colorutils.ts b/demo/src/colorutils.ts deleted file mode 100644 index 093d46c3..00000000 --- a/demo/src/colorutils.ts +++ /dev/null @@ -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)) \ No newline at end of file diff --git a/demo/src/utils.ts b/demo/src/utils.ts new file mode 100644 index 00000000..29f77355 --- /dev/null +++ b/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] + }) +} \ No newline at end of file diff --git a/iOS/Pod/Classes/Shader/DoricImageNode.m b/iOS/Pod/Classes/Shader/DoricImageNode.m index 56b0d707..c2ec2a5b 100644 --- a/iOS/Pod/Classes/Shader/DoricImageNode.m +++ b/iOS/Pod/Classes/Shader/DoricImageNode.m @@ -21,21 +21,39 @@ // #import "DoricImageNode.h" +#import "Doric.h" #import @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]; } diff --git a/js-framework/src/ui/widgets.ts b/js-framework/src/ui/widgets.ts index 0bd815d6..008847c5 100644 --- a/js-framework/src/ui/widgets.ts +++ b/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 } \ No newline at end of file