自定义 ImageView,用于覆盖其他视图的表面,如刮刮卡,用户可以滑动覆盖物以查看下面的视图

MCScratchImageView


动图展示

展示1

Showcase2


Requirments

iOS 8.0+
Xcode 7.2+
Swift 4.0

Installation

CocoaPods

pod "MCScratchImageView"
Ruby

Manually

Just drag to the project treeMCScratchImageView.swift

Usage

Import

If you use CocoaPods, first import MCScratchImageView

import MCScratchImageView
Swift

Define the class variables

var scratchImageView: MCScratchImageView!
Swift

Initialize it

// init()
scratchImageView = MCScratchImageView()
// init(frame:)
scratchImageView = MCScratchImageView(frame: yourRect)
Swift

Or use StoryBoard.

Set the mask image & radius

// use default touch point radius
scratchImageView.setMaskImage(yourUIImage)
// use custom touch point radius
scratchImageView.setMaskImage(yourUIImage, spotRadius: 100)
Swift

Implement the delegate methods:

// set the delegate
scratchImageView.delegate = ***

/* ... */

// implement the MCScratchImageViewDelegate method
extension YourController: MCScratchImageViewDelegate {
    
    func mcScratchImageView(_ mcScratchImageView: MCScratchImageView, didChangeProgress progress: CGFloat) {
        print("Progress did changed: " + String(format: "%.2f", progress))
        if (progress >= 0.8) {
            mcScratchImageView.scratchAll()
        }
    }
    
}
Swift

API declaration

// current scratched progress
public var progress: CGFloat
// Determin the radius of the touch point
private(set) var spotRadius: CGFloat = 45.0

// set the mask image & radius
public func setMaskImage(_ image: UIImage)
public func setMaskImage(_ image: UIImage, spotRadius: CGFloat)

// scratch all mask fields
public func scratchAll()
Swift

Example Project

In "Example" folder.

Tips

  • Don't set the scratchImageView.image directlly, you need to use setMaskImage(paras) to set the mask image.
  • Don't set the touch point radius (var spotRadius: CGFloat) directlly.
  • The contentMode should use default resize mode.

Author

Minecode, minecoder@163.com

License

MCScratchImageView is available under the MIT license. See the LICENSE file for more info.

GitHub

https://github.com/Minecodecraft/MCScratchImageView