返回顶部
首页 > 资讯 > 移动开发 >Flutter实现图片滤镜效果
  • 830
分享到

Flutter实现图片滤镜效果

2024-04-02 19:04:59 830人浏览 薄情痞子
摘要

目录ColorFilter 介绍选取图片布局本着学习的态度,研究了一下Flutter里面的ColorFilter,字面意思翻译颜色过滤器,学习就是要举一反三,拓展思考就把这个功能做了

本着学习的态度,研究了一下Flutter里面的ColorFilter,字面意思翻译颜色过滤器,学习就是要举一反三,拓展思考就把这个功能做了一个简单的图片滤镜效果。(ps:图片有点没控制住,有点长) 效果如下:

ColorFilter 介绍

两种使用方式


const ColorFilter.mode(Color color, BlendMode blendMode)
const ColorFilter.matrix(List<double> matrix)

实现效果主要通过第一种方式, 首先创建一个MorningPainter类继承CustomPainter, 定义三个传入的变量


ui.Image img;
Color color;
String mode;
MorningPainter(this.img, this.color, this.mode);

@override
void paint(canvas canvas, Size size) {
  var paint = Paint();
  if (color != Colors.white) {
   BlendMode blendMode = BlendMode.clear;
   switch (mode) {
    case 'modulate':
     blendMode = BlendMode.modulate;
     break;
    case 'difference':
     blendMode = BlendMode.difference;
     break;
    case 'plus':
     blendMode = BlendMode.plus;
     break;
    case 'lighten':
     blendMode = BlendMode.lighten;
     break;
    default:
   }
   paint.colorFilter = ColorFilter.mode(color, blendMode);
  }
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;

选取图片

使用wechat_assets_picker进行图片的选择,选择之后进行转换


CustomPaint(
 size: Size(_img.width.toDouble(), _img.height.toDouble()),
 painter: MorningPainter(_img, currentColor, mode),
)

布局

最下方的颜色选择和模式选择,这个没什么可说的,使用简单的SingleChildScrollView配合Row使用就可以了。贴出其中一段代码


SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
       mainAxisAlignment: MainAxisAlignment.center,
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
        renderItem(Colors.yellow, '黄色'),
        renderItem(Colors.red, '红色'),
        renderItem(Colors.blue, '蓝色'),
        renderItem(Colors.pink, '粉色'),
        renderItem(Colors.orange, '橙色'),
        renderItem(Colors.brown, '棕色'),
        renderItem(Colors.grey, '灰色'),
       ],
      ),
     ),

最后的思考,学习是一件很有趣的事情, 特别是将所学到的知识运用起来,成就感很强烈。

以上就是Flutter实现图片滤镜效果的详细内容,更多关于Flutter 图片滤镜的资料请关注编程网其它相关文章!

--结束END--

本文标题: Flutter实现图片滤镜效果

