VueSignaturePad not display properly until browser resize about vue-signature-pad HOT 14 CLOSED

I ran into this same issue and the best solution I found was to call the resizeCanvas in the onBegin function

<VueSignaturePad :options="{onBegin: () => {$refs.signaturePad.resizeCanvas()}}" ref="signaturePad"/>

from vue-signature-pad.

I got the same experience and found one of the solutions.

 this.$nextTick(function () {
            this.$refs.signaturePad.resizeCanvas()
          })

After the event that the screen changes, I called the resize command of the pad and found that the width and height were normally applied.

Write in the hope that it will help you a little. : D

from vue-signature-pad.

@traic - thanks for the info. I did however manage to get it working without needing a custom version.

The signature pad is being used in a navigation drawer, and was being called when the navigation drawer was displayed. However, the navigation drawer also contains Vuetify's v-stepper component, so what I've done is only set the signature pad to display if the v-stepper-step is the showing containing the signature pad.

This is working like a dream!

from vue-signature-pad.

More info (found on Vuetify's discord 'need-help' channel):

toki - 17/04/2018
Because the signature pad uses touch events, it may not work properly under scrollable element (like v-app).
So I just put it into a full screen v-dialog, set scrollable = false and hope it work well.

But it still can't get any touch event unless

• resize the window manually (not suitable for mobile usage)
• try to scroll (yes, it can still scroll with v-dialog + scrollable = false)

Is there a way I could completely turn off scroll on v-dialog or there's other component is suitable for this job?

So I'm going to test some ideas out - if I get something working I'll update this so that it can hopefully help others in the future.

from vue-signature-pad.

Isolated the issue down to these two lines causing the canvas to become zero in width and height:

var canvas = document.getElementById('signature-pad')

// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() {
    // When zoomed out to less than 100%, for some very strange reason,
    // some browsers report devicePixelRatio as less than 1
    // and only part of the canvas is cleared then.
    var ratio =  Math.max(window.devicePixelRatio || 1, 1)
    canvas.width = canvas.offsetWidth * ratio
    canvas.height = canvas.offsetHeight * ratio
    canvas.getContext("2d").scale(ratio, ratio)
}

//window.onresize = resizeCanvas
//resizeCanvas()

Just comment them out in the vue component script, they might be wired a little differently from what saw. I ended up building my own component with signature-pad, but ran into this same issue. this is the culprit.

from vue-signature-pad.

@TheRagingLoser can you reproduce this problem on CodeSandbox? In #54 had a similar problem, but I can't reproduce.

from vue-signature-pad.

@neighborhood999 Thanks for your quick response. It seems identical to the issue in #54. I have tried in CodeSandbox and it seemed to work fine. I'm thinking it may have something to do with the Vuetify dialog box I am placing it in. I will do some test with it on the page without the dialog box. P.S. thanks for the great work on this compoinent.

from vue-signature-pad.

An interesting thing I've noticed (I'm also using Vuetify's framework) is that when the component is displayed the canvas width and height are both 0, after the browser resize these attributes then have values.
Before resizing browser:

After resizing browser window:

Did you manage to solve this @TheRagingLoser ?

from vue-signature-pad.

Further investigation into this shows that if the component is used directly on a page, then the width and height attributes are populated correctly. If the component is called in a navigation drawer (or similar, where the 'layer' its being used on isn't rendered initially) then the width and height attributes are set to 0.

from vue-signature-pad.

I can confirm @Leemanbok 's solution worked for me. I placed it within my display watched property (used with v-show). Placing it on the mounted section does not work.

watch: {
            display: function(value){
                this.displayDialog = value;
                this.$nextTick(function () {
                    this.$refs.signaturePad.resizeCanvas();
                    this.$refs.signaturePad.fromDataURL(this.editedItem._signature);
                }
           };
        },

from vue-signature-pad.

I solved it, adding in the mounted.

VueSignaturePad#signature(
width="250px"
height="250px"
ref="signaturePad"
:options="options"
v-show="isShow"
)

data() {
return {
options: {
penColor: "#c0f"
},
isShow: false
}
},
methods : {
iniciarcomponente() {
this.showWithResize()
},
showWithResize() {
this.isShow = true
this.$refs.signaturePad.$refs.signaturePadCanvas.width = 250
this.$refs.signaturePad.$refs.signaturePadCanvas.height = 250
},
},
mounted () {
this.initcomponent()
},

from vue-signature-pad.

I do this, works if you set the signaturePad width to a percentage like 100%

mounted() {
      var sig = this.$refs.signaturePad.$el
      sig.querySelector('canvas').setAttribute('width', sig.offsetWidth)
      sig.querySelector('canvas').setAttribute('height', sig.offsetHeight)
}

from vue-signature-pad.

If you are using v-dialog in vuetify, you need to use eager prop in your dialog.
The problem is when your vue-signature-pad is loaded, v-dialog size was not fixed.
So v-dialog set width and height zero.
For fixing this problem, I spent around 2hours holly..
I hope other people do not waste of time like me

from vue-signature-pad.

I ran into this same issue and the best solution I found was to call the resizeCanvas in the onBegin function

<VueSignaturePad :options="{onBegin: () => {$refs.signaturePad.resizeCanvas()}}" ref="signaturePad"/>

This appears to work for the situation where you would like to start drawing. However, if you've already provided data and wish to regenerate it, then you'll run into the same rendering issue. I've been able to solve this using the following workaround:

// don't forget to set the data using:
// this.$refs.signaturePad.fromData(...);
// set a timeout of 0ms to force a render
setTimeout(() => this.$refs.signaturePad.resizeCanvas(), 0);

By setting the timer on 0, you'll notice no delay, but it will force the pad to render the signature.

from vue-signature-pad.