Flutter绘制指南06-颜色的基本操作

本节目标

[1]. 认识Dart中的颜色表示方式
[2]. 了解颜色，[混合模式]的坐拥1
[3]. 了解如何读取图片中的像素颜色

一. 认识颜色

Color类在dart.ui包下，在Dart里面，颜色很简单，核心就是一个颜色的int值。
这代表Color类对应的是四通道32位的颜色，并没有提供RGBA颜色到HSV颜色互相转换的方法。Color类中主要有6个成员属性。核心是int类型的value。这个表示用来记录颜色信息。通过get关键字可以获取该颜色的透明通道alpha、红色通道red、绿色通道green、蓝色通道blue、透明度opacity

const Color(int value):value=value& 0XFFFFFFFF;
final int value;
int get alpha=>(0XFF000000 & value) >>24
double get opacity=>alpha/0xFF
int getred=>(0XFF0000 & value) >>16
int get green=>(0x0000ff00 & value) >>8
int get blue=>(0x000000ff & value) >>0

2.关于颜色的ARGB表示

颜色的表示大家应该都不陌生。比如0xffBBE9F7可以表示一个32位的颜色。它转化位2进制位11111111 1011101 111010011 1110111,每8个数字都表示一个颜色通道。本质上是ARGB.
颜色本质上是什么，这个并不好说。毕竟颜色是人类用来描述自然世界的工具。我们能够去做的就只有表示颜色。其实0xffbbe9f7 本身也是一个代号而已。只是人为规定它和ARGB色彩空间的一个颜色对应而已。
通过一个int值表示颜色。可以很方便的通过位运算对颜色进行变换。0xffbbe9f7可以转化位2进制。

3.关于颜色与图片

一张位图图片本质上是由一个个像素点组成的。每个像素都是一个颜色。也就是说位图是一个颜色集。我对图片的所有操作。本质上都是对图片的变换。
对于图片的滤色。如果说关闭颜色通道。也就是让图片中所有的颜色R值设置为0

二. 绘制颜色阵列

下面是一个红色透明度依次降低的色块。是一个0xfffff000~0xff0000共256个颜色的列表绘制而成的图案。在这里想要介绍以下如何通过一维数组取商和取余来绘制出类似二维有行列的效果。

三、颜色的混合模式

混合模式在PS中也有这个概念。表现如下:Dart中一共有29种混合模式

1.了解混合模式是什么？

源码中注释为：Algorithms to use when painting on the canvas
即在画布商绘制时使用的算法。当在画布上绘制图片或者形状时。BlendMode会决定混合像素时使用的算法。
竟然是混合，那么肯定要两个东西混合在一起，这就是src和dst。src顾名思义是源。dst是目标。
一般dst会被认为是背景。src会被认为是正在绘制的图像。

void drawBlendImage(Canvas canvas){if(image==null)return;Paint srcPaint=Paint();canvas.translate(-step*17, -step*17);Paint dstPaint=Paint();BlendMode.values.asMap().forEach((i, value) {int line=i~/10;int row=i%10;canvas.save();canvas.translate(3.7*step*row, 5.5*step*line);canvas.drawImageRect(image!,Rect.fromPoints(Offset.zero, Offset(image!.width*1.0,image!.height*1.0)),Rect.fromCenter(center: Offset.zero, width: 25*2.0, height: 25*2.0),dstPaint);srcPaint..color=Color(0xffff0000)..blendMode=value;canvas.drawRect(Rect.fromPoints(Offset.zero, Offset(20*2.0,20*2.0)), srcPaint);_simpleDrawText(canvas,value.toString().split(".")[1],offset: Offset(-10, 50));canvas.restore();});}void _simpleDrawText(Canvas canvas, String str,{Offset offset = Offset.zero, Color color = Colors.black}) {var builder = ui.ParagraphBuilder(ui.ParagraphStyle(textAlign: TextAlign.left,fontSize: 11,textDirection: TextDirection.ltr,maxLines: 1,))..pushStyle(ui.TextStyle(color: color, textBaseline: ui.TextBaseline.alphabetic),)..addText(str);canvas.drawParagraph(builder.build()..layout(ui.ParagraphConstraints(width: 11.0 * str.length)),offset);}

四、获取图片中的颜色

