美文网首页
Flutter图片裁剪代码

Flutter图片裁剪代码

作者: Hamiltonian | 来源:发表于2024-06-03 17:02 被阅读0次
Simulator Screenshot - iPhone 15 Pro - 2024-06-04 at 17.01.47.png
import 'package:flutter/material.dart';

class ClipImage extends StatelessWidget {
  final String imagePath;
  final Offset startOffset;
  final double clipWidth;
  final double clipHeight;

  const ClipImage({
    Key? key,
    required this.imagePath,
    required this.startOffset,
    required this.clipWidth,
    required this.clipHeight,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: clipWidth,
      height: clipHeight,
      child: ClipRect(
        clipper: _ImageClipper(
          clipWidth: clipWidth,
          clipHeight: clipHeight,
        ),
        child: Stack(
          children: [
            Positioned(
              left: -startOffset.dx,
              top: -startOffset.dy,
              child: Image.asset(
                imagePath,
                fit: BoxFit.none,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _ImageClipper extends CustomClipper<Rect> {
  final double clipWidth;
  final double clipHeight;

  _ImageClipper({
    required this.clipWidth,
    required this.clipHeight,
  });

  @override
  Rect getClip(Size size) {
    // 从左上角(0, 0)开始,创建指定宽度和高度的矩形裁剪区域
    return Rect.fromLTWH(0, 0, clipWidth, clipHeight);
  }



  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    // 如果裁剪区域的尺寸发生变化,则需要重新裁剪
    if (oldClipper is _ImageClipper) {
      return clipWidth != oldClipper.clipWidth || clipHeight != oldClipper.clipHeight;
    }
    return false;
  }
}

相关文章

  • Flutter裁剪图片

    最近在学习中需要用到裁剪图片,记录一下解决方法 思路: 使用canvas的drawImageRect()方法,对I...

  • flutter 图片裁剪

    上次做了图片裁剪的需求没有记录, 最近遇到了身份证裁剪的需求又忘记处理方法了,处理完毕后记录一下 需求: 根据形状...

  • flutter 图片裁剪、编辑

    //产品需求是 拍照和相册选择照片 然后进入照片编辑页面 完成编辑上传图片 用到的库有image_picker 实...

  • Flutter实现图片裁剪

    在这一篇中我们来实现图片的裁剪 这里我们使用到canvas的drawImageRect()方法 第一个参数Imag...

  • Quartz 2D绘图 (2)再遇

    图片裁剪 直接裁剪图片 裁剪思路:绘制一个已经裁剪好的圆形的图形上下文将图片绘制上去就可以了 代码 保存到相册和沙...

  • flutter图片裁剪后上传

    裁剪图片 这里推荐flutter 插件:simple_image_crop。用法非常简单,支持圆形和方形选区,支持...

  • Flutter 图片裁剪(相机,相册)

    今天用到了一个特别好用的图片裁剪库,在这里分享一下Copper 先看一下效果图 这个裁剪库还是蛮强的,有左右旋转,...

  • Flutter(二十)ClipOval图片裁剪

    flutter提供的一个裁剪widget

  • 裁剪圆环图片

    裁剪圆环图片 app的头像很多都是圆形的,所以需要把一张普通的图片刻意裁剪成圆形// 核心代码void CGCon...

  • 基于 vue-cropper-elementUI 截图上传插件

    图片裁切 图片裁剪 ...

网友评论

      本文标题:Flutter图片裁剪代码

      本文链接:https://www.haomeiwen.com/subject/hwyeqjtx.html