本文链接: https://lsjlt.com/news/122722.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Flutter实现图片滤镜效果
    目录ColorFilter 介绍选取图片布局本着学习的态度,研究了一下flutter里面的ColorFilter,字面意思翻译颜色过滤器,学习就是要举一反三,拓展思考就把这个功能做了...
    99+
    2024-04-02
  • canvas中怎么实现图片滤镜效果
    canvas中怎么实现图片滤镜效果,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。1.获取图像数据 img.src = &rsquo...
    99+
    2024-04-02
  • 怎么用canvas实现图片滤镜效果
    小编给大家分享一下怎么用canvas实现图片滤镜效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 1.获取图像数据 img...
    99+
    2024-04-02
  • Python学习之图片滤镜效果的实现
    目录前言Image模块对于图像处理的基本功能讲解对图像滤镜的应用1、显示图片轮廓2、显示图片浮雕效果3、显示图片轮廓4、显示图片模糊效果总结前言 滤镜效果是图像处理中常用的一种技术,...
    99+
    2023-05-19
    Python实现图片滤镜效果 Python图片滤镜 Python滤镜
  • 实现微信小程序中的图片滤镜效果
    实现微信小程序中的图片滤镜效果随着社交媒体应用的流行,人们越来越喜欢在照片中应用滤镜效果,以增强照片的艺术效果和吸引力。在微信小程序中也可以实现图片滤镜效果,为用户提供更多有趣和创造性的照片编辑功能。本文将介绍如何在微信小程序中实现图片滤镜...
    99+
    2023-11-21
    图片 微信小程序 滤镜效果
  • Android实现滤镜效果ColorMatrix
    本文实例为大家分享了Android实现滤镜效果的具体代码,供大家参考,具体内容如下 1.效果图 2.矩阵算法 package net.surina.myapplication1...
    99+
    2024-04-02
  • JavaScript canvas实现镜像图片效果
    本文实例为大家分享了JavaScript canvas实现镜像图片效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html>...
    99+
    2024-04-02
  • Vue3实现图片放大镜效果
    本文实例为大家分享了Vue3实现图片放大镜效果的具体代码,供大家参考,具体内容如下 实现效果 代码 <template> <div class="good...
    99+
    2024-04-02
  • canvas如何实现滤镜效果
    这篇文章给大家分享的是有关canvas如何实现滤镜效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下<!DOCTYPE html>  ...
    99+
    2024-04-02
  • Android如何实现滤镜效果ColorMatrix
    这篇文章将为大家详细讲解有关Android如何实现滤镜效果ColorMatrix,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Android是什么Android是一种基于Linux内核的自由及开放源代码的...
    99+
    2023-06-14
  • CSS3怎么实现图片模糊过滤效果
    本篇内容主要讲解“CSS3怎么实现图片模糊过滤效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3怎么实现图片模糊过滤效果”吧!先给大家展示下效果图,如果...
    99+
    2024-04-02
  • PythonOpencv实现最强美颜滤镜效果
    目录前言环境安装效果展示第一组随机第二组随机源码展示额外的小知识补充:加载图片:图片模糊处理:总结前言 继老干妈、辣条之后,中国美颜软件在海外一夜成名,把所有人都幻化成了粉红小甜心。...
    99+
    2024-04-02
  • Python OpenCV实现3种滤镜效果实例
    目录前言浮雕滤镜效果雕刻滤镜效果凸透镜滤镜效果总结前言 本篇文章要使用OpenCV、Numpy 和Math这3个工具包实现一个简单的滤镜编辑器。在这个滤镜编辑器中,包含了3种滤镜效果...
    99+
    2024-04-02
  • css3中怎么实现图片放大镜特效效果
    这篇文章将为大家详细讲解有关css3中怎么实现图片放大镜特效效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。代码如下:<ul class="...
    99+
    2024-04-02
  • 利用Flutter实现背景图片毛玻璃效果实例
    目录前言使用 canvas 绘制图片更改绘制图片的绘制范围毛玻璃效果实现总结前言 继续我们绘图相关篇章,这次我们来看看如何使用 CustomPaint 实现毛玻璃背景图效果。毛玻璃背...
    99+
    2024-04-02
  • JS版图片放大镜效果
    本文实例为大家分享了JS实现图片放大镜效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang=...
    99+
    2024-04-02
  • Canvas系列中滤镜效果的实现方法
    这篇文章给大家分享的是有关Canvas系列中滤镜效果的实现方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Canvas 真的是一个神奇的东西,不仅能够绘制各种图形、文本和位图,还能够对位图进行复杂的像素运算和处...
    99+
    2023-06-09
  • Android图像处理之霓虹滤镜效果
    霓虹是用来描绘图像的轮廓,勾画出颜色变化的边缘,加强其过度效果,使图像产生轮廓发光的效果。 主要步骤为 1、根据当前像素与其右方和下方像素的梯度运算; 2、然后将结果值作为当...
    99+
    2022-06-06
    Android
  • JS实现图片放大镜效果的脚本怎么写
    这篇文章主要介绍“JS实现图片放大镜效果的脚本怎么写”,在日常操作中,相信很多人在JS实现图片放大镜效果的脚本怎么写问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JS实现图片放大镜效果的脚本怎么写”的疑惑有所...
    99+
    2023-06-27
  • css滤镜效果有哪些
    本篇内容介绍了“css滤镜效果有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!CSS样式的filter...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作