Чоп флаттер холст / рендербокс

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

Редактировать: Как получить представление массива байтов виджета для рисования на холсте? Но если вы хотите, то получите массив байтов любого виджета, который легко реализовать, например, , это вопрос.

Допустим, вы хотите сделать снимок экрана виджета FlutterLogo. обернуть его в RepaintBoundary с волей создает отдельный список отображения для своего ребенка. и предоставить ключ

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

тогда вы можете использовать этот массив для рисования непосредственно на холст, что также легко.

проблема в том, как вы можете манипулировать этим массивом или делать то, что известно как обработка изображений, теоретически это выполнимо, но, безусловно, вам понадобится полный пакет для того, что, по моим сведениям, не доступно для флаттера, хотя пример разделить виджет на части можно, как я объяснил ранее,