@@ -16,19 +16,18 @@ export default class SignatureCanvas extends Component {
16
16
onBegin : PropTypes . func ,
17
17
canvasProps : PropTypes . object
18
18
}
19
- constructor ( props ) {
20
- super ( props ) ;
21
-
22
- this . velocityFilterWeight = this . props . velocityFilterWeight || 0.7 ;
23
- this . minWidth = this . props . minWidth || 0.5 ;
24
- this . maxWidth = this . props . maxWidth || 2.5 ;
25
- this . dotSize = this . props . dotSize || function ( ) {
26
- return ( this . minWidth + this . maxWidth ) / 2 ;
27
- } ;
28
- this . penColor = this . props . penColor || "black" ;
29
- this . backgroundColor = this . props . backgroundColor || "rgba(0,0,0,0)" ;
30
- this . onEnd = this . props . onEnd ;
31
- this . onBegin = this . props . onBegin ;
19
+
20
+ static defaultProps = {
21
+ velocityFilterWeight : 0.7 ,
22
+ minWidth : 0.5 ,
23
+ maxWidth : 2.5 ,
24
+ dotSize : ( ) => {
25
+ return ( this . props . minWidth + this . props . maxWidth ) / 2
26
+ } ,
27
+ penColor : 'black' ,
28
+ backgroundColor : 'rgba(0,0,0,0)' ,
29
+ onEnd : ( ) => { } ,
30
+ onBegin : ( ) => { }
32
31
}
33
32
34
33
componentDidMount ( ) {
@@ -48,7 +47,7 @@ export default class SignatureCanvas extends Component {
48
47
let ctx = this . _ctx
49
48
let canvas = this . _canvas
50
49
51
- ctx . fillStyle = this . backgroundColor
50
+ ctx . fillStyle = this . props . backgroundColor
52
51
ctx . clearRect ( 0 , 0 , canvas . width , canvas . height )
53
52
ctx . fillRect ( 0 , 0 , canvas . width , canvas . height )
54
53
this . _reset ( )
@@ -110,9 +109,9 @@ export default class SignatureCanvas extends Component {
110
109
_reset = ( ) => {
111
110
this . points = [ ] ;
112
111
this . _lastVelocity = 0 ;
113
- this . _lastWidth = ( this . minWidth + this . maxWidth ) / 2 ;
112
+ this . _lastWidth = ( this . props . minWidth + this . props . maxWidth ) / 2
114
113
this . _isEmpty = true ;
115
- this . _ctx . fillStyle = this . penColor ;
114
+ this . _ctx . fillStyle = this . props . penColor
116
115
}
117
116
118
117
_handleMouseEvents = ( ) => {
@@ -193,14 +192,14 @@ export default class SignatureCanvas extends Component {
193
192
_strokeBegin = ( ev ) => {
194
193
this . _reset ( )
195
194
this . _strokeUpdate ( ev )
196
- if ( typeof this . onBegin === 'function' ) {
197
- this . onBegin ( ev )
198
- }
195
+ this . props . onBegin ( ev )
199
196
}
200
197
201
198
_strokeDraw = ( point ) => {
202
- var ctx = this . _ctx ,
203
- dotSize = typeof ( this . dotSize ) === 'function' ? this . dotSize ( ) : this . dotSize ;
199
+ let ctx = this . _ctx
200
+ let dotSize = typeof ( this . props . dotSize ) === 'function'
201
+ ? this . props . dotSize ( )
202
+ : this . props . dotSize
204
203
205
204
ctx . beginPath ( ) ;
206
205
this . _drawPoint ( point . x , point . y , dotSize ) ;
@@ -215,9 +214,8 @@ export default class SignatureCanvas extends Component {
215
214
if ( ! canDrawCurve && point ) {
216
215
this . _strokeDraw ( point ) ;
217
216
}
218
- if ( typeof this . onEnd === 'function' ) {
219
- this . onEnd ( ev )
220
- }
217
+
218
+ this . props . onEnd ( ev )
221
219
}
222
220
223
221
_createPoint = ( ev ) => {
@@ -281,8 +279,8 @@ export default class SignatureCanvas extends Component {
281
279
velocity , newWidth ;
282
280
283
281
velocity = endPoint . velocityFrom ( startPoint ) ;
284
- velocity = this . velocityFilterWeight * velocity
285
- + ( 1 - this . velocityFilterWeight ) * this . _lastVelocity ;
282
+ velocity = this . props . velocityFilterWeight * velocity
283
+ + ( 1 - this . props . velocityFilterWeight ) * this . _lastVelocity ;
286
284
287
285
newWidth = this . _strokeWidth ( velocity ) ;
288
286
this . _drawCurve ( curve , this . _lastWidth , newWidth ) ;
@@ -333,7 +331,7 @@ export default class SignatureCanvas extends Component {
333
331
}
334
332
335
333
_strokeWidth = ( velocity ) => {
336
- return Math . max ( this . maxWidth / ( velocity + 1 ) , this . minWidth ) ;
334
+ return Math . max ( this . props . maxWidth / ( velocity + 1 ) , this . props . minWidth )
337
335
}
338
336
339
337
render ( ) {
0 commit comments