Signature_pad: كيف تعمل بعرض 100٪؟

يرجى أن تكون أكثر صراحة ...

يرجى أن تكون أكثر صراحة ...

كنت قد جعلت القماش يفكر في الجهاز المحمول ، كان العرض مثاليًا.

لكنهم قرروا استخدام جهاز لوحي ، لذلك أصبح العرض أصغر.

انظر الصورة:

كيفية جعل شاشة التوقيع تستجيب (العرض 100٪) لأي حجم شاشة.

شكرا لك.

(لا استطيع ان ارى صورتك)
هل عمل الرمز التجريبي على جهازك اللوحي؟

لديك نفس المشكلة.
قمت بتعيين عرض اللوحة القماشية بنسبة 100٪ وارتفاعها بنسبة 100٪ في شاشة الهاتف المحمول
ثم اللوحة القماشية لا تعمل بشكل صحيح

كلام رخيص. أظهر لنا الكود.

استخدم div wrap canvas . ثم استخدم تغيير الحجم ResizeObserver listen 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>
    )
}