英文:
Blend image over image with crossfade at bottom
问题
我有这个背景图 gradient
我有一张 artist
图像,我想将它叠加在上面,与背景图混合,底部应该交叉淡化到另一张图像。
左边是我想要的样子,右边是当前的样子:
缺少的是底部与背景 gradient
图像的交叉淡化效果。
这是我目前的代码:
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: Assets.package.gradient.provider(),
fit: BoxFit.cover,
),
),
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height -
MainAppBar.mainAppBarSize,
),
width: width,
child: Stack(
children: [
Positioned(
left: -increasePixels,
right: -increasePixels,
top: -increasePixels,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.3),
BlendMode.dstIn,
),
image: Assets.package.artist.provider(),
),
),
width: width + increasePixels * 2,
height: (width + increasePixels * 2) *
widget.imageAspectRatio,
),
),
],)
)
如何实现底部的交叉淡化效果?
英文:
I have this background image gradient
And I got an artist
image that I want to have above it as an overlay, blending into it and at the bottom it should cross fade into the other image.
Left is how I want it to look, right is how it looks right now:
So what is missing is the crossfade at the bottom into the background gradient
image.
This is my code for now:
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: Assets.package.gradient.provider(),
fit: BoxFit.cover,
),
),
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height -
MainAppBar.mainAppBarSize,
),
width: width,
child: Stack(
children: [
Positioned(
left: -increasePixels,
right: -increasePixels,
top: -increasePixels,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.3),
BlendMode.dstIn,
),
image: Assets.package.artist.provider(),
),
),
width: width + increasePixels * 2,
height: (width + increasePixels * 2) *
widget.imageAspectRatio,
),
),
],)
)
How can I do the crossfade?
答案1
得分: 1
感谢@pskink的评论,我弄清楚了。
我用以下方式包装了我的艺术家容器图像:
ShaderMask(
blendMode: BlendMode.dstIn,
shaderCallback: (Rect bounds) {
return const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [
0.7,
1,
],
tileMode: TileMode.mirror,
colors: [Colors.black, Colors.transparent],
).createShader(bounds);
},
child:
英文:
Thanks to the comment of @pskink I figured it out.
I wrapped my artist container image with this:
ShaderMask(
blendMode: BlendMode.dstIn,
shaderCallback: (Rect bounds) {
return const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [
0.7,
1,
],
tileMode: TileMode.mirror,
colors: [Colors.black, Colors.transparent],
).createShader(bounds);
},
child:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论