Signature_pad: استخدام مشكلة تحجيم

راجع للشغل ، يتعلق الأمر بـ window.devicePixelRatio ليس هو نفسه لسبب ما.

ما زلت تحقق ، أعتقد أنها قد تكون مشكلة في الكود الخاص بي :(

هل تستخدم أحدث إصدار (1.3.4)؟ 1.3.3 كان من المفترض أن يصلح fromDataURL عندما يكون window.devicePixelRatio مختلفًا عن 1 ، ولكن (نأمل) تم إصلاحه بالفعل في 1.3.4.

أنا أستخدم أحدث إصدار.

عندما أقوم بإصلاح النسبة بشكل صحيح (مثل العرض التوضيحي الخاص بك) ، فإن إصبعي لا يتطابق مع مكان ظهور الخط.

أنا أقوم فقط بعمل عرض توضيحي بسيط ، لذا فهو ليس بهذه الأهمية وسألعب به أكثر لاحقًا.

هذا عرض توضيحي بسيط: http://jsfiddle.net/szimek/baL7r8xd. عند الضغط على الزر "استبدال" ، سيتم مسح اللوحة القماشية وإعادة الصورة بعد ثانية واحدة. يعمل بشكل جيد على iPhone مع window.devicePixelRatio 2.

غريب ، يعمل على جهاز android أيضًا.

شكرًا ، سأكتشف ذلك :)

بالنسبة لأي شخص صادف أنه واجه هذه المشكلة ، اكتشفت الخطأ الذي كنت أفعله.

قبل إدخال البيانات ، باستخدام .fromDataURL(data) ، للتأكد من أنك قمت بقياس اللوحة بشكل صحيح:

      function resizeCanvas(canvas) {
        var ratio =  window.devicePixelRatio || 1;
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext('2d').scale(ratio, ratio);
      }

      resizeCanvas(canvas);

لعمل نفس حجم الصورة يمكنك إضافة خيارات
signaturePad.fromDataURL(data, {width: 100, height: 100})
يجب أن يكون العرض والارتفاع مطابقًا لحجم اللوحة القماشية
المزيد من التفاصيل:
https://github.com/szimek/signature_pad/blob/master/src/signature_pad.ts