هذه المقالة مناسبة للقراء المهتمين بالرسم على القماش والرسومات وتصور الواجهة الأمامية.
إسفينكل شيء له سبب.
في الآونة الأخيرة، يحتاج المنتج إلى مثل هذه الوظيفة: صباغة بعض الرسومات. لنفكر في الأمر، هذا ليس شيئًا يأتي بسهولة، لقد قمت بالفعل بدراسة تكنولوجيا الصباغة الرسومية. لذلك أرسلت الخوارزميتين اللتين كتبتهما من قبل إلى صديقي وطلبت منه تنفيذهما كمرجع. الخوارزمية الأولى هي معالجة وحدات البكسل، والثانية تستخدم تركيب الصور: globalCompositeOperation.
كل شيء عرضة للمفاجآت، وخاصة عند كتابة البرامج.
بعد فترة ليست طويلة، قال صديقي أن الخوارزمية الثانية لا تعمل مع فايرفوكس.
اكتشف السببلقد صدمت عندما سمعت أن هناك خطأ. لقد قمت باختباره، واختبرته أيضًا تحت FireFox. لذلك قمت بفتح Firefox وبدأت في المثال، ووجدت أنه جيد ولا توجد مشكلة.
ولكن هناك مشاكل في دمج الشركاء الصغار في المنتجات. ما الفرق؟ بعد التحقيق معًا، اكتشفت أخيرًا أن أحد الاختلافات بين نموذج التعليمات البرمجية الخاص بي والكود الموجود في المنتج هو أن نموذج التعليمات البرمجية يستخدم صور png، بينما يستخدم المنتج صور svg.
هل يمكن أن تكون هناك مشكلة في صورة svg؟ إن التقاط صورة svg ووضعها في نموذج التعليمات البرمجية أمر خاطئ بالفعل. الاستنتاج واضح بالفعل:
ضمن متصفح FireFox، عند رسم صور SVG ضمن Canvas، لن يتم تفعيل إعداد globalCompositeOperation.
ما يلي هو جزء من التعليمات البرمجية للاختبار. ctx.globalCompositeOperation = 'destination-out' يعني استخدام شكل الصورة المصدر لتجويف الصورة الوجهة.
في المتصفحات الأخرى، التعليمات البرمجية التالية صالحة ومجوفة. ولكن في
لا يعمل تحت فايرفوكس:
<html><head> <script> function init() { var Canvas = document.getElementById('c'); var ctx = Canvas.getContext('2d'); var img = new Image(); وظيفة () { ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation = 'destination-out'; } img.src = 'diffuse.png'; var svg = new Image; ./d.svg; function drawPoint(pointX, pointY) { ctx.drawImage(svg ، pointX - svg.width / 4، pointY - svg.height / 4، svg.width / 2, svg.height / 2); } Canvas.addEventListener('click', function (e) { drawPoint(e.clientX, e.clientY); }, false } </script></); head><body onload=init(); style=background: red> <div> <canvas id=c width=1000 height=1000></canvas> </div></body></html> كيفية الحلتم العثور على سبب المشكلة، والحل في الواقع بسيط.
هذا هو الحال غالبًا، وفي كثير من الأحيان يكون العثور على المشكلة أصعب من حلها.
الحل في الواقع بسيط جداً
أضف حكمًا إلى الكود لتحديد ما إذا كان المتصفح هو FireFox.
إذا كان الأمر كذلك، فقم أولاً برسم صورة svg على اللوحة القماشية المؤقتة.
يستخدم الرسم اللاحق لوحة قماشية مؤقتة لاستبدال صورة svg.
على سبيل المثال، يمكن تحسين الكود أعلاه على النحو التالي:
function init() { var Canvas = document.getElementById('c'); var ctx = Canvas.getContext('2d'); var img = new Image(); img.onload = function () { ctx.drawImage(img , 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation = 'destination-out'; } img.src = 'diffuse.png'; var svg = new Image; { tempCanvas = document.createElement('canvas'); svg.width; tempCanvas.height = svg.height; var tempCtx = tempCanvas.getContext('2d'); tempCtx.drawImage(svg,0,0,svg.width,svg.height); pointY) { ctx.drawImage(tempCanvas, pointX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2); } Canvas.addEventListener('click', function (e) { drawPoint(e.clientX, e.clientY) )؛ }، خطأ شنيع)؛ }ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.