Question

我想建立一个会议室的网站，我希望用户能够在有限的全景视图中查看该房间，例如上/下30度，左/右45度，我想将对象放在用户可以与之交互的全景视图中。

我发现谷歌街景可以提供全景效果，但我不太确定它是否符合我的需要，因为我想把物品放入其中。

是否有任何替代的全景图书馆很好，可以给我工具来支持我想要实现的目标？

Answer 1

你基本上是在围绕一个视图进行平移。

你可以通过水平和＆amp;绘制视图来做到这一点。垂直偏移。

以下是带注释的代码和演示：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>

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

1 个答案: