Skip to content

Commit e113bac

Browse files
Masth0Masth0
committedJun 18, 2020
Update doc.
1 parent 5d3869a commit e113bac

File tree

6 files changed

+12646
-4
lines changed

6 files changed

+12646
-4
lines changed
 

‎docs/.vuepress/components/brush-line.vue

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<template>
2+
<div>
3+
<div class="sc__wrapper">
4+
<!-- scratchcard -->
5+
<div id="js--sc--container" class="sc__container">
6+
<!-- background image insert here by scratchcard-js -->
7+
<!-- canvas generate here -->
8+
</div>
9+
<!-- infos -->
10+
<div class="sc__infos">
11+
<p>0%</p>
12+
</div>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<style lang="scss">
18+
.sc__inner {
19+
position: relative;
20+
top: 0;
21+
left: 0;
22+
width: 100%;
23+
height: 100%;
24+
}
25+
.sc__wrapper {
26+
display: block;
27+
width: 100%;
28+
height: 300px;
29+
max-width: 300px;
30+
margin: 0 auto;
31+
border: 5px solid white;
32+
}
33+
34+
.sc__container {
35+
position: relative;
36+
overflow: hidden;
37+
height: 300px;
38+
max-width: 300px;
39+
}
40+
41+
.sc__container > img {
42+
position: relative;
43+
top: 0;
44+
left: 0;
45+
width: 100%;
46+
height: auto;
47+
}
48+
49+
.sc__container canvas {
50+
position: absolute;
51+
top: 0;
52+
left: 0;
53+
width: 100%;
54+
height: auto;
55+
}
56+
57+
.sc__infos {
58+
text-align: center;
59+
height: 40px;
60+
line-height: 40px;
61+
margin-top: 5px;
62+
font-weight: bold;
63+
font-size: 18px;
64+
}
65+
</style>
66+
67+
<script>
68+
export default {
69+
mounted() {
70+
import('../../../build/scratchcard.min').then(() => {
71+
const scContainer = document.getElementById('js--sc--container')
72+
const scInfos = document.querySelector('.sc__infos');
73+
const sc = new ScratchCard('#js--sc--container', {
74+
scratchType: SCRATCH_TYPE.LINE,
75+
containerWidth: scContainer.offsetWidth,
76+
containerHeight: 300,
77+
imageForwardSrc: '../images/scratchcard.jpg',
78+
imageBackgroundSrc: '../images/result.png',
79+
htmlBackground: '',
80+
clearZoneRadius: 20,
81+
callback: function () {
82+
alert('Now the window will reload !')
83+
window.location.reload()
84+
}
85+
})
86+
87+
// Init
88+
sc.init().then(() => {
89+
sc.canvas.addEventListener('scratch.move', () => {
90+
let percent = sc.getPercent().toFixed(0);
91+
scInfos.innerHTML = percent + '%';
92+
console.log(percent)
93+
})
94+
}).catch((error) => {
95+
// image not loaded
96+
alert(error.message);
97+
});
98+
});
99+
}
100+
}
101+
</script>

‎docs/.vuepress/config.js

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ module.exports = {
1717
text: 'Brushes',
1818
ariaLabel: 'Brushes menu',
1919
items: [
20+
{ text: 'Line', link: '/brushes/line/' },
2021
{ text: 'Spray', link: '/brushes/spray/' },
2122
{ text: 'Circle', link: '/brushes/circle/' },
2223
{ text: 'Brush', link: '/brushes/brush/' },

‎docs/brushes/line.md

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
# Line
2+
3+
<brush-line></brush-line>
4+
5+
## html
6+
```html
7+
<div class="sc__wrapper">
8+
<!-- scratchcard -->
9+
<div id="js--sc--container" class="sc__container">
10+
<!-- background image insert here by scratchcard-js -->
11+
<!-- canvas generate here -->
12+
</div>
13+
<!-- infos -->
14+
<div class="sc__infos">
15+
<!-- percent -->
16+
</div>
17+
</div>
18+
```
19+
20+
## css
21+
```css
22+
.sc__inner {
23+
position: relative;
24+
top: 0;
25+
left: 0;
26+
width: 100%;
27+
height: 100%;
28+
}
29+
.sc__wrapper {
30+
display: block;
31+
width: 100%;
32+
height: 300px;
33+
max-width: 300px;
34+
margin: 0 auto;
35+
border: 5px solid white;
36+
}
37+
38+
.sc__container {
39+
position: relative;
40+
overflow: hidden;
41+
height: 300px;
42+
max-width: 300px;
43+
}
44+
45+
.sc__container > img {
46+
position: relative;
47+
top: 0;
48+
left: 0;
49+
width: 100%;
50+
height: auto;
51+
}
52+
53+
.sc__container canvas {
54+
position: absolute;
55+
top: 0;
56+
left: 0;
57+
width: 100%;
58+
height: auto;
59+
}
60+
61+
.sc__infos {
62+
text-align: center;
63+
height: 40px;
64+
line-height: 40px;
65+
margin-top: 5px;
66+
font-weight: bold;
67+
font-size: 18px;
68+
}
69+
```
70+
## Javascript
71+
```js{4,10}
72+
const scContainer = document.getElementById('js--sc--container')
73+
const scInfos = document.querySelector('.sc__infos');
74+
const sc = new ScratchCard('#js--sc--container', {
75+
scratchType: SCRATCH_TYPE.LINE,
76+
containerWidth: scContainer.offsetWidth,
77+
containerHeight: 300,
78+
imageForwardSrc: '/images/scratchcard.jpg',
79+
imageBackgroundSrc: '/images/result.png',
80+
htmlBackground: '',
81+
clearZoneRadius: 20,
82+
nPoints: 0,
83+
pointSize: 0,
84+
callback: function () {
85+
alert('Now the window will reload !')
86+
window.location.reload()
87+
}
88+
})
89+
90+
// Init
91+
sc.init().then(() => {
92+
sc.canvas.addEventListener('scratch.move', () => {
93+
let percent = sc.getPercent().toFixed(0);
94+
scInfos.innerHTML = percent + '%';
95+
console.log(percent)
96+
})
97+
}).catch((error) => {
98+
// image not loaded
99+
alert(error.message);
100+
});
101+
```

‎docs/readme.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,18 @@ import 'scratchcard-js';
1818
```
1919

2020
## Configuration
21-
See the SCRATCH_TYPES in action: [Spray](), [Circle](/brushes/circle), [Brush]()
21+
See the SCRATCH_TYPES in action: [Line](/brushes/line), [Spray](/brushes/spray), [Circle](/brushes/circle), [Brush](/brushes/brush)
2222
| Name | Type | Default value | Comment |
2323
|---|---|---|---|
24-
| **scratchType** | SCRATCH_TYPE | SPRAY | Possibles values : SPRAY, CIRCLE, BRUSH |
24+
| **scratchType** | SCRATCH_TYPE | LINE | Possibles values : LINE, SPRAY, CIRCLE, BRUSH |
2525
| **containerWidth** | number | 100 | |
2626
| **containerHeight** | number | 100 | |
2727
| **brushSrc** | string | "" | For SCRATCH_TYPE.BRUSH |
2828
| **imageForwardSrc** | string | "" | |
2929
| **imageBackgroundSrc** | string | "" | |
3030
| **htmlBackground** | string | "" | <br> ``` `<p>Html-content<p>` ``` |
3131
| **callback** | function | function() { alert('done.'); } | |
32-
| **clearZoneRadius** | number | 0 | For SCRATCH_TYPE.CIRCLE |
32+
| **clearZoneRadius** | number | 0 | For SCRATCH_TYPE.CIRCLE and SCRATCH_TYPE.LINE |
3333
| **nPoints** | number | 30 | For SCRATCH_TYPE.SPRAY |
3434
| **pointSize** | number | 4 | For SCRATCH_TYPE.SPRAY |
3535

0 commit comments

Comments
 (0)
Failed to load comments.