image tileInset property support boolean value.
This commit is contained in:
吴尚昆
osborn
parent
3d4326ba7b
commit
22f290f6a9
BIN
doric-demo/assets/123.png
Normal file
BIN
doric-demo/assets/123.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
doric-demo/bundle/assets/123.png
Normal file
BIN
doric-demo/bundle/assets/123.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@ -24,17 +24,24 @@ class ImageDemo extends Panel {
|
||||
height: 50,
|
||||
}),
|
||||
|
||||
label('Button'),
|
||||
label("Button"),
|
||||
image({
|
||||
image: Environment.platform === 'Android'
|
||||
? new AndroidAssetsResource("assets/The_Parthenon_in_Athens.jpeg")
|
||||
: new MainBundleResource("assets/The_Parthenon_in_Athens.jpeg"),
|
||||
image:
|
||||
Environment.platform === "Android"
|
||||
? new AndroidAssetsResource(
|
||||
"assets/The_Parthenon_in_Athens.jpeg"
|
||||
)
|
||||
: new MainBundleResource(
|
||||
"assets/The_Parthenon_in_Athens.jpeg"
|
||||
),
|
||||
}),
|
||||
image({
|
||||
image: new AssetsResource("The_Parthenon_in_Athens.jpeg"),
|
||||
}),
|
||||
image({
|
||||
image: new RemoteResource("https://p.upyun.com/demo/webp/webp/jpg-0.webp"),
|
||||
image: new RemoteResource(
|
||||
"https://p.upyun.com/demo/webp/webp/jpg-0.webp"
|
||||
),
|
||||
}),
|
||||
image({
|
||||
image: new Base64Resource(img_base64[0]),
|
||||
@ -57,7 +64,7 @@ class ImageDemo extends Panel {
|
||||
left: 100,
|
||||
top: 0,
|
||||
right: 100,
|
||||
bottom: 0
|
||||
bottom: 0,
|
||||
},
|
||||
imageScale: 2.75,
|
||||
}),
|
||||
@ -74,40 +81,41 @@ class ImageDemo extends Panel {
|
||||
left: 100,
|
||||
top: 0,
|
||||
right: 100,
|
||||
bottom: 0
|
||||
bottom: 0,
|
||||
},
|
||||
imageScale: 2,
|
||||
|
||||
}),
|
||||
label('Gif '),
|
||||
label("Gif "),
|
||||
image({
|
||||
imageUrl: "https://www.w3.org/People/mimasa/test/imgformat/img/w3c_home_animation.gif",
|
||||
imageUrl:
|
||||
"https://www.w3.org/People/mimasa/test/imgformat/img/w3c_home_animation.gif",
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
imageScale: 3,
|
||||
}),
|
||||
label('APNG'),
|
||||
label("APNG"),
|
||||
image({
|
||||
imageUrl: "https://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png",
|
||||
imageUrl:
|
||||
"https://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png",
|
||||
}),
|
||||
label('Animated WebP'),
|
||||
label("Animated WebP"),
|
||||
image({
|
||||
imageUrl: "https://p.upyun.com/demo/webp/webp/animated-gif-0.webp",
|
||||
|
||||
imageUrl:
|
||||
"https://p.upyun.com/demo/webp/webp/animated-gif-0.webp",
|
||||
}),
|
||||
label('WebP'),
|
||||
imageView = image({
|
||||
label("WebP"),
|
||||
(imageView = image({
|
||||
imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp",
|
||||
layoutConfig: layoutConfig().just(),
|
||||
width: 200,
|
||||
height: 200,
|
||||
loadCallback: (ret) => {
|
||||
if (ret) {
|
||||
imageView.width = ret.width
|
||||
imageView.height = ret.height
|
||||
imageView.width = ret.width;
|
||||
imageView.height = ret.height;
|
||||
}
|
||||
}
|
||||
}),
|
||||
label('ScaleToFill'),
|
||||
},
|
||||
})),
|
||||
label("ScaleToFill"),
|
||||
image({
|
||||
imageUrl,
|
||||
width: 300,
|
||||
@ -119,10 +127,9 @@ class ImageDemo extends Panel {
|
||||
},
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
loadCallback: (ret) => {
|
||||
}
|
||||
loadCallback: (ret) => {},
|
||||
}),
|
||||
label('ScaleAspectFit'),
|
||||
label("ScaleAspectFit"),
|
||||
image({
|
||||
imageUrl,
|
||||
width: 300,
|
||||
@ -134,7 +141,7 @@ class ImageDemo extends Panel {
|
||||
scaleType: ScaleType.ScaleAspectFit,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
}),
|
||||
label('ScaleAspectFill'),
|
||||
label("ScaleAspectFill"),
|
||||
image({
|
||||
imageUrl,
|
||||
width: 300,
|
||||
@ -146,7 +153,7 @@ class ImageDemo extends Panel {
|
||||
scaleType: ScaleType.ScaleAspectFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
}),
|
||||
label('ImageBase64'),
|
||||
label("ImageBase64"),
|
||||
image({
|
||||
imageBase64: img_base64[0],
|
||||
width: 300,
|
||||
@ -158,7 +165,7 @@ class ImageDemo extends Panel {
|
||||
scaleType: ScaleType.ScaleAspectFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
}),
|
||||
label('StretchInset1'),
|
||||
label("StretchInset 1"),
|
||||
image({
|
||||
imageBase64: img_base64[1],
|
||||
height: 60,
|
||||
@ -176,11 +183,11 @@ class ImageDemo extends Panel {
|
||||
left: 0.85,
|
||||
top: 0,
|
||||
right: 0.149,
|
||||
bottom: 0
|
||||
}
|
||||
bottom: 0,
|
||||
},
|
||||
}),
|
||||
|
||||
label('StretchInset 2'),
|
||||
label("StretchInset 2"),
|
||||
image({
|
||||
image: new AssetsResource("coupon_bg2.png"),
|
||||
height: 48,
|
||||
@ -191,19 +198,19 @@ class ImageDemo extends Panel {
|
||||
image({
|
||||
image: new AssetsResource("coupon_bg2.png"),
|
||||
height: 48,
|
||||
width: 78*3,
|
||||
width: 78 * 3,
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
imageScale:1,
|
||||
imageScale: 1,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
stretchInset: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 76,
|
||||
bottom: 0
|
||||
}
|
||||
bottom: 0,
|
||||
},
|
||||
}),
|
||||
|
||||
label('tileInset'),
|
||||
label("tileInset 1"),
|
||||
image({
|
||||
image: new AssetsResource("dididi.png"),
|
||||
height: 78,
|
||||
@ -214,29 +221,52 @@ class ImageDemo extends Panel {
|
||||
}),
|
||||
image({
|
||||
image: new AssetsResource("dididi.png"),
|
||||
height: 78 * 1,
|
||||
height: 78,
|
||||
width: 84 * 3,
|
||||
imageScale:1,
|
||||
imageScale: 1,
|
||||
backgroundColor: Color.BLACK,
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
tileInset: {
|
||||
tileInset: true,
|
||||
}),
|
||||
|
||||
label("tileInset 2"),
|
||||
image({
|
||||
image: new AssetsResource("123.png"),
|
||||
height: 288 / 2,
|
||||
width: 154 / 2,
|
||||
scaleType: ScaleType.ScaleAspectFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
}),
|
||||
image({
|
||||
image: new AssetsResource("123.png"),
|
||||
height: 288,
|
||||
width: 154,
|
||||
imageScale: 2,
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
tileInset:
|
||||
Environment.platform === "Android"
|
||||
? true
|
||||
: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
top: 70,
|
||||
right: 0,
|
||||
bottom: 0
|
||||
}
|
||||
bottom: 0,
|
||||
},
|
||||
}),
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
|
||||
gravity: gravity().center(),
|
||||
space: 10,
|
||||
}),
|
||||
}
|
||||
),
|
||||
{
|
||||
layoutConfig: layoutConfig().most(),
|
||||
}
|
||||
).also(it => {
|
||||
)
|
||||
.also((it) => {
|
||||
coordinator(context).verticalScrolling({
|
||||
scrollable: it,
|
||||
scrollRange: {
|
||||
@ -248,8 +278,8 @@ class ImageDemo extends Panel {
|
||||
name: "backgroundColor",
|
||||
start: Color.WHITE,
|
||||
end: Color.RED,
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
coordinator(context).verticalScrolling({
|
||||
scrollable: it,
|
||||
scrollRange: {
|
||||
@ -261,9 +291,10 @@ class ImageDemo extends Panel {
|
||||
name: "width",
|
||||
start: 10,
|
||||
end: 200,
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
}).in(rootView)
|
||||
.in(rootView);
|
||||
}
|
||||
onDestroy() {
|
||||
modal(context).toast('onDestroy')
|
||||
|
||||
@ -564,7 +564,18 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
|
||||
} else if ([@"stretchInset" isEqualToString:name]) {
|
||||
self.stretchInsetDic = (NSDictionary *) prop;
|
||||
} else if ([@"tileInset" isEqualToString:name]) {
|
||||
if ([prop isKindOfClass:[NSNumber class]]) {
|
||||
NSInteger value = [prop intValue];
|
||||
if (value == 1) {
|
||||
self.tileInsetDic = @{@"left": @0, @"top": @0, @"right": @0, @"bottom": @0};
|
||||
} else {
|
||||
self.tileInsetDic = nil;
|
||||
}
|
||||
} else if ([prop isKindOfClass:[NSDictionary class]]) {
|
||||
self.tileInsetDic = (NSDictionary *) prop;
|
||||
} else {
|
||||
DoricLog(@"set tileInset error for View Type :%@, prop is %@", self.class, name);
|
||||
}
|
||||
} else if ([@"imageScale" isEqualToString:name]) {
|
||||
//Do not need set
|
||||
} else if ([@"onAnimationEnd" isEqualToString:name]) {
|
||||
|
||||
9
doric-js/index.d.ts
vendored
9
doric-js/index.d.ts
vendored
@ -702,12 +702,19 @@ declare module 'doric/lib/src/widget/image' {
|
||||
right: number;
|
||||
bottom: number;
|
||||
};
|
||||
/**
|
||||
* image tile
|
||||
*
|
||||
* If boolean value 'true' is passed, it equals { left: 0, top: 0, right: 0, bottom: 0 }
|
||||
* Android: only support all area tile, so you'd better pass boolean value.
|
||||
* iOS: support custom area tile, so you can pass object value and boolean value.
|
||||
*/
|
||||
tileInset?: {
|
||||
left: number;
|
||||
top: number;
|
||||
right: number;
|
||||
bottom: number;
|
||||
};
|
||||
} | boolean;
|
||||
/**
|
||||
* Called if loaded image is animated and played end.
|
||||
*/
|
||||
|
||||
9
doric-js/lib/src/widget/image.d.ts
vendored
9
doric-js/lib/src/widget/image.d.ts
vendored
@ -82,12 +82,19 @@ export declare class Image extends View {
|
||||
right: number;
|
||||
bottom: number;
|
||||
};
|
||||
/**
|
||||
* image tile
|
||||
*
|
||||
* If boolean value 'true' is passed, it equals { left: 0, top: 0, right: 0, bottom: 0 }
|
||||
* Android: only support all area tile, so you'd better pass boolean value.
|
||||
* iOS: support custom area tile, so you can pass object value and boolean value.
|
||||
*/
|
||||
tileInset?: {
|
||||
left: number;
|
||||
top: number;
|
||||
right: number;
|
||||
bottom: number;
|
||||
};
|
||||
} | boolean;
|
||||
/**
|
||||
* Called if loaded image is animated and played end.
|
||||
*/
|
||||
|
||||
@ -120,13 +120,20 @@ export class Image extends View {
|
||||
bottom: number
|
||||
}
|
||||
|
||||
/**
|
||||
* image tile
|
||||
*
|
||||
* If boolean value 'true' is passed, it equals { left: 0, top: 0, right: 0, bottom: 0 }
|
||||
* Android: only support all area tile, so you'd better pass boolean value.
|
||||
* iOS: support custom area tile, so you can pass object value and boolean value.
|
||||
*/
|
||||
@Property
|
||||
tileInset?: {
|
||||
left: number,
|
||||
top: number,
|
||||
right: number,
|
||||
bottom: number
|
||||
}
|
||||
} | boolean
|
||||
|
||||
/**
|
||||
* Called if loaded image is animated and played end.
|
||||
|
||||
Reference in New Issue
Block a user