Signature_pad: تحسين جودة الرسم

هذه تجربة سريعة وقذرة قمت بها الصيف الماضي. تكمن الفكرة في تمهيد المسار بوظيفة فوق نافذة متحركة. تم ضبط النافذة في الكود ولكن يمكن تعديلها بناءً على السرعة. من أجل البساطة ، استخدمت عرض قلم ثابت.
http://scvsa-servizi.campusnet.unipr.it/tools/signature/signature_pad/example/

cl.

تضمين التغريدة سوف تحقق من ذلك. أتذكر أن أحد تطبيقات الرسم من Google كان يستخدم نفس الحل. ومع ذلك ، فإن الشيء الغريب في iMessage هو أن التأخر لم يعد في هذه المكتبة ...

إذا كنت تستخدم إصبعًا للرسم ، فبدلاً من القلم ، تكون نقطة اللمس واسعة جدًا (بالتأكيد أكبر من بكسل واحد) ولست متأكدًا حقًا من كيفية اكتشاف تطبيقات الجوال أو المتصفحات للإحداثيات الدقيقة لأحداث اللمس في مثل هذا قضية. ربما يكون من الممكن بطريقة ما تعديل الإحداثيات التي يتلقاها المتصفح بناءً على إحداثيات النقاط السابقة والسرعة الحالية وليس فقط تقريب المسارات بينها. لست متأكدًا مما إذا كان ذلك منطقيًا أم أنه سيكون لدي الوقت لتجربة ذلك. يجب أن أجعل النقاط مرئية لمعرفة ما إذا كان من الممكن تحسين المنحنيات نفسها أو إذا كانت النقاط ليست على طول الخطوط "المثالية".

claudiorivetti هذا جميل ، كيف يمكنني الحصول على مثل هذا السحر؟ :) من المسلم به أنه يجب أن يكون أكثر واقعية بعض الشيء ، إما بشكل ديناميكي بالكامل ، أو ربما يكفي مجرد خط أكثر سمكًا.

معظم الناس الذين لاحظتهم يكتبون ببطء لسبب ما ويبدو الأمر كما لو كان في التسعينيات. لا يمكنني التخلص من الزوايا الصعبة عن طريق تعديل معلمات الإدخال SignaturePad:

( ملاحظة: لا يهم ما إذا كان على سطح المكتب أو iPhone أو باستخدام قلم لوحي أو مجرد إصبع. يبدو دائمًا كما هو. اللوحة القماشية هي 1200 × 600 بكسل بمقياس 3،3 (لذلك ، 400 × 400 بكسل). لا أعتقد القرار هو المشكلة)

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

يقوم التوقيع الفائق تلقائيًا بإصلاح المنحنيات

jSignature ) أكثر اهتزازًا بعض الشيء ، لكنه لا يزال غير مائل للبكسل.

halo أود تجنب المعالجة اللاحقة / الإصلاح التلقائي ، على الرغم من أنني أوافق على أن النتائج عادة ما تكون أفضل بكثير. الشيء هو أنه ، على الأقل في iMessage ، من الممكن أن يكون لديك خطوط ناعمة دون أي معالجة لاحقة ملحوظة. هناك بعض الأشياء التي أود تجربتها ، مثل تخطي النقاط القريبة جدًا من بعضها البعض. تمت إضافة الخنق مؤخرًا ، ولكن إذا رسم شخص ما ببطء شديد ، فلن يساعد ذلك كثيرًا.

شيء آخر هو أنني لم أعد أستخدم هذه المكتبة ، لذا ما لم أجد بعض الأمثلة حول كيفية توفير خطوط أكثر سلاسة (تمامًا كما فعلت مع منشورات Square ) لا أعتقد أن لدي الكثير من الوقت للتحقيق فيها نفسي.

halo لقد أجريت تجربة سريعة ، حيث أتخطى نقطة إذا كانت قريبة جدًا من السابقة. يبدو أنه يحسن جودة الرسم عندما يرسم المرء ببطء شديد ، لكنه يتسبب في تأخر ملحوظ. لا يزال بعيدًا جدًا عما هو ممكن في تطبيقات iOS iMessage أو Notes على الرغم من: / العرض التوضيحي متاح على http://signature-pad.surge.sh/ ويمكنك محاولة تغيير signaturePad.minDistance لترى كيف يؤثر ذلك الرسم. القيمة الافتراضية هي 5 ، مما يعني أنه إذا كانت النقطة السابقة أقرب من 5 بكسل إلى النقطة الجديدة ، فسيتم تخطي النقطة الجديدة.

أضفت أيضًا توقيتًا باستخدام الوظيفة performance.now إلى #_updateStroke (غير موجودة في العرض التوضيحي) وما لم يكن هناك شيء غير متزامن يحدث أو أفسدت شيئًا ما ، يبدو أنه يستغرق أقل من 1 ميلي ثانية لإضافة نقطة ورسم منحنى. هذا يعني أن هناك متسعًا من الوقت للقيام بمزيد من المعالجة الفاخرة.

