canvas - 斩波画布/renderbox
问题描述
我想访问renderBox
一个元素并将其分解成小块。
我正在寻找我是否可以拥有该元素并操纵它的绘画。
我正在寻找如何将元素转换为pixal array
orcanvas
并重建它。
类似的东西,但在颤抖
我不知道如何处理它。
解决方案
您可以检查此代码是否正常工作。
import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Photo Puzzle Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Image image;
//double imageHeight;
//double imageWidth;
String networkImage = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0ddb_rBz3oewknk6NSRvHhcds1sC9csScoaASWGFiLBytKcdvpg";
@override
void initState() {
super.initState();
image = Image.network(networkImage);
// rootBundle.load("assets/amrdiab.jpg").then((bd) {
// setState(() {
// Uint8List lst = new Uint8List.view(bd.buffer);
// print(lst);
// print(lst.length);
// //image = Image.memory(lst);
//
// });
//
// });
}
@override
Widget build(BuildContext context) {
final maxColumns = 10;
final maxRows = 10;
final piecesCount = maxColumns * maxRows;
assert(maxColumns>1,"Columns must be more than 1!");
assert(maxRows>1,"Rows must be more than 1!");
return Scaffold(
backgroundColor: Color(0xFFF6F6F6),
appBar: AppBar(backgroundColor: Color(0xFFF6F6F6), elevation: 0),
body: Column(
children: <Widget>[
Expanded(
child: GridView.builder(
physics: BouncingScrollPhysics(),
padding: const EdgeInsets.all(4.0),
itemCount: piecesCount,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: maxColumns,
childAspectRatio: maxRows/maxColumns,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0,
),
itemBuilder: (BuildContext context, int index) {
final dx = index%maxColumns;
final dy = (index/maxColumns).floor();
print("dx = $dx dy = $dy");
return Container(
color: Colors.lightBlue,
alignment: Alignment.center,
child: Transform(
alignment: Alignment.center,
transform: Matrix4.diagonal3Values(max(maxColumns,maxRows).toDouble(),
max(maxRows,maxColumns).toDouble(), 1.0),
child: ClipRect(
child: Align(
//alignment: Alignment(-1, -1),
alignment: Alignment(-1+(2/(maxColumns-1))*dx,-1+(2/(maxRows-1))*dy),
widthFactor: 1/maxColumns,
heightFactor: 1/maxRows,
child: image,
),
),
),
);
}),
),
],
));
}
}
文本小部件示例:
import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Photo Puzzle Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Image image;
String networkImage = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0ddb_rBz3oewknk6NSRvHhcds1sC9csScoaASWGFiLBytKcdvpg";
@override
void initState() {
super.initState();
image = Image.network(networkImage);
}
@override
Widget build(BuildContext context) {
final maxColumns = 3;
final maxRows = 3;
final piecesCount = maxColumns * maxRows;
assert(maxColumns>1,"Columns must be more than 1!");
assert(maxRows>1,"Rows must be more than 1!");
return Scaffold(
backgroundColor: Color(0xFFF6F6F6),
appBar: AppBar(backgroundColor: Color(0xFFF6F6F6), elevation: 0),
body: Column(
children: <Widget>[
Text("Hi there, I am a text widget, and can be choped into pieces:)",
style: TextStyle(fontSize: 24.0),),
Expanded(
child: GridView.builder(
physics: BouncingScrollPhysics(),
padding: const EdgeInsets.all(4.0),
itemCount: piecesCount,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: maxColumns,
childAspectRatio: 7.0,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0,
),
itemBuilder: (BuildContext context, int index) {
final dx = index%maxColumns;
final dy = (index/maxColumns).floor();
print("dx = $dx dy = $dy");
return Container(
color: Colors.lightBlue,
alignment: Alignment.center,
child: Transform(
alignment: Alignment.center,
transform: Matrix4.diagonal3Values(
//1.0,1.0,
max(maxColumns,maxRows).toDouble(),
max(maxRows,maxColumns).toDouble(),
1.0),
child: ClipRect(
child: Align(
//alignment: Alignment(-1, -1),
alignment: Alignment(-1+(2/(maxColumns-1))*dx,-1+(2/(maxRows-1))*dy),
widthFactor: 1/maxColumns,
heightFactor: 1/maxRows,
//child: image,
child: Text("Hi there, I am a text widget, and can be choped into pieces:)",
style: TextStyle(fontSize: 8.0),
),
),
),
),
);
}),
),
],
));
}
}
编辑:如何获取要在画布中绘制的小部件的字节数组表示? 但是,如果您想要获取任何易于实现的小部件的字节数组,例如这个问题。
假设您要截取 FlutterLogo 小部件的屏幕截图。将其包装在 RepaintBoundary 中,将为它的 child 创建一个单独的显示列表。并提供钥匙
var scr= new GlobalKey();
RepaintBoundary(
key: scr,
child: new FlutterLogo(size: 50.0,))
然后您可以通过将边界转换为图像来获取 pngBytes
takescrshot() async {
RenderRepaintBoundary boundary = scr.currentContext.findRenderObject();
var image = await boundary.toImage();
var byteData = await image.toByteData(format: ImageByteFormat.png);
var pngBytes = byteData.buffer.asUint8List();
print(pngBytes);
}
然后你可以使用这个数组直接绘制到画布中,这也很容易。
问题是你如何操作这个数组或做所谓的图像处理,理论上这是可行的,但当然你需要一个完整的包来处理我所知道的颤振不可用的东西,尽管斩波的例子正如我之前解释的那样,可以将小部件分成几部分,
推荐阅读
- ruby-on-rails - 使用 render 方法时,流 flash 消息不会被刷新
- git - Rebase from master on to feature branch fails with " Unstaged changes exist in workdir"
- gradle - Gradle - Corda flow tests fail when run from the command line
- java - JPanel Graphics 不绘制任何东西(Java)
- python - Python-else when parsing JSON
- excel - Averageifs with Or
- php - 如何在laravel中使用angularjs从视图中获取控制器传递中的表单数据?
- keras - 如何获取 Keras 模型的运行时批量大小
- webstorm - Comparing files from different project
- laravel - Socket IO的实现