canvas - Chop flutter Canvas /渲染框

Question

我想访问一个元素的 renderBox 并将它分成小块。

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

我正在寻找如何将元素转换为像素数组 或canvas 并重建它。

类似的东西，但在 flutter

我不知道如何处理它。

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

编辑:如何获取小部件的字节数组表示以在 Canvas 中绘制？但是，如果您想要获取任何易于实现的小部件的字节数组，例如 this问题。

let's say you want to take a screenshot of the FlutterLogo widget . wrap it in a RepaintBoundary with will creates a separate display list for its child . and provide with a key

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

and then you can get the pngBytes by converting the boundary to an image

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

然后就可以直接用这个数组画到canvas上了，也很简单。

问题是你如何操作这个数组或做所谓的图像处理，理论上它是可行的，但当然你需要一个完整的包，据我所知， flutter 不可用，虽然这个例子可以按照我之前解释的那样将小部件切成小块，