1

そのため、サイズを変更して、CustomPainterピクセル アートのような外観を維持しようとしてきましたが、作成できませんでした。

// for example, I have this widget, that sets an specific size to a CustomPainter,
// in this case width and height are 16

         SizedBox(
            width: width*scaleFactor,
            height: height*scaleFactor,
            child: ClipRect(
              child: CustomPaint(
                size: Size(width*scaleFactor, height*scaleFactor),
                painter: MyCustomPainter(scaleFactor),
              ),
            ),
          );

// and this would be the custom Painter

class MyCustomPainter extends CustomPainter{

final double scaleFactor;
  MyCustomPainter(this.scaleFactor);

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(scaleFactor);
    canvas.drawPaint(Paint()..color = Colors.white70);
    canvas.drawLine(const Offset(4,4), const Offset(12,12), Paint()
      ..color = Colors.black
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1
      ..isAntiAlias = false);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;

}

もちろん、scaleFactor を 1 に設定すると、必要な結果が得られます

customPainter_scale_1

そして、scaleFactor を変更すると、次のようになります。

ここに画像の説明を入力

しかし、私が実際に好きにしたいのは次のようなものです:

ここに画像の説明を入力

Transform.scale私はウィジェットを試してみましたが(ヘルプを変更することさえありませんFilterQuality)、キャンバス内にスケールマトリックスを設定することさえしましcanvas.transform()たが、良い結果は得られませんでした。

4

0 に答える 0