Question

我想访问元素的renderBox并将其购物成小块。

我正在寻找是否可以拥有该元素并操纵其绘画。

我正在研究如何将元素转换为pixal array或canvas并重建它。

类似的东西，但是扑朔迷离

我不知道该怎么办。

Answer 1

您可以检查此代码是否正常工作。

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),
                            ),
                          ),
                        ),
                      ),
                    );
                  }),
            ),
          ],
        ));
  }
}

编辑：如何获取要在画布上绘制的小部件的字节数组表示形式？ 但是，如果要获取任何易于实现的小部件的字节数组，例如this问题。

假设您要对FlutterLogo小部件进行截图。将其包装在RepaintBoundary中，将创建一个单独的显示列表为了它的孩子。并提供一个密钥

var scr= new GlobalKey();
RepaintBoundary(
         key: scr,
         child: new FlutterLogo(size: 50.0,))

，然后将边界转换为图片

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);
  }

然后您可以使用此数组将其直接绘制到画布中，这也很容易。

问题在于如何操作该数组或进行所谓的图像处理，理论上是可行的，但是就我所知，您肯定需要一个完整的软件包，尽管对于我所知，该软件包不可用像我前面解释的一样，可以将小部件切成碎片

碎扑帆布/ renderbox

1 个答案: