Signature_pad: العرض والارتفاع

+1 جرب للتو هذه الحزمة وواجه مشاكل في التحجيم. من الناحية المثالية ، أريد أن يمتد العرض الكامل على الأجهزة المحمولة وأن يكون أصغر على أجهزة سطح المكتب. szimek أي أفكار؟

ما هي بالضبط هذه المشاكل مع التحجيم؟

خذ هذا المثال. عندما ترسم الموضع غير صحيح http://jsfiddle.net/4qjwr06h/1/

حسنًا ، ربما أكون غبيًا. إذا أردت أن تكون متجاوبة ، فلا ينبغي أن أقوم بعمل width: 100% مع <canvas> لأنه لا يغير العرض الفعلي للوحة القماشية بل يطيلها بدلاً من ذلك. يجب استخدام عروض ثابتة بدلاً من ذلك.

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

canvas.height = canvas.offsetHeight;
canvas.width = canvas.offsetWidth;

يأخذ الكود الخاص بي أيضًا في الاعتبار devicePixelRatio ، لكن لأكون صريحًا لست متأكدًا مما إذا كان صحيحًا بنسبة 100٪.

أعتقد أنني حصلت عليه ، شكرا يا شباب

فيفات يسوع

من: Szymon Nowak [mailto: [email protected]]
تاريخ الإرسال: الأربعاء 7 أكتوبر 2015 الساعة 10:14 صباحًا
إلى: szimek / signature_pad [email protected]
نسخة إلى: crazzeto [email protected]
الموضوع: Re: [signature_pad] العرض والارتفاع (# 118)

يمكنك التحقق من https://github.com/szimek/signature_pad/blob/master/example/js/app.js#L10 -L18 طريقة resizeCanvas في التطبيق التجريبي. إذا أضفت هذين السطرين إلى العرض التوضيحي الخاص بك ، فإنه يعمل بشكل جيد:

Canvas.height = canvas.offsetHeight ؛
Canvas.width = canvas.offsetWidth ؛

يأخذ الكود الخاص بي أيضًا في الاعتبار شاشات شبكية العين ، ولكن بصراحة لست متأكدًا مما إذا كان صحيحًا بنسبة 100 ٪.

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو اعرضها على GitHub https://github.com/szimek/signature_pad/issues/118#issuecomment -146207233.

هل لي أن أقترح وضع هذه السطور

canvas.height = canvas.offsetHeight;
canvas.width = canvas.offsetWidth;

في المستندات / التمهيدي؟ لقد استغرق الأمر بعض الوقت لمعرفة ذلك ، وأعتقد أن هذا قد يكون صحيحًا أيضًا للآخرين الذين لا يتمتعون بالخبرة بـ <canvas> .

Boldewyn شكرا على الاقتراح. هناك علاقات عامة يجب أن تجعل هذا غير ضروري بعد الآن. بحلول نهاية العام ، سأقوم إما بدمجه وتحديث التطبيق التجريبي ، أو إضافة هذه المعلومات إلى README.