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

image tileInset property support boolean value.

Browse Source
This commit is contained in:
吴尚昆 2022-03-18 17:05:32 +08:00 committed by osborn
parent 3d4326ba7b
commit 22f290f6a9
7 changed files with 311 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
doric-demo/assets/123.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
doric-demo/bundle/assets/123.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

519
doric-demo/src/ImageDemo.ts
View File

@ -12,258 +12,289 @@ class ImageDemo extends Panel {
build(rootView: Group): void { build(rootView: Group): void {
let imageView: Image let imageView: Image
scroller( scroller(
vlayout( vlayout(
[ [
text({ text({
text: "Image Demo", text: "Image Demo",
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
backgroundColor: colors[5], backgroundColor: colors[5],
textAlignment: gravity().center(), textAlignment: gravity().center(),
height: 50, height: 50,
}), }),
label('Button'), label("Button"),
image({ image({
image: Environment.platform === 'Android' image:
? new AndroidAssetsResource("assets/The_Parthenon_in_Athens.jpeg") Environment.platform === "Android"
: new MainBundleResource("assets/The_Parthenon_in_Athens.jpeg"), ? new AndroidAssetsResource(
}), "assets/The_Parthenon_in_Athens.jpeg"
image({ )
image: new AssetsResource("The_Parthenon_in_Athens.jpeg"), : new MainBundleResource(
}), "assets/The_Parthenon_in_Athens.jpeg"
image({ ),
image: new RemoteResource("https://p.upyun.com/demo/webp/webp/jpg-0.webp"), }),
}), image({
image({ image: new AssetsResource("The_Parthenon_in_Athens.jpeg"),
image: new Base64Resource(img_base64[0]), }),
scaleType: ScaleType.ScaleToFill, image({
layoutConfig: { image: new RemoteResource(
widthSpec: LayoutSpec.FIT, "https://p.upyun.com/demo/webp/webp/jpg-0.webp"
heightSpec: LayoutSpec.FIT, ),
}, }),
}), image({
image({ image: new Base64Resource(img_base64[0]),
imageBase64: button, scaleType: ScaleType.ScaleToFill,
scaleType: ScaleType.ScaleToFill, layoutConfig: {
layoutConfig: { widthSpec: LayoutSpec.FIT,
widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.JUST, },
}, }),
width: 200, image({
height: 150 / 2.75, imageBase64: button,
stretchInset: { scaleType: ScaleType.ScaleToFill,
left: 100, layoutConfig: {
top: 0, widthSpec: LayoutSpec.JUST,
right: 100, heightSpec: LayoutSpec.JUST,
bottom: 0 },
}, width: 200,
imageScale: 2.75, height: 150 / 2.75,
}), stretchInset: {
image({ left: 100,
imageBase64: button, top: 0,
scaleType: ScaleType.ScaleToFill, right: 100,
layoutConfig: { bottom: 0,
widthSpec: LayoutSpec.JUST, },
heightSpec: LayoutSpec.JUST, imageScale: 2.75,
}, }),
width: 200, image({
height: 75, imageBase64: button,
stretchInset: { scaleType: ScaleType.ScaleToFill,
left: 100, layoutConfig: {
top: 0, widthSpec: LayoutSpec.JUST,
right: 100, heightSpec: LayoutSpec.JUST,
bottom: 0 },
}, width: 200,
imageScale: 2, height: 75,
stretchInset: {
left: 100,
top: 0,
right: 100,
bottom: 0,
},
imageScale: 2,
}),
label("Gif "),
image({
imageUrl:
"https://www.w3.org/People/mimasa/test/imgformat/img/w3c_home_animation.gif",
scaleType: ScaleType.ScaleToFill,
imageScale: 3,
}),
label("APNG"),
image({
imageUrl:
"https://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png",
}),
label("Animated WebP"),
image({
imageUrl:
"https://p.upyun.com/demo/webp/webp/animated-gif-0.webp",
}),
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;
}
},
})),
label("ScaleToFill"),
image({
imageUrl,
width: 300,
height: 300,
isBlur: true,
border: {
width: 2,
color: Color.GRAY,
},
scaleType: ScaleType.ScaleToFill,
layoutConfig: layoutConfig().just(),
loadCallback: (ret) => {},
}),
label("ScaleAspectFit"),
image({
imageUrl,
width: 300,
height: 300,
border: {
width: 2,
color: Color.GRAY,
},
scaleType: ScaleType.ScaleAspectFit,
layoutConfig: layoutConfig().just(),
}),
label("ScaleAspectFill"),
image({
imageUrl,
width: 300,
height: 300,
border: {
width: 2,
color: Color.GRAY,
},
scaleType: ScaleType.ScaleAspectFill,
layoutConfig: layoutConfig().just(),
}),
label("ImageBase64"),
image({
imageBase64: img_base64[0],
width: 300,
height: 300,
border: {
width: 2,
color: Color.GRAY,
},
scaleType: ScaleType.ScaleAspectFill,
layoutConfig: layoutConfig().just(),
}),
label("StretchInset 1"),
image({
imageBase64: img_base64[1],
height: 60,
width: 134,
scaleType: ScaleType.ScaleAspectFill,
layoutConfig: layoutConfig().just(),
}),
image({
imageBase64: img_base64[1],
height: 60,
width: 294,
scaleType: ScaleType.ScaleToFill,
layoutConfig: layoutConfig().just(),
stretchInset: {
left: 0.85,
top: 0,
right: 0.149,
bottom: 0,
},
}),
}), label("StretchInset 2"),
label('Gif '), image({
image({ image: new AssetsResource("coupon_bg2.png"),
imageUrl: "https://www.w3.org/People/mimasa/test/imgformat/img/w3c_home_animation.gif", height: 48,
scaleType: ScaleType.ScaleToFill, width: 78,
imageScale: 3, scaleType: ScaleType.ScaleAspectFill,
}), layoutConfig: layoutConfig().just(),
label('APNG'), }),
image({ image({
imageUrl: "https://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png", image: new AssetsResource("coupon_bg2.png"),
}), height: 48,
label('Animated WebP'), width: 78 * 3,
image({ scaleType: ScaleType.ScaleToFill,
imageUrl: "https://p.upyun.com/demo/webp/webp/animated-gif-0.webp", imageScale: 1,
layoutConfig: layoutConfig().just(),
stretchInset: {
left: 0,
top: 0,
right: 76,
bottom: 0,
},
}),
}), label("tileInset 1"),
label('WebP'), image({
imageView = image({ image: new AssetsResource("dididi.png"),
imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp", height: 78,
layoutConfig: layoutConfig().just(), width: 84,
width: 200, backgroundColor: Color.BLACK,
height: 200, scaleType: ScaleType.ScaleAspectFill,
loadCallback: (ret) => { layoutConfig: layoutConfig().just(),
if (ret) { }),
imageView.width = ret.width image({
imageView.height = ret.height image: new AssetsResource("dididi.png"),
} height: 78,
} width: 84 * 3,
}), imageScale: 1,
label('ScaleToFill'), backgroundColor: Color.BLACK,
image({ scaleType: ScaleType.ScaleToFill,
imageUrl, layoutConfig: layoutConfig().just(),
width: 300, tileInset: true,
height: 300, }),
isBlur: true,
border: {
width: 2,
color: Color.GRAY,
},
scaleType: ScaleType.ScaleToFill,
layoutConfig: layoutConfig().just(),
loadCallback: (ret) => {
}
}),
label('ScaleAspectFit'),
image({
imageUrl,
width: 300,
height: 300,
border: {
width: 2,
color: Color.GRAY,
},
scaleType: ScaleType.ScaleAspectFit,
layoutConfig: layoutConfig().just(),
}),
label('ScaleAspectFill'),
image({
imageUrl,
width: 300,
height: 300,
border: {
width: 2,
color: Color.GRAY,
},
scaleType: ScaleType.ScaleAspectFill,
layoutConfig: layoutConfig().just(),
}),
label('ImageBase64'),
image({
imageBase64: img_base64[0],
width: 300,
height: 300,
border: {
width: 2,
color: Color.GRAY,
},
scaleType: ScaleType.ScaleAspectFill,
layoutConfig: layoutConfig().just(),
}),
label('StretchInset1'),
image({
imageBase64: img_base64[1],
height: 60,
width: 134,
scaleType: ScaleType.ScaleAspectFill,
layoutConfig: layoutConfig().just(),
}),
image({
imageBase64: img_base64[1],
height: 60,
width: 294,
scaleType: ScaleType.ScaleToFill,
layoutConfig: layoutConfig().just(),
stretchInset: {
left: 0.85,
top: 0,
right: 0.149,
bottom: 0
}
}),
label('StretchInset 2'), label("tileInset 2"),
image({ image({
image: new AssetsResource("coupon_bg2.png"), image: new AssetsResource("123.png"),
height: 48, height: 288 / 2,
width: 78, width: 154 / 2,
scaleType: ScaleType.ScaleAspectFill, scaleType: ScaleType.ScaleAspectFill,
layoutConfig: layoutConfig().just(), layoutConfig: layoutConfig().just(),
}), }),
image({ image({
image: new AssetsResource("coupon_bg2.png"), image: new AssetsResource("123.png"),
height: 48, height: 288,
width: 78*3, width: 154,
scaleType: ScaleType.ScaleToFill, imageScale: 2,
imageScale:1, scaleType: ScaleType.ScaleToFill,
layoutConfig: layoutConfig().just(), layoutConfig: layoutConfig().just(),
stretchInset: { tileInset:
left: 0, Environment.platform === "Android"
top: 0, ? true
right: 76, : {
bottom: 0 left: 0,
} top: 70,
}), right: 0,
bottom: 0,
label('tileInset'), },
image({ }),
image: new AssetsResource("dididi.png"), ],
height: 78,
width: 84,
backgroundColor: Color.BLACK,
scaleType: ScaleType.ScaleAspectFill,
layoutConfig: layoutConfig().just(),
}),
image({
image: new AssetsResource("dididi.png"),
height: 78 * 1,
width: 84 * 3,
imageScale:1,
backgroundColor: Color.BLACK,
scaleType: ScaleType.ScaleToFill,
layoutConfig: layoutConfig().just(),
tileInset: {
left: 0,
top: 0,
right: 0,
bottom: 0
}
}),
],
{
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(),
space: 10,
}),
{ {
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(),
space: 10,
} }
).also(it => { ),
{
layoutConfig: layoutConfig().most(),
}
)
.also((it) => {
coordinator(context).verticalScrolling({ coordinator(context).verticalScrolling({
scrollable: it, scrollable: it,
scrollRange: { scrollRange: {
start: 0, start: 0,
end: 100, end: 100,
}, },
target: "NavBar", target: "NavBar",
changing: { changing: {
name: "backgroundColor", name: "backgroundColor",
start: Color.WHITE, start: Color.WHITE,
end: Color.RED, end: Color.RED,
} },
}) });
coordinator(context).verticalScrolling({ coordinator(context).verticalScrolling({
scrollable: it, scrollable: it,
scrollRange: { scrollRange: {
start: 0, start: 0,
end: 100, end: 100,
}, },
target: imageView, target: imageView,
changing: { changing: {
name: "width", name: "width",
start: 10, start: 10,
end: 200, end: 200,
} },
}) });
}).in(rootView) })
.in(rootView);
} }
onDestroy() { onDestroy() {
modal(context).toast('onDestroy') modal(context).toast('onDestroy')

13
doric-iOS/Pod/Classes/Shader/DoricImageNode.m
View File

@ -564,7 +564,18 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
} else if ([@"stretchInset" isEqualToString:name]) { } else if ([@"stretchInset" isEqualToString:name]) {
self.stretchInsetDic = (NSDictionary *) prop; self.stretchInsetDic = (NSDictionary *) prop;
} else if ([@"tileInset" isEqualToString:name]) { } else if ([@"tileInset" isEqualToString:name]) {
self.tileInsetDic = (NSDictionary *) prop; 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]) { } else if ([@"imageScale" isEqualToString:name]) {
//Do not need set //Do not need set
} else if ([@"onAnimationEnd" isEqualToString:name]) { } else if ([@"onAnimationEnd" isEqualToString:name]) {

9
doric-js/index.d.ts vendored
View File

@ -702,12 +702,19 @@ declare module 'doric/lib/src/widget/image' {
right: number; right: number;
bottom: 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?: { tileInset?: {
left: number; left: number;
top: number; top: number;
right: number; right: number;
bottom: number; bottom: number;
}; } | boolean;
/** /**
* Called if loaded image is animated and played end. * Called if loaded image is animated and played end.
*/ */

9
doric-js/lib/src/widget/image.d.ts vendored
View File

@ -82,12 +82,19 @@ export declare class Image extends View {
right: number; right: number;
bottom: 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?: { tileInset?: {
left: number; left: number;
top: number; top: number;
right: number; right: number;
bottom: number; bottom: number;
}; } | boolean;
/** /**
* Called if loaded image is animated and played end. * Called if loaded image is animated and played end.
*/ */

9
doric-js/src/widget/image.ts
View File

@ -120,13 +120,20 @@ export class Image extends View {
bottom: 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.
*/
@Property @Property
tileInset?: { tileInset?: {
left: number, left: number,
top: number, top: number,
right: number, right: number,
bottom: number bottom: number
} } | boolean
/** /**
* Called if loaded image is animated and played end. * Called if loaded image is animated and played end.