Как нарисовать рисунок внутри контура на холсте во флаттере? - PullRequest
Новая
       79

Как нарисовать рисунок внутри контура на холсте во флаттере?

2 голосов
/ 18 февраля 2020

Я хочу нарисовать пересекающиеся диагональные линии внутри контура на холсте в Flutter.

Прямо сейчас у меня вроде как получилось, загрузив ресурс изображения в ui.Image, а затем используя CustomPainter с ImageShader, чтобы нарисовать его на холсте. Это работает, но требует, чтобы я создал актив изображения для каждой пары цветов линий (это не только красный / черный). 

Future<ui.Image> _loadAssetImage(int number) {
  Completer<ui.Image> completer = new Completer<ui.Image>();

  AssetImage('assets/pngs/pattern_$number.png')
    .resolve(new ImageConfiguration())
    .addListener(ImageStreamListener((ImageInfo image, bool synchronousCall){
      ui.Image img;
      img = image.image;
      completer.complete(img);
    })
  );

  return completer.future;
}

ui.Image myImage = await _loadAssetImage(1);

, а затем 

          canvas.drawPath(path, Paint()
            ..shader = ImageShader(myImage, TileMode.repeated, TileMode.repeated, Matrix4.identity().scaled(0.2).storage)
            ..style = PaintingStyle.fill
          );

          canvas.drawPath(path, Paint()
            ..style = PaintingStyle.stroke
            ..strokeJoin= StrokeJoin.round
            ..strokeCap= StrokeCap.round
            ..color = Colors.black
            ..strokeWidth = 1
          );

Однако я Мне интересно знать, есть ли более эффективный способ сделать это, чем загрузка и рисование изображений активов. Это должно быть легко - в конце концов, это действительно просто повторяющиеся линии - но я не могу понять, как нарисовать их и обрезать их по пути.

Есть предложения?

enter image description here

...