longitachi / ZLPhotoBrowser

Wechat-like image picker. Support select photos, videos, gif and livePhoto. Support edit image and crop video. 微信样式的图片选择器,支持预览/相册内拍照及录视频、拖拽/滑动选择,编辑图片/视频,支持多语言国际化等功能;
MIT License
4.72k stars 953 forks source link

裁剪添加向右旋转需要改哪些代码呢 #780

Closed jaylanlu closed 1 year ago

jaylanlu commented 1 year ago

我添加了一个顺时针旋转的按钮改了库里面原来的方法,可是旋转有问题 第一张图是旋转之前的,第二张是旋转之后的 IMG_2947 IMG_2948

isLeft为false时顺时针旋转 private func rotateAction(isLeft: Bool) { guard !isRotating else { return } angle = angle + (isLeft ? -90 : 90) if angle == -360 || angle == 360 { angle = 0 }

    isRotating = true

    let animateImageView = UIImageView(image: editImage)
    animateImageView.contentMode = .scaleAspectFit
    animateImageView.clipsToBounds = true
    let originFrame = view.convert(containerView.frame, from: mainScrollView)
    animateImageView.frame = originFrame
    view.addSubview(animateImageView)

    if selectedRatio.whRatio == 0 || selectedRatio.whRatio == 1 {
        // 自由比例和1:1比例,进行edit rect转换

        // 将edit rect转换为相对edit image的rect
        let rect = convertClipRectToEditImageRect()
        // 旋转图片
        editImage = editImage.zl.rotate(orientation: isLeft ? .left : .right)
        // 将rect进行旋转,转换到相对于旋转后的edit image的rect
        editRect = CGRect(x: rect.minY, y: editImage.size.height - rect.minX - rect.width, width: rect.height, height: rect.width)
    } else {
        // 其他比例的裁剪框,旋转后都重置edit rect

        // 旋转图片
        editImage = editImage.zl.rotate(orientation: isLeft ? .left : .right)
        calculateClipRect()
    }

    imageView.image = editImage
    layoutInitialImage()

    let toFrame = view.convert(containerView.frame, from: mainScrollView)
    let transform = CGAffineTransform(rotationAngle: isLeft ? (-1 * CGFloat.pi / 2) : (CGFloat.pi / 2))
    overlayView.alpha = 0
    containerView.alpha = 0
    UIView.animate(withDuration: 0.3, animations: {
        animateImageView.transform = transform
        animateImageView.frame = toFrame
    }) { _ in
        animateImageView.removeFromSuperview()
        self.overlayView.alpha = 1
        self.containerView.alpha = 1
        self.isRotating = false
    }

    generateThumbnailImage()
    clipRatioColView.reloadData()
}
longitachi commented 1 year ago

基于你现在的代码,做如下修改

// 将rect进行旋转,转换到相对于旋转后的edit image的rect
// 向左旋转用这个
editRect = CGRect(x: rect.minY, y: editImage.size.height - rect.minX - rect.width, width: rect.height, height: rect.width)
// 向右旋转用这个
editRect = CGRect(x: editImage.size.width - rect.maxY, y: rect.minX, width: rect.height, height: rect.width)
jaylanlu commented 1 year ago

谢谢大佬,可是顺时针旋转裁减之后到编辑页面显示会有问题,但是逆时针不会,大佬知道原因出在哪里吗 IMG_2949

jaylanlu commented 1 year ago

还有,我发现顺时针旋转裁剪之后再次点击裁剪,选中的显示图片是没有旋转

jaylanlu commented 1 year ago

图片没有旋转解决了

longitachi commented 1 year ago

ZLEditImageViewController 中关于 angle 的计算地方你可以看下

jaylanlu commented 1 year ago

右旋转改了之后是好了,可是添加文字标注的时候,图如果倒过来了,会发现手势往上的时候文字往下移动

longitachi commented 1 year ago

这个改的有点多,等我后面有空了提交下代码吧,之前贴纸的角度都是按照 逆时针旋转做的,没适配顺时针旋转

jaylanlu commented 1 year ago

好的,谢谢大佬

longitachi commented 1 year ago

https://github.com/longitachi/ZLPhotoBrowser/commit/4cc85fb27ab478e78b646c827fc67a3fb6281aea 贴纸相关角度计算已优化