Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hoseungme/scratchable
Hide your content, scratch to see it.
https://github.com/hoseungme/scratchable
canvas scratch-card ui web
Last synced: 2 months ago
JSON representation
Hide your content, scratch to see it.
- Host: GitHub
- URL: https://github.com/hoseungme/scratchable
- Owner: hoseungme
- Created: 2023-07-22T14:35:21.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-30T20:50:34.000Z (over 1 year ago)
- Last Synced: 2024-10-03T07:14:43.470Z (4 months ago)
- Topics: canvas, scratch-card, ui, web
- Language: TypeScript
- Homepage:
- Size: 119 KB
- Stars: 27
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# scratchable
https://github.com/HoseungJang/scratchable/assets/39669819/5e3e5e4b-ce97-47b5-877c-d04d8375e843
# Overview
`scratchable` is a scratch card renderer using HTML Canvas. It renders a scratchable canvas element on your content, and provides percentage of scratched pixels.
# Usage
First of all, you should pass `container` to `Scratchable`, which will be overlapped by a scratchable canvas.
```javascript
const container = document.getElementById("container");
const scratchable = new Scratchable({
container,
/* ... */
});
```
```html
/* CONTENT */
```
Or in React,
```typescript
const container = ref.current;
const scratchable = new Scratchable({
container,
/* ... */
});
```
```tsx
{/* CONTENT */}
```
And then it will render the canvas on your `/* CONTENT */`, when you call `Scratchable.render()`. It returns `Promise`.
```typescript
await scratchable.render();
```
And you can also remove the rendered canvas.
```typescript
scratchable.destroy();
```
This is the basic. Now let's see another required option `background`.
## Background
You should pass `background` to `Scratchable`, which is the color of the rendered canvas.
It has three kinds of type, `single`, `linear-gradient` and `image`.
### Single Background
```typescript
new Scratchable({
/* ... */
background: {
type: "single",
color: "#FA58D0",
},
});
```
https://github.com/HoseungJang/scratchable/assets/39669819/7915c2af-8bbe-43d8-9169-631fd7124b91
### Linear Gradient Background
```typescript
new Scratchable({
/* ... */
background: {
type: "linear-gradient",
gradients: [
{ offset: 0, color: "#FA58D0" },
{ offset: 0.5, color: "#DA81F5" },
{ offset: 1, color: "#BE81F7" },
],
},
});
```
https://github.com/HoseungJang/scratchable/assets/39669819/bef24ef0-2860-4150-9133-35a922950936
### Image Background
```typescript
new Scratchable({
/* ... */
background: {
type: "image",
url: "karina.jpeg",
},
});
```
https://github.com/HoseungJang/scratchable/assets/39669819/8fd80f49-bb3c-4582-af82-b57273e6a8c2
## Radius
You can set radius of a circle which is rendered when you scratch the canvas. Let's compare between 20 and 40.
### 20
```typescript
new Scratchable({
/* ... */
radius: 20,
});
```
https://github.com/HoseungJang/scratchable/assets/39669819/44c38fac-a130-427d-8c8e-874f03e132f1
### 40
```typescript
new Scratchable({
/* ... */
radius: 40,
});
```
https://github.com/HoseungJang/scratchable/assets/39669819/b8421e3b-f79e-4114-a002-0f8c066e1c95
## Scratch Event
You can register a function which will be called when `scratch` event fires. The event fires when an user is scratching the canvas.
```typescript
const handler = (e: ScratchableEvent) => {
/* ... */
};
scratchable.addEventListener("scratch", handler);
scratchable.removeEventListener("scratch", handler);
```
## Scratched Percentage
You can get percentage(0 ~ 1) from `ScratchEvent` above. The percentage is ratio of scratched area to all scratchable area.
```typescript
const handler = (e: ScratchableEvent) => {
if (e.percentage > 0.5) {
scratchable.destroy();
}
};
scratchable.addEventListener("scratch", handler);
```
https://github.com/HoseungJang/scratchable/assets/39669819/877e7224-5311-443e-84d1-be24632f5d21