<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8">
<title>Full 360 degree View</title>
<script>
var ctx = null; // global variable 2d context
var frame = 1; // 23
var width = 0;
var height = 0;
var started = false;
var images = new Array();
var startedX = -1;
window.onload = function() {
var canvas = document.getElementById("fullview_canvas");
canvas.width = 440;// window.innerWidth;
canvas.height = 691;//window.innerHeight;
width = canvas.width;
height = canvas.height;
var bar = document.getElementById('loadProgressBar');
for(var i=1; i<24; i++)
{
bar.value = i;
if(i<10)
{
images[i] = new Image();
images[i].src = "0" + i + ".jpg";
}
else
{
images[i] = new Image();
images[i].src = i + ".jpg";
}
}
ctx = canvas.getContext("2d");
// mouse event
canvas.addEventListener("mousedown", doMouseDown, false);
canvas.addEventListener('mousemove', doMouseMove, false);
canvas.addEventListener('mouseup', doMouseUp, false);
// loaded();
// frame = 1
frame = 1;
images[frame].onload = function() {
redraw();
bar.style.display = 'none';
}
}
function doMouseDown(event) {
var x = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
console.log("mouse down at point( x:" + loc.x + ", y:" + loc.y + ")");
startedX = loc.x;
started = true;
}
function doMouseMove(event) {
var x = event.pageX;
var y = event.pageY;
var canvas = event.target;
var loc = getPointOnCanvas(canvas, x, y);
if (started) {
var count = Math.floor(Math.abs((startedX - loc.x)/30));
var frameIndex = Math.floor((startedX - loc.x)/30);
while(count > 0)
{
console.log("frameIndex = " + frameIndex);
count--;
if(frameIndex > 0)
{
frameIndex--;
frame++;
} else if(frameIndex < 0)
{
frameIndex++;
frame--;
}
else if(frameIndex == 0)
{
break;
}
if(frame >= 24)
{
frame = 1;
}
if(frame <= 0)
{
frame = 23;
}
redraw();
}
}
}
function doMouseUp(event) {
console.log("mouse up now");
if (started) {
doMouseMove(event);
startedX = -1;
started = false;
}
}
function getPointOnCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
return { x: x - bbox.left * (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();
var imageObj = images[frame];
ctx.clearRect(0, 0, width, height)
ctx.drawImage(imageObj, 0, 0, width, height);
}
function update() {
redraw();
frame++;
if (frame >= 23) frame = 1;
setTimeout( update, 1000/8);
}
</script>
</head>
<body>
<progress id="loadProgressBar" value="0" max="23"></progress>
<canvas id="fullview_canvas"></canvas>
<button onclick="loaded()">Auto Play</button>
</body>
</html>
fullview.zip （24个子文件） 
fullview 
01.jpg 35KB 05.jpg 25KB 15.jpg 30KB 07.jpg 29KB 14.jpg 34KB 04.jpg 29KB 19.jpg 32KB 21.jpg 36KB 11.jpg 37KB 08.jpg 31KB 23.jpg 37KB 10.jpg 36KB 22.jpg 37KB
fullview.html 3KB 17.jpg 26KB 18.jpg 28KB 13.jpg 36KB 16.jpg 28KB 12.jpg 37KB 03.jpg 31KB 20.jpg 34KB 06.jpg 25KB 02.jpg 34KB 09.jpg 34KB
gloomyfish
- 粉丝: 7887
- 资源: 13
最新资源
- 几何物体检测43-YOLO（v5至v9）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar
- 基于cruise的燃料电池功率跟随仿真，按照丰田氢能源车型搭建，在wltc工况下跟随效果好，最高车速175，最大爬坡30，百公里9s均已实现 1.模型通过cruise simulink联合仿真，策略
- C#源码 上位机 联合Visionpro 通用框架开发源码，已应用于多个项目，整套设备程序，可以根据需求编出来，具体Vpp功能自己编 程序包含功能 1.自动设置界面窗体个数及分布 2.照方式以命令触
- 程序名称：悬架设计计算程序 开发平台：基于matlab平台 计算内容：悬架偏频刚度挠度；螺旋弹簧，多片簧，少片簧，稳定杆，减震器的匹配计算；悬架垂向纵向侧向力学、纵倾、侧倾校核等；独立悬架杠杆比，等效
- 华为OD+真题及解析+智能驾驶
- jQuery信息提示插件
- 基于stm32的通信系统，sim800c与服务器通信，无线通信监测，远程定位，服务器通信系统，gps，sim800c，心率，温度，stm32 由STM32F103ZET6单片机核心板电路、DS18B2
- 充电器检测9-YOLO（v5至v11）、COCO、Create充电器检测9L、Paligemma、TFRecord、VOC数据集合集.rar
- 华为OD+考试真题+实现过程
- 保险箱检测51-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
- 3
- 4
- 5
- 6
前往页