如何创建自己的交互式全景网站

How to create your own interactive panoramic website

本文关键字：自己的 交互式 全景 网站 创建 何创建      更新时间：2023-09-26

我想做一个网站，这将是一个房间，我希望用户能够看到那个房间在有限的全景视图，例如上/下30度，左/右45度，我想把对象在全景视图，用户可以交互

我发现谷歌街景可以提供全景效果，但我不太确定它是否适合我的需要，因为我想把物体放在里面。

有没有其他好的全景库，可以给我提供工具来支持我想要实现的目标?

你基本上是在谈论围绕视图平移。

你可以通过使用水平&垂直偏移。

下面是带注释的代码和演示:http://jsfiddle.net/m1erickson/32Y5A/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; padding:20px;}
    #canvas{border:1px solid red;}
</style>
<script>
$(function(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.strokeStyle="red";
    ctx.lineWidth=5;
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var lastX=0;
    var lastY=0;
    var panX=0;
    var panY=0;
    var dragging=[];
    var isDown=false;

    // create "draggable" rects
    var images=[];
    images.push({x:200,y:150,width:25,height:25,color:"green"});
    images.push({x:80,y:235,width:25,height:25,color:"gold"});
    // load the tiger image
    var tiger=new Image();
    tiger.onload=function(){
        draw();
    }
    tiger.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/tiger.png";

    function draw(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        // draw tiger
        ctx.globalAlpha=0.25;
        ctx.drawImage(tiger,panX,panY,tiger.width,tiger.height);
        // draw color images
        ctx.globalAlpha=1.00;
        for(var i=0;i<images.length;i++){
            var img=images[i];
            ctx.beginPath();
            ctx.rect(img.x+panX,img.y+panY,img.width,img.height);
            ctx.fillStyle=img.color;
            ctx.fill();
            ctx.stroke();
        }
    }
    // create an array of any "hit" colored-images
    function imagesHitTests(x,y){
        // adjust for panning
        x-=panX;
        y-=panY;
        // create var to hold any hits
        var hits=[];
        // hit-test each image
        // add hits to hits[]
        for(var i=0;i<images.length;i++){
            var img=images[i];
            if(x>img.x && x<img.x+img.width && y>img.y && y<img.y+img.height){
                hits.push(i);
            }
        }
        return(hits);
    }
    function handleMouseDown(e){
      // get mouse coordinates
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      // set the starting drag position
      lastX=mouseX;
      lastY=mouseY;
      // test if we're over any of the images
      dragging=imagesHitTests(mouseX,mouseY);
      // set the dragging flag
      isDown=true;
    }
    function handleMouseUp(e){
      // clear the dragging flag
      isDown=false;
    }

    function handleMouseMove(e){
      // if we're not dragging, exit
      if(!isDown){return;}
      //get mouse coordinates
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      // calc how much the mouse has moved since we were last here
      var dx=mouseX-lastX;
      var dy=mouseY-lastY;
      // set the lastXY for next time we're here
      lastX=mouseX;
      lastY=mouseY;
      // handle drags/pans
      if(dragging.length>0){
          // we're dragging images
          // move all affected images by how much the mouse has moved
          for(var i=0;i<dragging.length;i++){
              img=images[dragging[i]];
              img.x+=dx;
              img.y+=dy;
          }
      }else{
          // we're panning the tiger
          // set the panXY by how much the mouse has moved
          panX+=dx;
          panY+=dy;
      }
      draw();
    }
    // use jQuery to handle mouse events
    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
}); // end $(function(){});
</script>
</head>
<body>
    <h4>Drag the tiger and<br>independently drag the rectangles.</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
相关文章：