demo: add fit start & end demo
This commit is contained in:
parent
18aba72fab
commit
3c736ace0e
@ -2,7 +2,8 @@ import { AssetsResource, AndroidAssetsResource, Base64Resource, DrawableResource
|
|||||||
import { colors, label } from "./utils";
|
import { colors, label } from "./utils";
|
||||||
import { img_base64 } from "./image_base64";
|
import { img_base64 } from "./image_base64";
|
||||||
|
|
||||||
const imageUrl = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1112%2F12101P11147%2F1Q210011147-3.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662787633&t=99942c90360f55bbcfe00fa140d1c1df'
|
const landscapeImageUrl = 'https://www.adorama.com/alc/wp-content/uploads/2018/11/landscape-photography-tips-yosemite-valley-feature.jpg'
|
||||||
|
const portraitImageUrl = 'https://i0.wp.com/digital-photography-school.com/wp-content/uploads/2018/05/portrait-lighting-landscape-photography-dps-4.jpg?w=500&ssl=1'
|
||||||
|
|
||||||
import logo from "./images/logo_w.png"
|
import logo from "./images/logo_w.png"
|
||||||
import button from "./images/button.png"
|
import button from "./images/button.png"
|
||||||
@ -115,9 +116,9 @@ class ImageDemo extends Panel {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
})),
|
})),
|
||||||
label("ScaleToFill"),
|
label("Blur"),
|
||||||
image({
|
image({
|
||||||
imageUrl,
|
imageUrl: landscapeImageUrl,
|
||||||
width: 300,
|
width: 300,
|
||||||
height: 300,
|
height: 300,
|
||||||
isBlur: true,
|
isBlur: true,
|
||||||
@ -129,9 +130,22 @@ class ImageDemo extends Panel {
|
|||||||
layoutConfig: layoutConfig().just(),
|
layoutConfig: layoutConfig().just(),
|
||||||
loadCallback: (ret) => { },
|
loadCallback: (ret) => { },
|
||||||
}),
|
}),
|
||||||
|
label("ScaleToFill"),
|
||||||
|
image({
|
||||||
|
imageUrl: landscapeImageUrl,
|
||||||
|
width: 300,
|
||||||
|
height: 300,
|
||||||
|
border: {
|
||||||
|
width: 2,
|
||||||
|
color: Color.GRAY,
|
||||||
|
},
|
||||||
|
scaleType: ScaleType.ScaleToFill,
|
||||||
|
layoutConfig: layoutConfig().just(),
|
||||||
|
loadCallback: (ret) => { },
|
||||||
|
}),
|
||||||
label("ScaleAspectFit"),
|
label("ScaleAspectFit"),
|
||||||
image({
|
image({
|
||||||
imageUrl,
|
imageUrl: landscapeImageUrl,
|
||||||
width: 300,
|
width: 300,
|
||||||
height: 300,
|
height: 300,
|
||||||
border: {
|
border: {
|
||||||
@ -143,7 +157,7 @@ class ImageDemo extends Panel {
|
|||||||
}),
|
}),
|
||||||
label("ScaleAspectFill"),
|
label("ScaleAspectFill"),
|
||||||
image({
|
image({
|
||||||
imageUrl,
|
imageUrl: landscapeImageUrl,
|
||||||
width: 300,
|
width: 300,
|
||||||
height: 300,
|
height: 300,
|
||||||
border: {
|
border: {
|
||||||
@ -153,6 +167,52 @@ class ImageDemo extends Panel {
|
|||||||
scaleType: ScaleType.ScaleAspectFill,
|
scaleType: ScaleType.ScaleAspectFill,
|
||||||
layoutConfig: layoutConfig().just(),
|
layoutConfig: layoutConfig().just(),
|
||||||
}),
|
}),
|
||||||
|
label("ScaleAspectFitStart"),
|
||||||
|
image({
|
||||||
|
imageUrl: landscapeImageUrl,
|
||||||
|
width: 300,
|
||||||
|
height: 300,
|
||||||
|
border: {
|
||||||
|
width: 2,
|
||||||
|
color: Color.GRAY,
|
||||||
|
},
|
||||||
|
scaleType: ScaleType.ScaleAspectFitStart,
|
||||||
|
layoutConfig: layoutConfig().just(),
|
||||||
|
}),
|
||||||
|
image({
|
||||||
|
imageUrl: portraitImageUrl,
|
||||||
|
width: 300,
|
||||||
|
height: 300,
|
||||||
|
border: {
|
||||||
|
width: 2,
|
||||||
|
color: Color.GRAY,
|
||||||
|
},
|
||||||
|
scaleType: ScaleType.ScaleAspectFitStart,
|
||||||
|
layoutConfig: layoutConfig().just(),
|
||||||
|
}),
|
||||||
|
label("ScaleAspectFitEnd"),
|
||||||
|
image({
|
||||||
|
imageUrl: landscapeImageUrl,
|
||||||
|
width: 300,
|
||||||
|
height: 300,
|
||||||
|
border: {
|
||||||
|
width: 2,
|
||||||
|
color: Color.GRAY,
|
||||||
|
},
|
||||||
|
scaleType: ScaleType.ScaleAspectFitEnd,
|
||||||
|
layoutConfig: layoutConfig().just(),
|
||||||
|
}),
|
||||||
|
image({
|
||||||
|
imageUrl: portraitImageUrl,
|
||||||
|
width: 300,
|
||||||
|
height: 300,
|
||||||
|
border: {
|
||||||
|
width: 2,
|
||||||
|
color: Color.GRAY,
|
||||||
|
},
|
||||||
|
scaleType: ScaleType.ScaleAspectFitEnd,
|
||||||
|
layoutConfig: layoutConfig().just(),
|
||||||
|
}),
|
||||||
label("ImageBase64"),
|
label("ImageBase64"),
|
||||||
image({
|
image({
|
||||||
imageBase64: img_base64[0],
|
imageBase64: img_base64[0],
|
||||||
|
Reference in New Issue
Block a user