Signature_pad: 100% 너비로 작동하는 방법은 무엇입니까?

좀 더 명시해주세요...

좀 더 명시해주세요...

핸디형으로 생각해서 캔버스를 만들었는데, 너비가 딱 맞았습니다.

그러나 그들은 태블릿을 사용하기로 결정하여 너비가 작아졌습니다.

이미지 참조:

서명 화면을 모든 화면 크기에 반응하도록(너비 100%) 만드는 방법.

감사합니다.

(나는 당신의 이미지를 볼 수 없습니다)
데모 코드가 태블릿에서 작동했습니까?

같은 문제가 있습니다.
모바일 화면에서 캔버스 너비 100% 높이 100%로 설정했습니다.
그러면 캔버스가 제대로 작동하지 않습니다.

이야기는 싸다. 코드를 보여주세요.

div wrap canvas . 그런 다음 ResizeObserver 사용하여 div 크기 변경을 듣습니다. canvas 합니다.

복잡하지만 작동했습니다. useMeasure 중 react-use 합니다. 아래 참조:

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