tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat:add ImageView scaleType

Browse Source
This commit is contained in:
pengfei.zhou 2019-11-20 15:36:07 +08:00
parent b9382a4659
commit 5eddc44eb1
9 changed files with 144 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
Android/doric/src/main/java/pub/doric/shader/ImageNode.java
View File

@ -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);
}

1
demo/index.ts
View File

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

4
demo/src/EffectsDemo.ts
View File

@ -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)
}
}

61
demo/src/ImageDemo.ts Normal file
View File

@ -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)
}
}

2
demo/src/SliderDemo.ts
View File

@ -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',

14
demo/src/colorutils.ts
View File

@ -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))

36
demo/src/utils.ts Normal file
View File

@ -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]
})
}

22
iOS/Pod/Classes/Shader/DoricImageNode.m
View File

@ -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];
}

10
js-framework/src/ui/widgets.ts
View File

@ -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
}