- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
很多时候,我们需要一些特效功能,比如给图片做个滤镜什么的,如果是h5页面,那么我们可以很容易的通过css滤镜来实现这个功能.
那么如果在flutter中,如果要实现这样的滤镜功能应该怎么处理呢?一起来看看吧.
在继续进行之前,我们先来讨论下本章到底要做什么。最终的目标是希望能够实现一个图片的滤镜功能.
那么我们的app界面实际上可以分为两个部分。第一个部分就是带滤镜效果的图片,第二个部分就是可以切换的滤镜按钮.
接下来我们一步步来看如何实现这些功能.
要实现这个功能其实比较简单,我们构建一个widget,因为这个widget中的图片需要根据自身选择的滤镜颜色来改变图片的状态,所以这里我们需要的是一个StatefulWidget,在state里面,存储的就是当前的_filterColor.
构建一个图片的widget的代码可以如下所示:
class ImageFilterApp extends StatefulWidget {
const ImageFilterApp({super.key});
@override
State<ImageFilterApp> createState() =>
_ImageFilterAppState();
}
class _ImageFilterAppState
extends State<ImageFilterApp> {
final _filters = [
Colors.white,
...Colors.primaries
];
final _filterColor = ValueNotifier<Color>(Colors.white);
void _onFilterChanged(Color value) {
_filterColor.value = value;
}
@override
Widget build(BuildContext context) {
return Material(
color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: _buildPhotoWithFilter(),
),
],
),
);
}
Widget _buildPhotoWithFilter() {
return ValueListenableBuilder(
valueListenable: _filterColor,
builder: (context, value, child) {
final color = value;
return Image.asset(
'images/head.jpg',
color: color.withOpacity(0.5),
colorBlendMode: BlendMode.color,
fit: BoxFit.cover,
);
},
);
}
}
在build方法中,我们返回了一个Positioned.fill填充的widget,这个widget可以把app的视图填满.
在_buildPhotoWithFilter方法中,我们返回了Image.asset,里面可以设置image的color和colorBlendMode。这两个值就是图片滤镜的关键.
就这么简单?一个图片滤镜就完成了?对的就是这么简单。图片滤镜就是Image.asset中自带的功能.
但是在实际的应用中,这个color不会是固定的,是需要根据我们的不同选择而进行变化的。为了能够接受到这个变化的值,我们使用了ValueListenableBuilder,通过传入一个可变的ValueNotifier,来实现监听color变化的结果.
final _filterColor = ValueNotifier<Color>(Colors.white);
void _onFilterChanged(Color value) {
_filterColor.value = value;
}
另外,我们提供了一个触发_filterColor的值进行变化的方法_onFilterChanged.
上面的代码运行的结果如下:
很好,现在我们已经有了一个带有颜色filter功能的界面了。 接下来我们还需要一个filter的按钮,来触发filter颜色的变化.
这里我们的filter包含了Colors.primaries中所有的颜色再加上一个自定义的白色.
每一个filter按钮其实都可以用一个widget来表示。我们希望是一个圆形的filter按钮,里面有一个图片的小的缩略图来展示filter的效果.
另外通过tap对应的filter按钮,还可以实现color切换的功能.
所以对于Filter按钮widget来说,可以接收两个参数,一个是当前的color,另外一个是tap之后的VoidCallback onFilterSelected, 所以最终我们的FilterItem是下面的样子的:
class FilterItem extends StatelessWidget {
const FilterItem({
super.key,
required this.color,
this.onFilterSelected,
});
final Color color;
final VoidCallback? onFilterSelected;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onFilterSelected,
child: AspectRatio(
aspectRatio: 1.0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ClipOval(
child: Image.asset(
'images/head.jpg',
color: color.withOpacity(0.5),
colorBlendMode: BlendMode.hardLight,
),
),
),
),
);
}
上一节我们创建好了filter按钮,接下来就是把filter按钮组装起来,形成一个可滑动的filter按钮组件.
要想滑动widget,我们可以使用Scrollable组件,通过传入一个PageController来控制PageView的展示.
Scrollable出了controller之外,还有一个非常重要的属性就是viewportBuilder。在viewportBuilder中可以传入viewportOffset.
当Scrollable滑动的时候,viewportOffset中的pixels是会动态变化的。我们可以根据viewportOffset中的pixels的变化来重绘filter按钮.
如果要根据viewportOffset的变化来重新定位child组件的位置的话,最好的方式就是将其包裹在Flow组件中.
因为Flow提供了一个FlowDelegate,我们可以在FlowDelegate中根据viewportOffset的不同来重绘filter widget。这个FlowDelegate的实现如下:
class CarouselFlowDelegate extends FlowDelegate {
CarouselFlowDelegate({
required this.viewportOffset,
required this.filtersPerScreen,
}) : super(repaint: viewportOffset);
final ViewportOffset viewportOffset;
final int filtersPerScreen;
@override
void paintChildren(FlowPaintingContext context) {
print(viewportOffset.pixels);
final count = context.childCount;
//绘制宽度
final size = context.size.width;
// 一个单独item的宽度
final itemExtent = size / filtersPerScreen;
// active item的index
final active = viewportOffset.pixels / itemExtent;
print('active$active');
// 要绘制的最小的index,在active item的左边最多绘制3个items
final min = math.max(0, active.floor() - 3).toInt();
//要绘制的最大index,在active item的右边最多绘制3个items
final max = math.min(count - 1, active.ceil() + 3).toInt();
// 重新绘制要展示的item
for (var index = min; index <= max; index++) {
final itemXFromCenter = itemExtent * index - viewportOffset.pixels;
final percentFromCenter = 1.0 - (itemXFromCenter / (size / 2)).abs();
final itemScale = 0.5 + (percentFromCenter * 0.5);
final opacity = 0.25 + (percentFromCenter * 0.75);
final itemTransform = Matrix4.identity()
..translate((size - itemExtent) / 2)
..translate(itemXFromCenter)
..translate(itemExtent / 2, itemExtent / 2)
..multiply(Matrix4.diagonal3Values(itemScale, itemScale, 1.0))
..translate(-itemExtent / 2, -itemExtent / 2);
context.paintChild(
index,
transform: itemTransform,
opacity: opacity,
);
}
}
@override
bool shouldRepaint(covariant CarouselFlowDelegate oldDelegate) {
//viewportOffset被替换的情况下触发
return oldDelegate.viewportOffset != viewportOffset;
}
}
在paintChildren的最后,我们通过调用context.paintChild来重绘child.
可以看到这里传入了三个参数,第一个参数是child的index,这个index指的是创建Flow时候传入的children数组中的index:
Flow(
delegate: CarouselFlowDelegate(
viewportOffset: viewportOffset,
filtersPerScreen: _filtersPerScreen,
),
children: [
for (int i = 0; i < filterCount; i++)
FilterItem(
onFilterSelected: () => _onFilterTapped(i),
color: itemColor(i),
),
],
)
最后,我们把创建Flow的方法_buildCarousel放到Scrollable中去,并将viewportOffset作为Flow的构造函数参数传入,从而实现Flow根据Scrollable的滑动而发送相应的变化:
Widget build(BuildContext context) {
return Scrollable(
controller: _controller,
axisDirection: AxisDirection.right,
physics: const PageScrollPhysics(),
viewportBuilder: (context, viewportOffset) {
return LayoutBuilder(
builder: (context, constraints) {
final itemSize = constraints.maxWidth * _viewportFractionPerItem;
viewportOffset
..applyViewportDimension(constraints.maxWidth)
..applyContentDimensions(0.0, itemSize * (filterCount - 1));
return Stack(
alignment: Alignment.bottomCenter,
children: [
_buildCarousel(
viewportOffset: viewportOffset,
itemSize: itemSize,
),
],
);
},
);
},
);
到目前为止,一切看起来都很好。但是如果你仔细研究的话可能会产生一个疑问。那就是Scrollable的controller是PageController,我们是通过PageController中的page来切换对应的filter颜色的:
void _onPageChanged() {
print('page${_controller.page}');
final page = (_controller.page ?? 0).round();
if (page != _page) {
_page = page;
widget.onFilterChanged(widget.filters[page]);
}
}
那么这个page是如何变化的呢?什么时候从0变成1呢?
我们先来看下PageController的构造函数:
_controller = PageController(
initialPage: _page,
viewportFraction: _viewportFractionPerItem,
);
除了初始化的initialPage之外,还有一个viewportFraction。这个值就是指一个view可以被分成多少个page.
以我的iphone14为例,它的constraints.maxWidth=390.0, 如果被分成5份的话,一份的值是78.0。 也就是说当Scrollable滑动78,的时候,page就从0变成1了。这和我们在Flow中重绘child时候,取的index是一致的.
最后,效果图如下:
本文的例子: https://github.com/ddean2009/learn-flutter.git 。
最后此篇关于flutter系列之:做一个图像滤镜的文章就讲到这里了,如果你想了解更多关于flutter系列之:做一个图像滤镜的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我正在使用 Inkscape 0.91。我想使用 Filters -> ABC 的 Noise Transparency 效果,但此较高版本的 Inkscape 中不存在该效果。我在网上看到,在更高的
SVG 滤镜 可以给 SVG 图形的添加特殊效果 SVG 滤镜 SVG有很多的滤镜,但本教程只会展示其中的两三种,其他的需要你可以依葫芦画瓢的使用 我们只需要记住 SVG 能提供什么样的滤镜,然
前言 本文主要给大家介绍了关于ios图片压缩、滤镜、剪切及渲染的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 主要内容: 1、图片基础知识的介绍 2、图片压缩
我想使用 VP8 在我的应用程序中编码视频。我在我的应用程序中使用 RGB24 格式,但 VP8 DirectShow 过滤器只接受 YUV 格式 (http://www.webmproject.or
我想要一个带有白色外发光的黑色文本,以便在彩色 map 上可读。这就是我以前所做的: Harald's Repose Harald's Repose 我想避免重复文本元素,因
如果我使用 camanJS 在图像上应用滤镜,一切都很好,但是当我单击第二个滤镜时,它需要返回到原始图像并将其应用到该图像上,但目前它将第二个滤镜放在仍具有第一个滤镜的图像。 这是我的 html 部分
我有 3 个 System.Drawing.Bitmap 对象。 RGB 前景、RGB 背景和每像素蒙版图像一个字节,其中 0 表示采用背景像素,1 表示采用前景像素。这三个都是相同的维度。 我选择使
谁能确认 Android BlurMaskFilter方法基于高斯模糊(而不是平均模糊)?我真的很惊讶这里的文档并不明确。 最佳答案 引用代码here ,我可以假设它是基于高斯模糊方法。 我完全同意您
本质上,我正在尝试使用 SVG 和 CSS ( like this ) 创建一个渐变 alpha 蒙版,因为 mask 属性是 no longer on the standards跟踪我正在探索 fi
我正在使用CSSGram在我的网站上使图像具有类似 Instagram 的滤镜。下面是向图像添加滤镜的方法: 如何将这种效果添加到网页中的所有图像,而不是使用 在每个图像之前,以及许多图像
我有一组带有背景图像的元素,这些元素上有一个 SVG 滤镜,使背景图像变灰。我需要它,以便当您将鼠标悬停在该元素上时,该 SVG 滤镜会淡化为透明,因此原始彩色图像会在没有滤镜的情况下显示。不幸的是,
如何访问 OpenCV 扩展图像处理模块?我特别需要一个过滤器:fastGlobalSmootherFilter。 我已将 OpenCV 3.2.0 合并到我的 C++ 项目中。我正在寻找这种方法:
看看下面的 CodePen 演示:http://codepen.io/anon/pen/vLPGpZ 这是我的代码: body { position: absolute; top:
请建议我如何在 Android 相机的运行时应用照片效果/滤镜?无需使用 JNI 、 OpenGl 和 open CV 。我只需要通过 Java 代码应用效果。 最佳答案 步骤 1. 将帧从 NV21
我正在尝试沿着特定路径在 Opengl 中渲染点 Sprite 。我将 Sprite 定义为 2D 纹理,并将其设置为使用 GL_NEAREST 作为 mag/min 过滤器。我还定义了一个包含一些
我想实现这样的目标: 此图片来自this应用程序。 我的问题是,我应该依赖像 this 这样的东西吗? ,自己做,或者即使有其他一些我不知道的第三个库,也可以推荐。 我试图获得更多的意见,而不是实际的
我使用 Pixastic 来更改 Canvas 上图像的亮度和对比度等简单效果。 但是,我一直没能找到将这些效果一起应用的方法。例如。应用亮度然后在这个已经变亮的图像上应用对比度,而不是原始图像。 使
我在使用 Core image 时遇到了问题。我正在做的是从 UIImageView 获取图像,然后使用我在教程中找到的一些代码(我是核心图像的新手)但是我想在我尝试时将棕褐色图像放回同一个 UIIm
我这里有一张图片: 我想在网站 theverge.com 中复制 css 样式(见下图) 我将在我的博客(主页)中使用它,因为我正在尝试复制 theverge.com 网站的内容。这就像在半透明渐变和
我想使用聚光灯效果,但它似乎只在 Chrome 中有效,在 Firefox 中看起来“刚刚好”,但在 Safari 中无法定位 (x,y,z)。 (其他浏览器未测试) 我尝试了不同的滤镜和原始单位,虽
我是一名优秀的程序员,十分优秀!