A custom ImageView that is used to cover the surface of other view like a scratch card, user can swipe the mulch to see the view below.

Jaylen Bian

Last update: Dec 17, 2022

Related tags

Image MCScratchImageView

Overview

MCScratchImageView

GIF Showcase

Requirments

iOS 8.0+ Xcode 7.2+ Swift 4.0

Installation

CocoaPods

pod "MCScratchImageView"

Manually

Just drag MCScratchImageView.swift to the project tree

Usage

Import

If you use CocoaPods, first import MCScratchImageView

import MCScratchImageView

Define the class variables

var scratchImageView: MCScratchImageView!

Initialize it

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

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)

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()
        }
    }
    
}

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()

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, [email protected]

License

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

You might also like...

CameraButton - A simple camera button that can be used for photo and video capturing

CameraButton A simple camera button that can be used for photo and video capturi

9 Dec 22, 2022

Use Swift to pack ambiguous image that display differently on Apple and Other devices

Aibmoe Use Swift to pack ambiguous image that display differently on Apple and O

2 Feb 3, 2022

NavigationCoordinator acts as a coordinator for NavigationView in SwiftUI. You can use pushView, popView, popToView, popToRootView as you can in traditional UIKit

NavigationCoordinator NavigationCoordinator acts as a coordinator for NavigationView. You can use pushView, popView, popToView, popToRootView in Swift

3 Aug 3, 2022

Microblog-ref-app - A Twitter like social media app that users can share their moments

HiPlace - iOS Table of Contents Introduction HMS Services Getting Started Suppor

2 Jan 3, 2022

An instagram-like image editor that can apply preset filters passed to it and customized editings to a binded image.

CZImageEditor CZImageEditor is an instagram-like image editor with clean and intuitive UI. It is pure swift and can apply preset filters and customize

8 Dec 16, 2022

📸 iMessage-like, Image Picker Controller Provides custom features.

RAImagePicker Description RAImagePicker is a protocol-oriented framework that provides custom features from the built-in Image Picker Edit. Overview O

14 Aug 18, 2022

SharkCardScan is a Credit/Debit Card scanner built using Apple's Vision Framework.

iOS Credit/Debit card scanner, built using Apple's Vision Framework.

23 Nov 16, 2022

Scanner for decks of cards with bar codes printed on card edges

The Nettle Magic Project This deck of cards has a bar code printed on the edge of each card. Scanning these bar codes would reveal where every card is

793 Dec 14, 2022

MemojiView - MemojiView works by having a TextView behind the actual View for user input

MemojiView Since there is no official API for using the users Memoji's i have built a simple view to retrieve them and use them to your liking. Memoji

9 Nov 6, 2022

Comments

Not working when Background view Dynamically

Hey @Minecodecraft thanks for the lib . Im new to swift , and try to run this lib through react-native.

Problem : the scratch action doesn't work as soon as i add backgroundView ( mainImageView) .

Here is my Example :

class ScratchCardView: UIView {
  
  
  override init(frame: CGRect){
    super.init(frame:frame)
       
    let mainImageView = UIImageView(image:UIImage(named:"pin.jpg"))
    
    mainImageView.frame = CGRect(x:0,y:0,width:300,height:300)

    
    var scratchImageView: MCScratchImageView!
    scratchImageView = MCScratchImageView(frame:CGRect(x:0,y:0,width:300,height:300))
    scratchImageView.setMaskImage(UIImage(named:"pin.jpg")!, spotRadius: 10)
    
    self.addSubview(mainImageView)
    self.addSubview(scratchImageView)
    

  }


}

as soon as I comment self.addSubview(mainImageView) it works !

opened by Kida007 1

Added swift_version to podspec

This will help other library maintainers using this library as a dependency , because there is no other to specify a dependency's swift_version in your own library podspec.

I hope this gets merged soon .

opened by Kida007 0

Owner

Jaylen Bian

Leetcoding && fluttering

GitHub

FlaneurImagePicker is an iOS image picker that allows users to pick images from different sources (ex: user's library, user's camera, Instagram...). It's highly customizable.

FlaneurImagePicker is a highly customizable iOS image picker that allows users to pick images from different sources (ex: device's library, device's c

17 Feb 2, 2020

A custom ImageView that is used to cover the surface of other view like a scratch card, user can swipe the mulch to see the view below.

Related tags

Overview

MCScratchImageView

GIF Showcase

Requirments

Installation

CocoaPods

Manually

Usage

Import

Define the class variables

Initialize it

Set the mask image & radius

Implement the delegate methods:

API declaration

Example Project

Tips

Author

License

You might also like...

CameraButton - A simple camera button that can be used for photo and video capturing

Use Swift to pack ambiguous image that display differently on Apple and Other devices

NavigationCoordinator acts as a coordinator for NavigationView in SwiftUI. You can use pushView, popView, popToView, popToRootView as you can in traditional UIKit

Microblog-ref-app - A Twitter like social media app that users can share their moments

An instagram-like image editor that can apply preset filters passed to it and customized editings to a binded image.

📸 iMessage-like, Image Picker Controller Provides custom features.

SharkCardScan is a Credit/Debit Card scanner built using Apple's Vision Framework.

Scanner for decks of cards with bar codes printed on card edges

MemojiView - MemojiView works by having a TextView behind the actual View for user input

Comments

Not working when Background view Dynamically

Added swift_version to podspec

Owner

Jaylen Bian

ThreeDCardView - Library that you can see images with a 3D card 🌌

A apple music cover picture shadow style image library

API surface for Swift plug-ins using the Swift Plugin Manager

add text(multiple line support) to imageView, edit, rotate or resize them as you want, then render the text on image

Rounded async imageview downloader lightly cached and written in Swift

How to create a circular and rectangular ImageView with similar image?

DG Zoomable ImageView

ImageView - Component for loading and displaying different images aka SVG/PNG/JPG/JPEG

Photo Browser / Viewer inspired by Facebook's and Tweetbot's with ARC support, swipe-to-dismiss, image progress and more

FlaneurImagePicker is an iOS image picker that allows users to pick images from different sources (ex: user's library, user's camera, Instagram...). It's highly customizable.