Html2canvas: علامات النص في SVG متداخلة (مكررة / مزدوجة)

تم إنشاؤها على ١٩ فبراير ٢٠١٥  ·  24تعليقات  ·  مصدر: niklasvh/html2canvas

(آسف ، أنا لا أجيد اللغة الإنجليزية)

أهلا،
أنا أستخدم هذا البرنامج النصي الرائع لتقديم علامات SVG
يوجد بعض تداخل النص عند عرض علامة النص في SVG على لوحة الرسم
تتم معالجة علامة النص كعقدة نص وأيضًا كعقدة SVG
يمكنك أن ترى ذلك بسهولة مع خاصية التحويل
2015-02-19 15 08 29_2
إليك عينة من الكود (باستخدام html2canvas 0.5.0-alpha2)

<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/html2canvas.js"></script>
</head>
<body>
  <svg width="100" height="100">
    <g transform="translate(20,20)">
      <text dy=".45em" y="10" x="0" dx="-.8em" transform="translate(0,0) rotate(-70)" style="font-size:12px;">Text</text>
    </g>
  </svg>
  <script>
    $(document).ready(function() {
      html2canvas(document.body, {
        onrendered: function(canvas) {
          document.body.appendChild(canvas);
        }
      });
    })
  </script>
</body>
</html

وها هو تغييري السريع

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

آمل أن يساعد هذا

Needs More Information
مصدر
picture hyojin
👍4 ❤2

التعليق الأكثر فائدة

تضمين التغريدة
بعد اختباره على IE ، لا يعمل الإصلاح الخاص بك لأن الخاصية parentElement لا يتم ملؤها في العقدة الحالية. استخدم parentNode بدلاً من ذلك! على أي حال ، سيكون الأمر أكثر وضوحًا لأننا في NodeParser ونتحدث عن العقدة.

بخلاف ذلك ، بدلاً من ذلك ، اختبر اسم العلامة ، وقمت بتغيير الكود الخاص بي لاختبار مثيل parentNode ومعالجة العقدة الحالية لديها TextContainer فقط إذا كانت العقدة الأم ليست SVGElement .

يعمل على الكروم و ie11. على Firefox لا يمكنني اختباره بسبب خطأ قماش فارغ!

رمز بلدي

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

آمل أن يساعد هذا.

picture ncoquelet في ٦ أغسطس ٢٠١٥
❤2

ال 24 كومينتر

شكرا # Hyojin. هذا يساعدني.

josnabattula picture josnabattula في ١٧ مارس ٢٠١٥

شكرا ، ساعدني كثيرا!

natee picture natee في ٢٣ يوليو ٢٠١٥

شكرا لإصلاحك!

يمكنك أيضًا التحقق من tspan tagName:
node.nodeType === Node.TEXT_NODE && node.parentElement.tagName! == "text" && node.parentElement.tagName! == "tspan"

ncoquelet picture ncoquelet في ٤ أغسطس ٢٠١٥
👍1

ncoquelet لقد قمت بتحديث الكود الخاص بي. شكرا!

hyojin picture hyojin في ٥ أغسطس ٢٠١٥

تضمين التغريدة
بعد اختباره على IE ، لا يعمل الإصلاح الخاص بك لأن الخاصية parentElement لا يتم ملؤها في العقدة الحالية. استخدم parentNode بدلاً من ذلك! على أي حال ، سيكون الأمر أكثر وضوحًا لأننا في NodeParser ونتحدث عن العقدة.

بخلاف ذلك ، بدلاً من ذلك ، اختبر اسم العلامة ، وقمت بتغيير الكود الخاص بي لاختبار مثيل parentNode ومعالجة العقدة الحالية لديها TextContainer فقط إذا كانت العقدة الأم ليست SVGElement .

يعمل على الكروم و ie11. على Firefox لا يمكنني اختباره بسبب خطأ قماش فارغ!

رمز بلدي

NodeParser.prototype.getChildren = function(parentContainer) {
    return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
        var container = [node.nodeType === Node.TEXT_NODE && !(node.parentNode instanceof SVGElement) ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
        return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
    }, this));
};

آمل أن يساعد هذا.

ncoquelet picture ncoquelet في ٦ أغسطس ٢٠١٥
❤2

أصلح مشكلتي في Firefox ، ويعمل على ff أيضًا :-)

ncoquelet picture ncoquelet في ٦ أغسطس ٢٠١٥

اكثر وضوحا!
لقد تحققت أيضًا من أنه يعمل بشكل جيد في صص.
لقد دمجت الإصلاح وتم تحديث طلب السحب. شكرا :)

hyojin picture hyojin في ١٢ أغسطس ٢٠١٥
👍1

