Flutter图像素描化处理插件image_sketcher的使用
Flutter图像素描化处理插件image_sketcher的使用
image_sketcher
概览
特性
- 可用的画笔模式：线条、矩形、圆形、自由绘画/签名、虚线、箭头和文本。
- 能够从网络URL、资源图像、文件和内存加载图像。
- 构造函数中的控制参数，如strokeWidth和颜色。
- 导出图像作为内存字节，可以转换为图像。
- 能够撤销和清除绘制。
- 自定义工具栏属性。实现示例
- 所有功能均可用。实现示例
开始使用
在您的Flutter项目的pubspec.yaml文件中添加以下依赖：
dependencies:
...
image_sketcher: latest
在您的库中添加以下导入：
import 'package:image_sketcher/image_sketcher.dart';
使用库
库的基本使用方法：
ImageSketcher.network: 在网络URL上的图像上进行绘制。
final _imageKey = GlobalKey<ImageSketcherState>();
// 提供控制器到绘图器。
ImageSketcher.network("https://sample_image.png",
key: _imageKey,scalable: true),
/// 导出图像：
Uint8List byteArray = await _imageKey.currentState.exportImage();
更多详细的使用指南，请查看示例。
示例代码
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_sketcher/image_sketcher.dart';
import 'package:open_file/open_file.dart';
import 'package:path_provider/path_provider.dart';
void main() {
runApp(const ExampleApp());
}
class ExampleApp extends StatelessWidget {
const ExampleApp({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image Painter Example',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: const SketcherExample(),
);
}
}
class SketcherExample extends StatefulWidget {
const SketcherExample({Key? key}) : super(key: key);
[@override](/user/override)
_SketcherExampleState createState() => _SketcherExampleState();
}
class _SketcherExampleState extends State<SketcherExample> {
final _imageKey = GlobalKey<ImageSketcherState>();
final _key = GlobalKey<ScaffoldState>();
Color color = Colors.green;
void saveImage() async {
final image = await _imageKey.currentState?.exportImage();
final directory = (await getApplicationDocumentsDirectory()).path;
await Directory('$directory/sample').create(recursive: true);
final fullPath = '$directory/sample/${DateTime.now().millisecondsSinceEpoch}.png';
final imgFile = File(fullPath);
imgFile.writeAsBytesSync(image!);
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
backgroundColor: Colors.grey[700],
padding: const EdgeInsets.only(left: 10),
content: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text("Image Exported successfully.",
style: TextStyle(color: Colors.white)),
TextButton(
onPressed: () => OpenFile.open(fullPath),
child: Text(
"Open",
style: TextStyle(
color: Colors.blue[200],
),
),
)
],
),
),
);
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
key: _key,
appBar: AppBar(
title: const Text("Sketcher Example"),
),
backgroundColor: Colors.grey,
body: Stack(
children: [
ImageSketcher.asset(
"assets/sample.jpeg",
key: _imageKey,
scalable: true,
initialStrokeWidth: 2,
initialColor: color,
initialPaintMode: PaintMode.freeStyle,
controlPosition: Alignment.topCenter,
isControllerOverlay: true,
controllerAxis: ControllerAxis.vertical,
controllerDecoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
),
controllerMargin: EdgeInsets.all(10),
toolbarBGColor: Colors.white,
),
Align(
alignment: Alignment.centerLeft,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
),
margin: EdgeInsets.only(left: 10),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
onPressed: () {
_imageKey.currentState?.clearAll();
},
icon: const Icon(Icons.clear),
),
IconButton(
onPressed: () {
_imageKey.currentState?.undo();
},
icon: const Icon(Icons.undo),
),
IconButton(
onPressed: () {
_imageKey.currentState?.changePaintMode(PaintMode.line);
},
icon: const Icon(Icons.mode_edit),
),
IconButton(
onPressed: () {
_imageKey.currentState?.changeBrushWidth(20);
},
icon: const Icon(Icons.brush),
),
IconButton(
onPressed: () {
_imageKey.currentState?.addText('Abcd');
},
icon: const Icon(Icons.text_fields),
),
IconButton(
onPressed: saveImage,
icon: const Icon(Icons.check),
),
IconButton(
onPressed: () {
_imageKey.currentState?.updateColor(Colors.red);
},
icon: const Icon(
Icons.circle,
color: Colors.red,
size: 32,
),
),
IconButton(
onPressed: () {
_imageKey.currentState?.updateColor(Colors.green);
},
icon: const Icon(
Icons.circle,
color: Colors.green,
size: 32,
),
),
IconButton(
onPressed: () {
_imageKey.currentState?.updateColor(Colors.yellow);
},
icon: const Icon(
Icons.circle,
color: Colors.yellow,
size: 32,
),
),
],
),
),
)
],
),
);
}
}
更多关于Flutter图像素描化处理插件image_sketcher的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter图像素描化处理插件image_sketcher的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
image_sketcher 是一个用于 Flutter 的插件，它可以将图像转换为素描效果。这个插件可以帮助你轻松地将普通的图像转换为具有素描风格的图像。以下是使用 image_sketcher 插件的基本步骤和示例代码。
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 image_sketcher 插件的依赖：
dependencies:
flutter:
sdk: flutter
image_sketcher: ^0.0.1 # 请检查最新版本
然后运行 flutter pub get 来安装依赖。
2. 导入插件
在你的 Dart 文件中导入 image_sketcher 插件：
import 'package:image_sketcher/image_sketcher.dart';
3. 使用插件进行图像素描化处理
你可以使用 ImageSketcher 类中的方法将图像转换为素描效果。以下是一个简单的示例：
import 'package:flutter/material.dart';
import 'package:image_sketcher/image_sketcher.dart';
import 'dart:ui' as ui;
class SketchImageScreen extends StatefulWidget {
[@override](/user/override)
_SketchImageScreenState createState() => _SketchImageScreenState();
}
class _SketchImageScreenState extends State<SketchImageScreen> {
ui.Image? _sketchImage;
[@override](/user/override)
void initState() {
super.initState();
_loadImage();
}
Future<void> _loadImage() async {
// 加载本地图像
final image = await _loadImageFromAsset('assets/sample_image.jpg');
// 将图像转换为素描效果
final sketchImage = await ImageSketcher.sketch(image);
setState(() {
_sketchImage = sketchImage;
});
}
Future<ui.Image> _loadImageFromAsset(String assetPath) async {
final ByteData data = await rootBundle.load(assetPath);
final List<int> bytes = data.buffer.asUint8List();
final ui.Codec codec = await ui.instantiateImageCodec(Uint8List.fromList(bytes));
final ui.FrameInfo frame = await codec.getNextFrame();
return frame.image;
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Sketcher Example'),
),
body: Center(
child: _sketchImage != null
? RawImage(
image: _sketchImage,
)
: CircularProgressIndicator(),
),
);
}
}
void main() {
runApp(MaterialApp(
home: SketchImageScreen(),
));
}