Signature_pad: Wie arbeitet man mit 100 % Breite?

Bitte seien Sie deutlicher…

Bitte seien Sie deutlicher…

Ich hatte die Leinwand an den Handheld gedacht, die Breite war perfekt gewesen.

Aber sie entschieden sich für ein Tablet, so dass die Breite kleiner wurde.

Siehe das Bild:

So machen Sie den Signaturbildschirm reaktionsschnell (Breite 100 %) auf jede Bildschirmgröße.

Dankeschön.

(Ich kann dein Bild nicht sehen)
Hat der Democode auf Ihrem Tablet funktioniert?

Habe das gleiche Problem.
Ich habe die Canvas-Breite 100 % Höhe 100 % im mobilen Bildschirm eingestellt
Dann funktioniert die Leinwand nicht richtig

Reden ist billig. Zeigen Sie uns den Code.

Verwenden Sie div Wrap canvas . Verwenden Sie dann ResizeObserver hören Sie die Größenänderung von div an. an canvas .

Es ist komplex, aber funktioniert. Ich verwende useMeasure von react-use . Siehe unten:

import React from 'react'
import { useMeasure } from 'react-use'

export default () => {
    const [containerRef, { width, height }] = useMeasure();

    return (
        <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
            <canvas width={width} height={height} />
        </div>
    )
}