[》越过拾光回忆]
拾光回忆
1. Flutter 项目资产办理，看这一篇就够了！
简介: 针对 Flutter 项目资产办理的脚本服务。Fam 具有以下特色: 支撑多种渠道以及各渠道无差异化、界面美观、功用完全、快捷便利。
引荐: ⭐️⭐️⭐️⭐️⭐️
2. Flutter 手势在多指接触时一些办法会多次触发
简介: 针对 Flutter 多手指检测以及手势触发其他手势也触发的问题。
引荐: ⭐️⭐️⭐️⭐️⭐️
3. Dart 的枚举类型的高阶用法
简介: 这是让开发者更深化的了解 Dart 的枚举以及相关运用和办法。
引荐: ⭐️⭐️⭐️
4. Flutter 能够快速完成单项或许多项选择，你知道吗？
简介: 这是让开发者愈加快捷的完成单选、多选功用，无需你对数据处理。
引荐: ⭐️⭐️⭐️⭐️⭐️
5. Flutter 的吸收指针和忽略指针的作用以及区别
简介: 这是让开发者更深化的了解 Flutter 的两种指针的介绍以及相关运用和办法。
引荐: ⭐️⭐️⭐️
6. Flutter 项目滑动轨迹的高阶用法
简介: 这是让开发者愈加快捷的完成多种款式的轨迹滑块，比方:轨迹渐变色、触控笔悬浮标等。
引荐: ⭐️⭐️⭐️⭐️⭐️
7. Flutter 的 Debug 日志办理，可自定义多种输出款式
简介: 这是让开发者愈加快捷的完成多种款式的轨迹滑块，比方:轨迹渐变色、触控笔悬浮标等。
引荐: ⭐️⭐️⭐️⭐️⭐️
[返回拾光回忆《]
一、简述
在当时知识产权年代，各种渠道均对其渠道上的图画进行水印增加。有些渠道甚至针对本身产品的水印处理收取业务费用。目前，水印在社会中的重要性不言而喻。那么在开发中，咱们怎么快速完成水印功用呢？小编引荐 IDKit 开发包，它为开发者供给了快捷快速的图画增加水印功用。
二、WMarkImage 介绍
WMarkImage 是 IDKit 开发包对Flutter 的Image 图画进行扩展来完成水印功用的。WMarkImage 供给能为图片增加图画水印和文字水印的功用，能够设置水印的透明度、巨细、水平偏移、笔直偏移、旋转视点、是否开释图画资源以及文字水印的款式、最小以及最大宽度、最大行数等。 WMarkImage 的运用办法如下:
- 首先要在项目中引进IDKit 包。
- 在要运用的该功用的文件的头部引证
import 'package:idkit/idkit.dart';
注意: 该水印功用完成IDKit 包0.3.2 版本增加的。
三、 WMarkImage 办法和参数
1. 办法
WMarkImage 供给了四个办法进行水印处理，办法如下:
Future<Image> addWaterMarkImage(xx ...)Future<Image> addWaterMarkText(xx ...)Image addWaterMarkImageSync(xx ...)Image addWaterMarkTextSync(xx ...)
从上能够看出供给同步和异步处理水印的办法， 运用者可根据需求选择。
2. 参数
-
Image wmImg
该参数是要增加的水印图画的目标。 -
WMLocation location = WMLocation.tile
该参数是要增加水印在图画中的位置，默许是: 铺满模式 -
double opacity = 0.3
该参数是要增加水印的不透明度，默许是 0.3。 -
double sizeScale = 1
该参数是要增加水印图画的尺度巨细，默许是 1。 -
double vOffset = 20, double hOffset = 20,
该参数是要增加水印在图画的水平以及笔直方向的偏移，默许 20 像素。 -
double angle = 0
该参数是要增加水印在图画上的旋转视点，比方: 30 、 45 、90 等，默许是： 0 。 -
bool srcDispose = false
该参数是设置是否开释原始图画。假如为true, 则原始图画将被从内存中铲除，假如再运用它，将抛出反常。默许： false 不开释。 -
bool wmDispose = false
该参数是设置是否开释水印图画。假如为true, 则水印图画将被从内存中铲除，假如再运用它，将抛出反常。默许： false 不开释。 -
String text
该参数是文字水印的文字目标。 -
TextStyle style = const TextStyle()
该参数是文字水印文字款式。 -
TextDirection textDirection = TextDirection.ltr
该参数是文字水印文字款式文字显现方向。 -
int? maxLines该参数是文字水印的文字可展现的最大行数。默许是 6 行。 -
double? minWidth,double? maxWidth,
该参数是文字水印的文字可展现的最小宽度和最大宽度。 -
bool isDispose = false,
同 srcDispose 解说。
四、WMarkImage 的使用
1. 图片水印增加
-
-
同步增加，默许款式
swmImage = srcImg!.addWaterMarkImageSync(wmImg!);显现作用如下:
-
-
-
修正水印尺度
咱们修正水印巨细，代码如下:swmImage = srcImg!.addWaterMarkImageSync( wmImg!, sizeScale: 0.5, );显现作用如下:
-
-
-
修正水印旋转视点
咱们还能够设置水印视点，代码如下:swmImage = srcImg!.addWaterMarkImageSync( wmImg!, sizeScale: 0.2, angle: 45, );显现作用如下:
-
-
-
修正水印水平或许笔直方向偏移
咱们也能够调整水印的水平或许处置偏移，代码如下:swmImage = srcImg!.addWaterMarkImageSync( wmImg!, sizeScale: 0.2, angle: 45, vOffset: 60, hOffset: 60, );显现作用(和上图比照看):
-
-
-
修正水印展现位置
咱们能够调整水印展现模式，代码如下:swmImage = srcImg!.addWaterMarkImageSync( wmImg!, location: WMLocation.bottomRight, sizeScale: 0.2, angle: 45, vOffset: 60, hOffset: 60, );显现作用(右下):
水印位置还有许多，就不一一展现。 水印的旋转都是以展现位置为中心旋转的。
-
-
-
开释水印图
咱们能够开释水印图或许原始图，代码如下:swmImage = srcImg!.addWaterMarkImageSync( wmImg!, location: WMLocation.centerLeft, sizeScale: 0.2, srcDispose: true, wmDispose: true, );开释结束后，图画就不能再被运用。
-
-
-
异步增加图画水印
异步增加图画水印，在代码编写方面比同步增加更为便利一点，代码如下:FutureBuilder<Image>( future: srcImg!.addWaterMarkImage(wmImg!), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.active) { return const Text('加载中...'); } if (snapshot.connectionState == ConnectionState.done) { if (snapshot.hasError) { return const Text('加载失利...'); } else { wmImg = snapshot.data!; return IDKitImage.image( image: snapshot.data!, width: 200, height: 200, ); } } return Container(); }, )
-
-
- 总结：
异步增加图片水印的方法和同步只是调用方法不同，参数是相同的。
- 总结：
2. 文字水印增加
-
-
异步默许款式，代码如下:
FutureBuilder<Image>( future: srcImg!.addWaterMarkText('IDKit 专属水印'), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.active) { return const Text('加载中...'); } if (snapshot.connectionState == ConnectionState.done) { if (snapshot.hasError) { return const Text('加载失利...'); } else { wmImg = snapshot.data!; return IDKitImage.image( image: snapshot.data!, width: 750, height: 500, ); } } return Container(); }, )显现作用如下:
-
-
-
修正文字尺度巨细， 代码如下:
FutureBuilder<Image>( future: srcImg!.addWaterMarkText('IDKit 专属水印', sizeScale: 0.5), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.active) { return const Text('加载中...'); } if (snapshot.connectionState == ConnectionState.done) { if (snapshot.hasError) { return const Text('加载失利...'); } else { wmImg = snapshot.data!; return IDKitImage.image( image: snapshot.data!, width: 750, height: 500, ); } } return Container(); }, )显现作用如下:
-
-
-
修正字体巨细、色彩等, 代码如下:
FutureBuilder<Image>( future: srcImg!.addWaterMarkText( 'IDKit 专属水印', style: const TextStyle( fontSize: 20, color: Colors.yellow, height: 2, ), ), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.active) { return const Text('加载中...'); } if (snapshot.connectionState == ConnectionState.done) { if (snapshot.hasError) { return const Text('加载失利...'); } else { wmImg = snapshot.data!; return IDKitImage.image( image: snapshot.data!, width: 750, height: 500, ); } } return Container(); }, )显现作用如下:
-
-
-
修正文字水印显现位置,代码如下:
FutureBuilder<Image>( future: srcImg!.addWaterMarkText( '@IDKit 专属水印', location: WMLocation.bottomRight, style: const TextStyle( fontSize: 20, color: Colors.yellow, height: 2, ), ), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.active) { return const Text('加载中...'); } if (snapshot.connectionState == ConnectionState.done) { if (snapshot.hasError) { return const Text('加载失利...'); } else { wmImg = snapshot.data!; return IDKitImage.image( image: snapshot.data!, width: 750, height: 500, ); } } return Container(); }, )显现作用如下:
-
-
-
修正文字显现最大宽度，代码如下:
FutureBuilder<Image>( future: srcImg!.addWaterMarkText( '专属水印1专属水印2', location: WMLocation.bottomRight, style: const TextStyle( fontSize: 20, color: Colors.yellow, height: 1, ), maxWidth: 100, ), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.active) { return const Text('加载中...'); } if (snapshot.connectionState == ConnectionState.done) { if (snapshot.hasError) { return const Text('加载失利...'); } else { wmImg = snapshot.data!; return IDKitImage.image( image: snapshot.data!, width: 750, height: 500, ); } } return Container(); }, )显现作用如下:
咱们从上图看出，水印文字产生换行。
-
-
-
修正文字最大行数，代码如下:
FutureBuilder<Image>( future: srcImg!.addWaterMarkText( '专属水印1专属水印2专属水印3,专属水印4', location: WMLocation.bottomRight, style: const TextStyle( fontSize: 20, color: Colors.yellow, height: 1, ), maxWidth: 100, maxLines: 3, ), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.active) { return const Text('加载中...'); } if (snapshot.connectionState == ConnectionState.done) { if (snapshot.hasError) { return const Text('加载失利...'); } else { wmImg = snapshot.data!; return IDKitImage.image( image: snapshot.data!, width: 750, height: 500, ); } } return Container(); }, )显现作用如下:
-
-
- 总结：
同步增加文字水印的方法和异步只是调用方法不同，参数是相同的。
- 总结：
五、 总结
运用 IDKit 包，开发者能够轻松地将水印增加到图画中，而无需编写繁琐的代码。这个包供给了多种水印款式，例如文本、图片等，而且支撑自定义水印的字体、色彩、巨细等属性，以满意不同的需求。总归，运用 IDKit 包，能够轻松完成图画增加水印的功用，让开发者愈加专注于使用的核心业务开发。假如喜爱，请留下你的小心心 ❤️ (◡) 。
