كشف تضارب النص القماشي وطريقة التخفيف

يتم استخدام ترقق النص بشكل عام عند تقديم الاحتياجات المتعلقة بالخريطة، كما قمت بتنفيذ هذه الطريقة عند تنفيذ وظيفة لمحرك الخرائط الخاص بالشركة، وقمت بتبسيطها هنا وتشغيلها على لوحة قماشية عادية

حساب النطاق الذي يشغله النص في القماش

 // احسب العرض المطلوب للنص var p = { x: 10, y: 10, name: test text}; var Measure = ctx.measureText(p.name); // ابحث عن الحد الأقصى للمساحة التي يشغلها النص في اللوحة إحداثيات y للوحة الرسم var maxX = Measure.width + px; // ابحث عن الحد الأقصى لإحداثيات y التي يشغلها النص في لوحة الرسم القماشية // يمكن لـ Canvas حساب عرض النص فقط، وليس ارتفاع النص. لذلك فقط استخدم عرض النص مقسومًا على عدد النص لحساب قيمة تقريبية var maxY = Measure.width / p.name.length + py; x: maxX, y: maxY }; // الحدود هي النطاق الذي يشغله النص الموجود في اللوحة القماشية. // عند اعتبار إحداثيات النقطة الحد الأدنى للنطاق، سيكون تعيين textAlign وtextBaseline بالطريقة التالية أكثر دقة. // إذا تم عرضه في مواقع مختلفة، فيجب أيضًا تعديل الحد الأقصى والحد الأدنى للنطاق // ctx.textAlign = left; // ctx.textBaseline = top;var borders = new Bounds(min, max);

كائن نطاق الحدود

 /** * تعريف كائنات النطاق */function Bounds(min, max) { this.min = min; this.max = max;}/** * تحديد ما إذا كان النطاق يتقاطع مع نطاق آخر */Bounds.prototype.intersects = وظيفة (حدود) { فار مين = this.min، ماكس = هذا.ماكس، min2 = حدود.مين، max2 = حدود.ماكس، xIntersects = max2.x >= دقيقة.x && min2.x <= max.x, yIntersects = max2.y >= min.y && min2.y <= max.y; return xIntersects && yIntersects;};

كشف

 // قبل كل رسم، قم بإجراء اكتشاف تقاطع النطاق مع النص المرسوم // إذا تم العثور على تقاطع، فتوقف عن رسم النص الحالي، وإلا ارسم قائمة النص المرسوم وقم بتخزينها for (var Index in _textBounds) { // Loop all The يتم اختبار نطاق النص المرسوم لمعرفة ما إذا كان يتقاطع مع نطاق النص الحالي، وإذا كان هناك تقاطع، فهذا يعني أنه سيتم تخطي النص. ) { يعود؛ }}_textBounds.push(bounds);ctx.fillStyle = red;ctx.textAlign = left;ctx.textBaseline = top;ctx.fillText(p.name, px, py);

عنوان المثال: مثال

لمزيد من التفاصيل، يمكنك عرض الكود الكامل: عنوان جيثب

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