hyojin بفضلncoquelet للتحقيق في هذا الأمر والإصلاح. واجهت نفس المشكلة بالضبط في ذلك اليوم ولم أكن متأكدًا تمامًا من سببها.

berendberendsen picture berendberendsen في ١٧ يوليو ٢٠١٦
😄1

لست متأكدًا من المكان الذي أشعر فيه بالارتباك هنا ولكني أحصل على استثناء على أنه "خطأ مرجعي غير معلوم: لم يتم تعريف NodeParser"

Suchetana10 picture Suchetana10 في ٢ أغسطس ٢٠١٦

@ Suchetana10 متى حصلت على الاستثناء؟ في تحميل البرنامج النصي؟

hyojin picture hyojin في ٥ أغسطس ٢٠١٦

@ hyojin شكرا .. عملت لي

vishwasvadavi picture vishwasvadavi في ٢٥ أكتوبر ٢٠١٦

hyojin شكرا! يعمل بشكل مثالي بالنسبة لي أيضًا

nugen picture nugen في ١٣ فبراير ٢٠١٧

happyvishwasvadavi ugnugen يسعدني سماع ذلك! :)

hyojin picture hyojin في ١٤ فبراير ٢٠١٧

لا يزال بعض الأشخاص يواجهون مشكلة في عنصر النص ، فأنا أغير هذه المشكلة وسأرسل العلاقات العامة مرة أخرى.

hyojin picture hyojin في ١٤ فبراير ٢٠١٧

image

seemasingh123 picture seemasingh123 في ٢٥ فبراير ٢٠١٧

هل لدى أي شخص تصميم مكتبة به هذا الإصلاح الذي يمكنني اختباره؟ مشاهدة نفس المشكلة على صفحة Highcharts ..

theinventor picture theinventor في ٢٤ مارس ٢٠١٧

هل هذا البناء متاح مع الإصلاح؟ ما زلت أواجه هذه المشكلة مع Highcharts.

Nywlem11 picture Nywlem11 في ٢ أغسطس ٢٠١٧

هل هذا الإصلاح متوفر في البناء أم يتعين علينا إنشاء تجاوز؟

sgsmittal picture sgsmittal في ١٢ أكتوبر ٢٠١٧

هل ما زالت هذه مشكلة مع v1.0.0 ؟ إذا كان الأمر كذلك ، هل يمكنك مشاركة مثال على jsfiddle .

niklasvh picture niklasvh في ١٢ ديسمبر ٢٠١٧

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

no-response[bot] picture no-response[bot] في ١٢ ديسمبر ٢٠١٧

عزيزي niklasvh ،

شكرا لك على هذه المكتبة الرائعة. يمكنني إعادة إظهار هذه المشكلة بأحدث إصدار - v1.0.0-rc.3

لقد قمت بإنشاء مثال على CodePen هنا (Chrome فقط) حيث سترى أن بعض العقد النصية (في عنوان الرسم البياني) مكررة.

خطوات التكاثر -

  1. يرجى فتح رابط CodePen - https://codepen.io/karannagupta/pen/RXpddB في Chrome فقط
  2. انقر فوق الزر "نسخ إلى الحافظة"
  3. انتظر حتى تنتهي الرسوم المتحركة (أو انظر وحدة التحكم للرسالة المنسوخة)
  4. الصق الرسم البياني في الرسم أو المستند (ctrl + v)

تمت إضافة عناوين الرسم البياني في السطر رقم 193

hyojin ، هل

يعتبر،
كاران


text-duplication
karannagupta picture karannagupta في ١٠ سبتمبر ٢٠١٩

مرحبًا @ karannagupta
هل يمكنك تجربة فرعي للتحقق مما إذا كان يأتي من نفس السبب؟

hyojin picture hyojin في ١١ سبتمبر ٢٠١٩

مرحبًا hyojin

مع إصدار المكتبة الخاص بك (v0.5.0-alpha2) لا يعمل. يمكنك اختبار مكتبتك على قلمي هنا

أود أيضًا استخدام أحدث إصدار من html2canvas. لا أحتاج أيضًا إلى استخدام html2canvas.svg حينئذٍ.

يعتبر،
كاران

karannagupta picture karannagupta في ١١ سبتمبر ٢٠١٩

تبين أنها مشكلة في خطوط Unicode

image

karannagupta picture karannagupta في ١١ سبتمبر ٢٠١٩
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

celik75 picture celik75  ·  4تعليقات
arzyu picture arzyu  ·  3تعليقات
stevencherry1 picture stevencherry1  ·  3تعليقات
deepender87 picture deepender87  ·  4تعليقات
Juliazhong picture Juliazhong  ·  4تعليقات