تشترك هذه المقالة في مبدأ التنفيذ ورمز التنفيذ والمشاكل التي واجهتها في عملية تنفيذ اللوحة التي تحوّل الرسوم المتحركة للرجوع إليها. المحتوى المحدد كما يلي
المبدأ هو محو صورة معينة على جهاز محمول وعرض صورة أخرى ، باستخدام قماش لتنفيذها.
إذا تمحو المستخدم يدويًا ، فأنت بحاجة إلى الاستماع إلى TouchMove ، واللمس والأحداث الأخرى ، وحساب الإحداثيات المقابلة ، واستخدام Canvas "واضحة أو مستقيم لرسم الأقواس أو الخطوط لتحقيق ذلك. ومع ذلك ، فإن هذا سوف يتسبب في تأخر هواتف أندرود.
Canvas لديها خاصية GlobalCompositeOperation. القيمة الافتراضية لهذه الخاصية هي المصدر ، أي أنه سيتم تثبيته عند رسم البيكسلات الموجودة. ومع ذلك ، هناك سمة أخرى هي الوجهة ، وهي ، عند عرض صورتك المستهدفة خارج الصورة المصدر ، عند الرسم بناءً على البكسلات الموجودة ، سيتم ضبط البكسلات الموجودة في المنطقة التي ترسمها. مع هذه السمة ، فهذا يعني أنك لا تحتاج إلى استخدام سلسلة من الوظائف مثل المقطع. يمكنك فقط استخدام الخطوط السميكة أو الأقواس. سيؤدي ذلك إلى تقليل المكالمات إلى واجهة برمجة تطبيقات بيئة الرسم ، وتحسين الأداء ، والعمل على Android أكثر سلاسة.
ها هو رمز المحو الخاص بي:
دع requestAnimationFrame = window.requestanimationFrame || window.mozrequestanimationFrame || Window.WebKitRequestAnimationFrame || window.msRequestAnimationFrame ؛ دع CancelAnimationFrame = Window.CancelanimationFrame || window.mozcancelanimationFrame ؛ دع = 60 ؛ دع canvascleaner = document.getElementById ('cas-1') ؛ دع ctxcleaner = canvascleaner.getContext ('2d') ؛ let canvascleanerbox = document.queryselector ('. canvascleanerbox.clientwidth * 2 ؛ canvascleaner.height = canvascleanerbox.clientheight * 2 ؛ canvascleaner.style.width 'https://gw.alicdn.com/tps/tb1xbyckvxxxxxxxxxxxxxxxxx-1080-1920. w = canvascleaner.width*(imgcleaner.height/imgcleaner.width) ؛ ctxcleaner.drawimage (imgcleaner ، 0 ، 0 ، canvascleaner.width ، w) ؛ ctxcleaner.linecap = 'Round' ؛ // linecap الخاصية تحدد أو تُرجع نمط غطاء الخط في نهاية الخط. ctxcleaner.linejoin = 'Round' ؛ ctxcleaner.linewidth = 100 ؛ // قم بتعيين أو إرجاع عرض الخط الحالي ctxcleaner.globalcompositeoperation = 'الوجهة خارج' ؛} اتركه drawline = (x1 ، y1 ، ctx) => {ctx.s () ؛ ctx.beginpath () ؛ ctx.arc (x1 ، y1 ، a ، 0 ، 2 * math.pi) ؛ ctx.fill () ؛ // fill () طريقة تملأ الصورة الحالية (المسار). اللون الافتراضي أسود. ctx.restore () ؛} ؛/* d من أجل محو إحداثيات نقطة المنطقة ، فإن البيانات التي حصلت عليها عن طريق محاكاة الأشكال التي يجب محوها بنفسي تشبه ما يلي: دع D2 = [[ [1،190] ، [30،180] ، [60،170] ، [90،168] ، [120،167] ، [150،165] ، [180،164] ، [210،163] ، [240،160] ، [270،159] [390،150] ، [420،140] ، [450،130] ، [480،120] ، [510،120] ، [540،120] ، [570،120] ، [600،120] ، [630،120] ، [660،120] ، [690،120] ، [720،120] ، [1،190] ، [20،189] ، [28،186] ، [45،185] ، [50،185] ، [62،184] ، [64،182] ، [90،180] ، [120،178] ، [160،176] ، [200،174] ، [240،172] ؛*/دع الرسم = (d ، ctx) => {if (idx> = d.length) {cancelAnimationFrame (ts) ؛ } آخر {drawline (d [idx] [0] ، d [idx] [1] ، ctx) ؛ IDX ++ ؛ requestAnimationFrame (() => {draw (d ، ctx) ؛}) ؛ }}نظرًا لأنني أعرض الرسوم المتحركة المحو مباشرة على الصفحة ولا تتطلب من المستخدم مسحها بنفسه ، لذلك يتم حساب إحداثيات منطقة المسح بنفسي. ثم استخدم requestAnimationFrame لتنفيذ الرسوم المتحركة. لقد بدأت باستخدام SetInterval. لقد وجدت أن SetInterval سيتم دائمًا إفساده بعد ذلك ، لذلك يوصى بعدم استخدام SetInterval.
في عملية تحقيق هذا التأثير ، وجدت أنه عند استخدام قماش لرسم الصفحة على الصفحة ، تصبح الصورة ضبابية للغاية؟
اتضح أنه بسبب وجود خاصية DevicePixelRatio في متغير نافذة المتصفح ، والذي يحدد أن المتصفح سيستخدم عدة نقاط (عادة 2) بكسل لتقديم بكسل. وهذا يعني ، على افتراض أن قيمة DevicePixelRatio هي 2 ، سيتم تقديم صورة بحجم 100*100 بكسل بعرض 2 بكسل في الصورة. لذلك ، ستحتل الصورة في الواقع 200*200 بكسل على شاشة شبكية العين ، والتي تعادل الصورة مرتين ، لذلك تصبح الصورة غير واضحة.
وبهذه الطريقة ، سيتم حل المشكلة حول القماش بسهولة. يمكننا التعامل مع قماش كصورة. عندما يقوم المتصفح بإعداد قماش ، سيستخدم عرض 2 بكسل لتقديم قماش ، وبالتالي فإن الصورة المرسومة أو النص ستكون غير واضحة في معظم أجهزة شبكية العين.
وبالمثل ، هناك أيضًا خاصية WebKitBackingStorePixelRatio (فقط Safari و Chrome) في سياق القماش. تحدد قيمة هذه الخاصية أن المستعرض سيستخدم عدة وحدات بكسل لتخزين معلومات اللوحة قبل تقديم قماش. القيمة الموجودة في Safari تحت iOS6 هي 2. لذلك ، إذا تم رسم صورة 100*100 في Safari ، فإن الصورة ستقوم أولاً بإنشاء صورة 200*200 في الذاكرة ، ثم عندما يقوم المتصفح بإعدادها ، فإنها ستجعلها مثل صورة 100 × 100 ، لذلك تصبح 200x200 ، وهي نفسها تمامًا مثل الصورة في الذاكرة ، لذلك لن تكون هناك مشكلات في Sugari على iOS. ومع ذلك ، هناك تشويه في Safari في Chrome و IOS7. والسبب هو أن قيم WebKitBackingStorePixelRatio في Safari في Chrome و IOS7 كلاهما 1.
حل:
canvas.width = canvasbox.clientwidth * 2 ؛ canvas.height = canvasbox.clientheight * 2 ؛ canvas.style.width = canvas.clientwidth + 'px' ؛ canvas.style.height = canvas.clientheight * 'px' ؛ // console.log (w) ؛ ctx.drawImage (img ، 0 ، 0 ، canvas.width ، w) ؛
بمعنى أنه يمكنك إنشاء قماش يبلغ حجمه ضعف الحجم الفعلي ، ثم استخدام نمط CSS للحد من القماش إلى الحجم الفعلي. أو استخدم هذا الملفي على Github ، لكنني جربته ولا يبدو أنه يعمل.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.