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

Canvas should use scale to fit within the screen #34

Closed jasny closed 7 years ago

jasny commented 7 years ago 
<signature-pad accept="accept" clear="clear" height="300" width="500"></signature-pad>

The canvas should height and width if the container allows it. However is the container is smaller than the specified dimensions, for example because of a small viewport (on a mobile phone) or because of a small modal, the canvas should be scaled down to fit the container using canvas.getContext("2d").scale(). It should respect the aspect ratio.

The container <div> should not have a fixed width and height, but have a max-width and max-height instead. The container should always fit within the container <div>, but maintaining it's aspect ratio (so the container is a bounding box).

Currently there is an $timeout of 500 milliseconds. This is completely arbitrary. Also there is callback for the window.resize event, but that also doesn't cut it, because there are other reasons why the container may change in size. The plugin should simply always make sure that the canvas fits (using $interval or some better way).

jasny commented 7 years ago

This should solve #11 #16 #19 #27 #31 #33

btcpbordeaux commented 7 years ago

@jasny @KillaBee1985 This update, I believe, broke the directive. See issue #38 for reference and fix. It looks like it was a commit from @KillaBee1985 (see the following commit https://github.com/legalthings/angular-signature/commit/df28083f41b557184f340cb26765881b8eb253ec )

jasny commented 7 years ago

@btcpbordeaux this is already fixed. See #36