سأجرب هذا بامتنان شديد في الإنتاج مع مستخدمين حقيقيين وأعطيك ملاحظات. هل لديك فرع على جيثب أو ملف توزيع يمكنني استخدامه؟

يعجبني النهج ، شكرًا جزيلاً لك على تجربته.

تحرير : أعتقد أنه يمكنني فقط استخدام http://signature-pad.surge.sh/js/signature_pad.js

halo إذا كنت ترغب في إنشاء نسختك الخاصة (على سبيل المثال ، مصغرة) ، فقد قمت بدفعها إلى https://github.com/szimek/signature_pad/tree/improve-drawing-quality فرع.

شكرًا لك ، لقد أخذت للتو المترجم من الصفحة التجريبية ونشرها في الإنتاج. سنخبرك بكيفية استلامه في الأسابيع 1-3 القادمة.

halo & szimek - ألق نظرة على هذين الرابطين ، فقد يكون ذلك مفيدًا

• http://paperjs.org/examples/path-simplification/
• http://thejosephturner.com/simpleline/

@ fa-at-pulsit شكرا! ومع ذلك ، يبسط كلا المثالين المسار بعد أن يتوقف المستخدم عن رسمه ، الأمر الذي أود تجنبه. ربما سأستسلم في وقت ما وأذهب إلى هذا الحل ، لكنني آمل أن يكون من الممكن الحصول على نتائج أفضل دون تأخير ملحوظ.

أود تجنب المعالجة اللاحقة / التثبيت التلقائي

فقط من باب الفضول ، لماذا هذا؟

• [] الحفاظ على الكود بسيطًا وقويًا ، وتجنب الأخطاء
• [] عدم العبث بتجربة المستخدم النهائي مع مواطن الخلل البصري
• [] قفل يمنع على سبيل المثال تعريض تيار الرسم أثناء الكتابة
• [] حلول ما بعد المعالجة الحالية ليست ناضجة بدرجة كافية

بالمناسبة ، من التعليقات الشخصية التي تلقيتها من المستخدمين النهائيين خلال الأسبوع الماضي ، يمكنني القول إن جودة الرسم قد تم إدراكها على الفور على أنها "تحسنت بشكل واضح" (من خلال الموقعين المتكررين بانتظام). سأرى ما إذا كان بإمكاني الحصول على المزيد من اللحوم حتى العظم ، ومع ذلك لن أكون قادرًا على فضح تواقيع العالم الحقيقي هنا للمقارنة.

كل ما يمكنني قوله هو أن معظم الناس يكتبون بشكل يبعث على السخرية بطيئًا وصغيرًا ، يهم الآن مقدار ما تخبرهم به. ؛) أيضًا ، أظن أن الجهاز (Surface Pro) هو الجاني الرئيسي. في مرحلة ما ، قد يمنحني استخدام جهاز iPad مع أحد تلك الأقلام الجديدة الرائعة نظرة ثاقبة على ذلك.

szimek هذا المثال الآخر بسّط المسار سريعًا (أعتقد ذلك)
ألق نظرة على هذا الفيديو https://www.youtube.com/watch؟v=H79iUsai6uc
المصادر -> https://github.com/eur00t/Effective-Curve-Fitting
وأحصل على تأثير أفضل بكثير على شبكية العين مع تغيير حجم قماش مثل
<canvas width="1000" height="200" style="width: 500px; height: 100px;"/>

@ fa-at-pulsit شكرا! لقد لعبت أكثر قليلاً مع تطبيق iMessage و (ربما بفضل جهاز iPhone 5 بطيء للغاية) لاحظت أنه يقوم بمعالجة ما بعد أثناء الطيران أيضًا ، لكنه دقيق للغاية وبالكاد يمكن ملاحظته.

لا بد لي من إصدار إصدار جديد مع بعض إصلاحات الأخطاء أولاً ، ولكن بعد ذلك سأحاول إصدار إصدار جديد بنقاط تخطي اختيارية قريبة جدًا من بعضها البعض ، ثم أنظر إلى هذا فورًا بعد المعالجة - يبدو حقًا واعدة.

لذلك ، بعد 1.5 شهر من الإنتاج ، يمكنني القول بثقة أن الجودة قد تحسنت بشكل كبير من خلال هذه العلاقات العامة. قام عشرات الأشخاص بالتوقيع مرارًا وتكرارًا ويبدو الأمر أفضل بكثير مقارنة بالشكل الذي كانت تبدو عليه توقيعاتهم من قبل.

لا بد لي من إصدار إصدار جديد مع بعض إصلاحات الأخطاء أولاً ، ولكن بعد ذلك سأحاول إصدار إصدار جديد بنقاط تخطي اختيارية قريبة جدًا من بعضها البعض

أهلا! هل ستحتاج إلى التوافق مع الإصدارات السابقة؟ أم هو مجرد هذا الالتزام كما هو؟

تحرير: سيئتي ، لقد تم دمجها بالفعل عبر هذا الالتزام ، أليس كذلك؟ شكرا لك حقا!!

هل هناك طريقة لتحسين سرعة السحب؟