在底部交叉淡入淡出地混合图像。

huangapple go评论63阅读模式
英文:

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:

huangapple
  • 本文由 发表于 2023年7月11日 02:01:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/76656236.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定