Image Eraser with Progress Tracking

Useful Resources
, , ,
1

Heyo! This project demonstrates an interactive image eraser tool using PlayCanvas.

https://playcanvas.com/editor/scene/2039940

It allows users to erase parts of an image using mouse or touch input and tracks the percentage of the image that has been erased. The main features of this project include:

  1. Image Loading and Display: An image texture is loaded and displayed on a UI element. The image is drawn onto an offscreen canvas to facilitate pixel manipulation.
  2. Erasing Functionality: Users can erase portions of the image by clicking and dragging the mouse or using touch input on mobile devices. The erasing action removes pixels within a specified radius, creating a transparent area where the image is erased.
  3. Real-Time Progress Tracking: The project continuously calculates and displays the percentage of the image that has been erased. This is achieved by counting the fully transparent pixels on the canvas and updating a text element with the current erased percentage.
  4. Multi-Platform Support: The project supports both desktop and mobile platforms by handling mouse and touch events appropriately.

How It Works:

  1. Initialization: When the script is initialized, it checks for the presence of the required image asset and UI element. It then creates an offscreen canvas and draws the loaded image onto it.
  2. Event Binding: The script binds mouse and touch events to handle user input for erasing parts of the image.
  3. Erasing Process: When a user interacts with the image, the script calculates the position and erases a circular area around the input point on the canvas. The erased area becomes transparent.
  4. Percentage Calculation: The script updates the erased percentage by analyzing the alpha channel of the canvas pixels. It counts the fully transparent pixels and calculates the erased percentage, which is then displayed on a text element.
1 Like
2

Hi @Firas_El_Jerdy and welcome!

Thanks for sharing, I think this can be very useful!

I suggest placing lines 67 to 69 in a statement like below, to avoid errors.

if (this.app.touch) {
    this.app.touch.on(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
    this.app.touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
    this.app.touch.on(pc.EVENT_TOUCHEND, this.onTouchEnd, this);
}