我们知道图片是由像素点构成的。每个像素点都存由颜色信息。Flutter本身的Image对象并没有获取相关像素的方法。可以使用第三方的image库进行相关操作。

import 'dart:typed_data';import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image/image.dart' as image;
import 'coordinate.dart';
import 'dart:ui' as ui;
void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(// This is the theme of your application.//// Try running your application with "flutter run". You'll see the// application has a blue toolbar. Then, without quitting the app, try// changing the primarySwatch below to Colors.green and then invoke// "hot reload" (press "r" in the console where you ran "flutter run",// or simply save your changes to "hot reload" in a Flutter IDE).// Notice that the counter didn't reset back to zero; the application// is not restarted.primarySwatch: Colors.blue,),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({Key? key, required this.title}) : super(key: key);// This widget is the home page of your application. It is stateful, meaning// that it has a State object (defined below) that contains fields that affect// how it looks.// This class is the configuration for the state. It holds the values (in this// case the title) provided by the parent (in this case the App widget) and// used by the build method of the State. Fields in a Widget subclass are// always marked "final".final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {image.Image? _image;@overridevoid initState() {super.initState();_loadImage();}void _loadImage() async {_image = await loadImageFromAssets('assets/images/wy_300x200.jpg');setState(() {});}@overrideWidget build(BuildContext context) {return Container(color: Colors.white, child: CustomPaint(painter: PaperPainter(_image)));}//读取 assets 中的图片Future<image.Image?> loadImageFromAssets(String path) async {ByteData data = await rootBundle.load(path);List<int> bytes = data.buffer.asUint8List();return image.decodeImage(bytes);}
}
class PaperPainter extends CustomPainter {late Paint _paint;final double strokeWidth = 0.5;final Color color = Colors.blue;final image.Image? imageSrc;final Coordinate coordinate = Coordinate();PaperPainter(this.imageSrc) {_paint = Paint()..style = PaintingStyle.fill..strokeWidth = strokeWidth..color = color;}@overridevoid paint(Canvas canvas, Size size) {coordinate.paint(canvas, size);canvas.translate(size.width / 2, size.height / 2);_drawImage(canvas);}@overridebool shouldRepaint(PaperPainter oldDelegate) =>imageSrc != oldDelegate.imageSrc;void _drawImage(Canvas canvas) {if (imageSrc == null)  return;int colorInt = imageSrc!.getPixel(imageSrc!.width, 0);var color = Color(colorInt);canvas.drawCircle(Offset.zero, 10,_paint..color =Color.fromARGB(color.alpha, color.blue, color.green, color.red));}
}

2. 绘制图片像素

import 'dart:typed_data';import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image/image.dart' as image;
import 'coordinate.dart';
import 'dart:ui' as ui;void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(// This is the theme of your application.//// Try running your application with "flutter run". You'll see the// application has a blue toolbar. Then, without quitting the app, try// changing the primarySwatch below to Colors.green and then invoke// "hot reload" (press "r" in the console where you ran "flutter run",// or simply save your changes to "hot reload" in a Flutter IDE).// Notice that the counter didn't reset back to zero; the application// is not restarted.primarySwatch: Colors.blue,),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({Key? key, required this.title}) : super(key: key);// This widget is the home page of your application. It is stateful, meaning// that it has a State object (defined below) that contains fields that affect// how it looks.// This class is the configuration for the state. It holds the values (in this// case the title) provided by the parent (in this case the App widget) and// used by the build method of the State. Fields in a Widget subclass are// always marked "final".final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {image.Image? _image;List<Ball> balls = [];double d = 20; //复刻的像素边长@overridevoid initState() {super.initState();_initBalls();}void _initBalls() async {_image = await loadImageFromAssets('assets/images/dartg.png');if (_image == null) return;for (int i = 0; i < _image!.width; i++) {for (int j = 0; j < _image!.height; j++) {Ball ball = Ball();ball.x = i * d + d / 2;ball.y = j * d + d / 2;ball.r = d / 2;var color = Color(_image!.getPixel(i, j));ball.color =Color.fromARGB(color.alpha, color.blue, color.green, color.red);balls.add(ball);}}setState(() {});}@overrideWidget build(BuildContext context) {return Container(color: Colors.white,child: CustomPaint(painter: PaperPainter(balls),));}//读取 assets 中的图片Future<image.Image?> loadImageFromAssets(String path) async {ByteData data = await rootBundle.load(path);List<int> bytes = data.buffer.asUint8List();return image.decodeImage(bytes);}
}class PaperPainter extends CustomPainter {late Paint _paint;final double strokeWidth = 0.5;final Color color = Colors.blue;final List<Ball> balls;final Coordinate coordinate = Coordinate();PaperPainter(this.balls) {_paint = Paint()..style = PaintingStyle.fill..strokeWidth = strokeWidth..color = color;}@overridevoid paint(Canvas canvas, Size size) {coordinate.paint(canvas, size);canvas.translate(-710, -1000);_drawImage(canvas);}void _drawImage(Canvas canvas) {balls.forEach((Ball ball) {canvas.drawCircle(Offset(ball.x, ball.y), ball.r, _paint..color = ball.color);});}@overridebool shouldRepaint(PaperPainter oldDelegate) => balls != oldDelegate.balls;
}class Ball {double x; //点位Xdouble y; //点位YColor color; //颜色double r; // 半径Ball({this.x = 0, this.y = 0, this.color = Colors.black, this.r = 5});
}

