مثال على تطبيق html2canvas للحدود المنقطة المتقطعة

html2canvas هي مكتبة تنشئ لوحة قماشية من عناصر html. تتوافق معظم أنماط اللوحة المرسومة مع CSS. على سبيل المثال، اعتبارًا من 1.0.0-alpha.12، لا يزال يتم رسم الحدود المنقط كخط متصل، ولا تزال هناك مشكلة في طي الحدود.

هنا، بناءً على فكرة في مشكلات جيثب، تمت محاكاة تأثير الحدود المتقطعة.

الحالة القابلة للتطبيق: هناك العديد من الحدود المنفصلة، ​​أي أنها ليست حدودًا كاملة، ولا يتم أخذ نصف قطر الحدود في الاعتبار.

 findDashedBorders = (page) => { const tds = page.querySelectorAll(td); const border = []; tds.forEach(td => { const computedStyle = window.getComputedStyle(td); const borderStyle = computedStyle.borderStyle ? .borderStyle.split(' ') : []; const DashedIndex = findAll(borderStyle, 'dashed'); if (dashedIndex.length) { const rect = td.getBoundingClientRect(); border); td.style[`border${dashedBorder[index]}Color`] = 'transparent' }); }); حدود العودة }

الصفحة هي العنصر الذي يحتاج إلى رسم اللوحة القماشية. جميع عناصر td ذات الحدود المتقطعة هنا هي عناصر td، لذا ابحث عن جميع عناصر td واستخدم طريقة getComputedStyle() للعثور على borderStyle الخاص بها هذه السمة في شكل متقطع لا شيء، لذلك ابحث عن جميع الاتجاهات المتقطعة وفقًا للطريقة المخصصة findAll() (على سبيل المثال، متقطع متقطع لا شيء سيعود [0، 1])، حيث تكون مصفوفة الحدود المتقطعة كما يلي :

 const DashedBorder = [Top, Right, Bottom, Left];

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

 pages.forEach((page, idx) => { const border = this.findDashedBorders(page); constparentRect = page.getBoundingClientRect(); html2canvas(page, {scale: 2, logging: false, useCORS: true}). ثم((canvas) => { this.drawDashedBorder(canvas, border,parentRect); ... })})

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

 drawDashedBorder = (canvas, border,parentRect) => { var ctx = Canvas.getContext(2d); globalAlpha = 1; border.forEach(border => { var left = (border.rect.left + 0.5 -parentRect.left)*2; var right = (border.rect.right - 0.5 -parentRect.left)*2; var top = (border.rect.top + 0.5 -parentRect.top)*2; = (border.rect.bottom - 0.5 -parentRect.top)*2; Switch (border.border) { case 'Top': ctx.beginPath(); ctx.moveTo(left, top); ctx.lineTo(right, top); ctx.lineTo(right, Bottom); ctx.stroke(); ctx.moveTo(left, Bottom); ctx.lineTo(right, Bottom); ctx.lineTo(); اليسار، أسفل)؛ ctx.stroke();

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

4. هذه الطريقة متاحة حاليًا فقط لاختبار Chrome وهي غير صالحة لمتصفح فايرفوكس لأن المعلومات التي يتم إرجاعها بواسطة getComputedStyle ضمن Firefox تختلف عن تلك الموجودة في chrome.

نظرًا لأنني لا أملك فهمًا عميقًا للقماش ولا أستطيع العلاقات العامة، فلا يسعني إلا أن أتطلع إلى التنفيذ الرسمي لـ html2canvas.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.