Signature_pad: Bagaimana cara mengoperasikan dengan lebar 100%?

Mohon lebih tegas…

Mohon lebih tegas…

Saya telah membuat kanvas memikirkan genggam, lebarnya telah sempurna.

Namun mereka memutuskan untuk menggunakan tablet, sehingga lebarnya semakin mengecil.

Lihat gambar:

Cara membuat layar tanda tangan responsif (Lebar 100%) ke ukuran layar apa pun.

Terima kasih.

(Saya tidak dapat melihat gambar Anda)
Apakah kode demo berfungsi di tablet Anda?

Punya masalah yang sama.
Saya mengatur lebar kanvas 100% tinggi 100% di layar ponsel
Maka kanvas tidak berfungsi dengan benar

Berbicara itu murah. Tunjukkan kami kodenya.

Gunakan div bungkus canvas . Kemudian gunakan ResizeObserver dengarkan perubahan ukuran div . lulus ke canvas .

Ini rumit tetapi berhasil. Saya menggunakan useMeasure dari react-use . Lihat di bawah:

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>
    )
}