Flutter绘制指南06-颜色的基本操作相关推荐

Flutter绘制指南09-动画曲线和方法
本节目标 [1] 认识动画器[曲线速率]的作用 [2] 绘制出Flutter内置的所有曲线效果常量 [3] 了解动画器的常用方法 [4] 了解动画器的状态,以及状态变化监听一.动画速率曲线动画曲线 ...
Flutter绘制指南10-手势在绘制中的使用
本节目标 [1]. 了解手势在画布中的使用方式 [2]. 练习绘制,并根据手指滑动完成控制杆的绘制 [3]. 练习绘制,并根据手指滑动完成[刻度尺]的绘制 [4]. 了解如何限制绘制区域一.控制柄组 ...
Flutter绘制指南05-图形的路径添加
本节目标 [1].了解如何通过移动路径形成形状:直线运动.圆弧运动.圆锥曲线运动.贝塞尔曲线运动 [2].了解路径的[绝对运动]和[相对运动] [3].了解已经在已有的路径中添加其他形状: 添加矩形, ...
python画熊猫论文_Python数据可视化之美：专业图表绘制指南(全彩)
Python数据可视化之美:专业图表绘制指南(全彩)电子书系统性地介绍Python 的绘图语法系统,包括matplotlib.Seaborn.plotnine 包,以及用于地理空间数据可视化的Bas ...
Flutter 绘制Paint
Flutter 的绘制主要涉及两个Widget: CustomPainter, CustomPaint CustomPainter:提供画布的组件: 有几个主要的参数: a. painter : 绘制 ...
Python，OpenCV鼠标事件进行矩形、圆形的绘制（随机颜色、随机半径）
Python,OpenCV鼠标事件进行矩形.圆形的绘制(随机颜色.随机半径) 1. 效果图 2. 源码参考这篇博客将介绍鼠标事件,并介绍鼠标事件矩形.圆形的绘制: 所有的鼠标事件(左键按下.左键释 ...
Flutter学习指南：文件、存储和网络
Flutter学习指南交互.手势和动画 UI布局和控件熟悉Dart语言编写第一个应用开发环境搭建本篇文章我们先学习 Flutter IO 相关的基础知识,然后在 Flutter学习指南:交互 ...
iOS 界面上绘制不同字体颜色大小的字符串
NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:@"绘制不同字体颜色 ...
Origin绘制大小和颜色可变的3D散点图
本期课程学习使用Origin 绘制大小和颜色可变的3D散点图,所用Origin版本为OriginPro 2019b. 1. 导入如下图所示的一组数据,原始数据共有340列,这里只展示到了25列,并将C ...

Flutter绘制指南06-颜色的基本操作

本节目标

一. 认识颜色

2.关于颜色的ARGB表示

3.关于颜色与图片

二. 绘制颜色阵列

三、颜色的混合模式

1.了解混合模式是什么？

四、获取图片中的颜色

2. 绘制图片像素

Flutter绘制指南06-颜色的基本操作相关推荐

最新文章

热门文章