search

legalthings / angular-signature

HTML5 canvas based smooth signature drawing as angularJS directive (http://szimek.github.io/signature_pad/)
MIT License
105 stars 91 forks source link

support multiple units of measurement for width/height #7 #57

Closed donalmurtagh closed 7 years ago

donalmurtagh commented 7 years ago

Currently it seems that only pixel widths/heights are allowed in the form definition, e.g.

width: 100,
height: 100

To support responsive layouts, it would be helpful if other units are supported, e.g.

width: '50%',
height: '50%'
jasny commented 7 years ago

The size you specify is the size that the output image is going to be. Percentages doesn't make sense here.

The signature pad will scale down to fit the available width. So if you set the size to something 1024x1024 and set add width: 50% to the style of the containing div, the pad will have a width of 50% of the screen. The output image will be 1024 by 1024 pixels.

Check out the demo, which showcases this.

donalmurtagh commented 7 years ago

Check out the demo, which showcases this.

I don't think the demo does showcase this, because no matter what size you choose for the signature pad, the size of the area you sign in (the box with the brown border) is always the same as the size of the generated signature image (the box with the blue border).

Changing the size of the signature pad only seems to affect the width of the element (with the red border) that contains the signature pad.

screen shot

jasny commented 7 years ago

@donalmurtagh The pad will only shrink, never grow. You need to increase the width and height attributes.