تدعم العديد من مواقع التسوق الآن صورًا بانورامية بزاوية 360 درجة لكائنات حقيقية، ويمكنك اختيار عرض العينات بزاوية 360 درجة، وهذه تجربة استهلاك جيدة للمشترين. هناك العديد من هذه المكونات الإضافية على الإنترنت استنادًا إلى jQuery، وبعضها مدفوع أو مجانًا، نعم، يوجد بالفعل مكون إضافي مفيد جدًا يسمى 3deye.js. يدعم البرنامج الإضافي محطات سطح المكتب والأجهزة المحمولة iOS وAndroid وبرنامجه التجريبي: http://www.voidcanvas.com/demo/28823deye/.
بعد تشغيل هذا العرض التوضيحي بنفسي، تابعت أفكاره وقمت بتنفيذ وظائف مماثلة باستخدام HTML5 Canvas.
لذا دعونا نتحدث أولاً عن مبدأ البانوراما بزاوية 360 درجة1. أولاً، تحتاج إلى التقاط صور للكائن الفعلي. الفاصل الزمني هو تدوير كل صورة بمقدار 15 درجة، لذلك يلزم 23 صورة.
2. بعد أن تصبح الصورة جاهزة، حاول اختيار تنسيق JPG واقتصاصها إلى الحجم المناسب.
3. يتم تحميل جميع الصور مسبقًا بلغة JavaScript، ويمكن عرض دقة التحميل جنبًا إلى جنب مع شريط التقدم.
4. قم بإنشاء/احصل على كائن Canvas، وأضف أحداث الاستماع للماوس، وارسم إطارات مختلفة بشكل مناسب عندما يتحرك الماوس إلى اليسار واليمين. المبدأ العام هو أن هذا بسيط!
كود التنفيذ:
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>عرض كامل بزاوية 360 درجة</title> <script> var ctx = null; // سياق ثنائي الأبعاد للمتغير العام varframe = 1; / 23 var width = 0; var height = 0; var Images = new Array(); var Canvas = document.getElementById(fullview_canvas); Canvas.width = 440;// window.innerWidth; .getElementById('loadProgressBar'); for(var i=1; i<24; i++) { bar.value = i; .src = i + .jpg; } } ctx = Canvas.getContext(2d); // حدث الماوس Canvas.addEventListener(mousedown, doMouseDown, false); Canvas.addEventListener('mousemove', doMouseMove, false); Canvas.addEventListener('mouseup', doMouseUp, false); ) { redraw(); bar.style.display = 'none' } } function doMouseDown(event) { var x = events.pageX; Event.pageY; var Canvas = events.target; var loc = getPointOnCanvas(canvas, x, y)); startX = loc.x; start = true } function doMouseMove(event) { var x = events.pageX; var loc = getPointOnCanvas(canvas, x, y if (started) { var count = Math.floor(Math.abs((startedX - loc.x)/30)); varframeIndex = Math.floor((startedX - loc.x)/30); while(count > 0) { console.log(frameIndex = +frameIndex count--; FrameIndex--; } else if(frameIndex < 0) {frameIndex--; <= 0) {frame = 23; } redraw(); } } } function doMouseUp(event) { console.log(mouse up now); (started) { doMouseMove(event); beginX = -1; Canvas.width / bbox.width)، y: y - bbox.top * (canvas.height / bbox.height) }; } function Loaded() { setTimeout( update, 1000/8); } function redraw() { // var imageObj = document.createElement(img); // var imageObj = new Image(); ctx.clearRect(0, 0, width, height) ctx.drawImage(imageObj, 0, 0, width, height }); function update() { redraw(); if (frame >= 23)frame = 1; setTimeout(update, 1000/8); 0 max=23></progress> <canvas id=fullview_canvas></canvas> <button onclick=loaded()>التشغيل التلقائي</button> </body> </html>عنوان تنزيل الملف التجريبي-> fullview.rar
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.