Cómo mostrar un panorama con lienzo
Es una buena experiencia de consumo para los compradores. Hay muchos complementos de este tipo basados en JQuery en Internet.
Existe un complemento llamado 3deye.js, que en realidad es muy útil. El complemento es compatible con terminales móviles y de escritorio.
Fin de iOS y Android,
Así que primero hablemos del principio de su panorama de 360 grados.
1. Primero, necesitamos tomar fotografías del objeto real. El intervalo es rotar cada foto 15 grados, por lo que necesitamos 23 fotos.
2. Cuando la foto esté lista, intenta seleccionar el formato JPG y cortarla a un tamaño adecuado.
3. Todas las fotos se cargan previamente mediante JavaScript y la precisión de la carga se puede mostrar con una barra de progreso.
4. Cree/obtenga el objeto de lienzo y agregue el mouse para monitorear eventos. Cuando el mouse se mueve hacia la izquierda y hacia la derecha, no dibujará normalmente.
Mismo marco. El principio general es este, ¡simple!
Código de implementación:
lt! DOCTYPE html gt
lthtml gt
lthead gt
ltmeta charset=utf-8 " />
lttitle gtpanorámica de 360 grados lt/title gt;
lt script gt
var ctx = null //Contexto 2d de variable global
var frame = 1 // 23
var ancho = 0;
var alto = 0;
var iniciado = falso
var imágenes = new Array();
var iniciado x =-1;
window.onload = function() {
var lienzo = documento getelementbyid(" vista completa _ lienzo ");
canvas.width = 440//ventana ancho interior;
Canvas.altura = 691; //ventana altura interior;
ancho = canvas.width
altura = lienzo.altura
var bar = document . getelementbyid(' cargar barra de progreso ');
for(var I = 1;ilt24;i)
{
valor de barra = I;
if(ilt10)
{
imágenes[I] = nuevo Imagen();
Imagen[i]. src = "0" i ". jpg ";
}
Otros
{
imágenes[I]= nueva Imagen();
imagen[i].src = i".
jpg ";
}
}
CTX = lienzo . get context(" 2d ");
//Evento del mouse
canvas . addevent oyente(" mousedown ", doMouseDown, false);
canvas . addevent oyente(' mousemove ', doMouseMove, false); addevent listener('mouseup',doMouseUp,false);
//loaded();
//frame = 1
frame = 1;
p>
Imagen[cuadro].
onload = función() {
redibujar();
bar estilo .
Función doMouseDown(evento){
var x = evento.pageX
var y = evento.páginaY
var lienzo = evento .target
var loc = getPointOnCanvas(canvas, x, y);
console.log("Punto presionado del mouse (x: " loc.x ", y: " loc . y "));
startedX = loc.x
started=true;
}
Función doMouseMove(evento){
var x = event.pageX
var y = event.pageY
var canvas = event.target
var loc = getPointOnCanvas ( lienzo, x, y);
if (inicio){
var count = math . Floor(math . ABS((startedX-loc . x)/30)); /p>
var frame index = math . floor((startedX-loc . x)/30
while(count gt; 0)
{
console .log(" índice de cuadros = " índice de cuadros ");
count-;
if(índice de cuadros gt; 0)
{
índice de fotograma-;
fotograma;
} else if(índice de fotograma lt; 0)
{
índice de cuadros;
Cuadro-;
}
else if(frameIndex == 0)
{
Romper;
}
if(frame gt; = 24)
{
frame = 1;
}
if(cuadro lt; = 0)
{
cuadro = 23;
}< / p>
redraw();
}
}
}
Función doMouseUp(evento){
console.log("El mouse ahora está levantado");
if (start){
doMouseMove(event);
started x = -1;
Inicio=false;
}
}
Función getPointOnCanvas(lienzo, x, y) {
var bbox = lienzo . getboundingclienrect();
Return { x: x-bbox izquierda *(canvas . ancho/bbox . ancho),
<p>y：y-bbox . top *(canvas . height/bbox . height)
};
}
Función cargada() {
setTimeout(actualización, 1000/8);
}
Función redibujar()
{
/ / var imagen obj = documento . createelement(" img ");
//var Imagen obj = nueva Imagen();
var imagen obj = imágenes[marco];
//var Imagen obj = nueva Imagen();
var imagen obj = imágenes[marco];
p>ctx.clearRect(0, 0, ancho, alto)
ctx.drawImage(imageObj, 0, 0, ancho, alto);
}
Función de actualización(){
redibujar();
marco;
if(marco gt; = 23) marco = 1;
p>setTimeout(actualización, 1000/8)
}
lt/script gt;
lt/head gt
ltbody gt
ltprogress; id = " loadProgressBar " valor = " 0 " max = " 23 " gt; lt/progress gt;
ltcanvas id = " fullview _ canvas " gt lt/canvas gt;
ltbutton onclick = "loaded()" gt;Autoplaylt/button gt;
lt/body gt;
lt /html gt;