Flutter图片处理插件img的使用

pub.dev Listing | API Doc | GitHub

API References:

• Repeat
• ImageToo
• ImageDecorationToo
• paintImageToo()
• InkImg

🙋‍♂️ I’m an Image Too!

Easily paint mirror-tiling images for seamless edge-to-edge textures from any source. Defines Repeat, an expansion on ImageRepeat that enables mirroring, as well as the Widgets, extensions, and methods to support it.

An ImageToo or DecorationImageToo is used to render images from the expected array of sources, but their repeat property is expanded.

The secret sauce is the Repeat enum with the standard options from ImageRepeat, such as noRepeat and repeatX, as well as bespoke mirror values, spanning mirrorX, mirrorY, and global mirror.

这个包修改了几个Flutter原生的类和Widget，通过重新实现一个替代的绘制方法来实现核心功能。

名为paintImageToo()的方法与内置的paintImage()方法类似，但对重复样式做了一些考虑。

• 特别地，在标准的平铺生成方法中，为每个生成的平铺返回一对额外的值。
  • 这些“邻近性”值的奇偶性（偶数/奇数）决定了在绘制前是否需要镜像图像。具体来说，画布本身会被镜像，然后绘制图像，最后恢复画布。
  • 最初的源图像是Proximity(0,0)，而直接在其右侧的矩形是Proximity(1,0)。

一些图像在作为无缝纹理使用时表现得更好。大多数情况下会显得像万花筒一样，但在最好的情况下则会显得神奇。

考虑到很少有图像设计用于简单的ImageRepeat.repeat模式进行边缘到边缘平铺，这种功能大大扩展了使用任何图像作为无缝纹理的灵活性。

Getting Started

要将图像直接放入应用程序中作为Widget，可以使用new ImageToo(...)。

示例代码

void main() => runApp(const Example());

class Example extends StatelessWidget {
  const Example({Key? key}): super(key: key);
  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Center(
          child: ImageToo(
            image: NetworkImage(
              'https://gifimage.net/wp-content/uploads/2017/08/transparent-fire-gif-22.gif',
              scale: 1,
            ),
            repeat: Repeat.mirror,
            width: 600,
            height: 600,
          ),
        ),
      ),
    );
  }
}

样例代码输出	原始图像（1x平铺）

这个带有镜像值的新Repeat也可以用来装饰Container或其他任何可以放置DecorationImage的地方。

只需将普通的DecorationImage对象替换为DecorationImageToo对象，并将ImageRepeat repeat属性替换为Repeat repeatMode。

示例代码

void main() => runApp(const FloorIsLava());

class FloorIsLava extends StatelessWidget {
  const FloorIsLava({Key? key}) : super(key: key);

  Widget build(BuildContext context) => const MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          backgroundColor: Colors.black,
          body: ExampleBody(),
        ),
      );
}

class ExampleBody extends StatelessWidget {
  const ExampleBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: const BoxDecoration(
          color: Colors.amber,
          image: DecorationImageToo(
            image: NetworkImage(
              'https://gifimage.net/wp-content/uploads/2017/08/transparent-fire-gif-22.gif',
              scale: 14,
            ),
            repeatMode: Repeat.mirror,
          ),
        ),
        child: const Center(
          child: Text(
            'THE\nFLOOR\nIS\nLAVA',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 75,
              color: Colors.black,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

样例代码输出	原始图像（1x平铺）

Advanced Usage

扩展方法

考虑一下从单个URL创建快速纹理表面的扩展方法String.toSeamlessTexture()。

/// 链接到Tatsuro Yamashita专辑封面的URL。
const tatsu = 'https://spice.eplus.jp/images/KefMrp9J1bM7NGRvFqK64ZNOfbTGUDKVCC8ePaiKB1cOcOJz1rEN3DQUJMBZhQJ2.jpg';

/// 扩展方法
final extensionExamples = [
  tatsu.toSeamlessTexture(),
  tatsu.toSeamlessTexture(scale: 10),
  InteractiveViewer(
    maxScale: 150,
    child: tatsu.toSeamlessTexture(scale: 75),
  );
];

预期输出类似于以下内容：

除了'https://url.to/image.png'.toSeamlessTexture()，还可以尝试：

'https://url.to/image.png'.toSeamlessRow();
'https://url.to/image.png'.toSeamlessColumn();

'res/image.gif'.toSeamlessTexture(isAsset: true, package: 'package_name');

File.toSeamlessColumn();
Uint8List.toSeamlessRow();