0

任何人都知道如何完成这样的事情

http://www.jarzebinowe.pl/mieszkania.html （您需要选择楼层...）

在 HTML5 中？

这是关于选择公寓、灯光等的问题。.. 顶一下 HTML5 如何处理一张图像，结果就是这样

我很抱歉提出如此奇怪和简洁的问题

4

1 回答 1

0

试试 htmlmap元素

您可能可以通过使用 html 更简单地实现对建筑物的“深入”，map这将让您的用户单击图像的一部分并链接到新的更具体的图像。

这是一个参考： http ://www.w3schools.com/tags/tag_map.asp

[使用更精美的画布显示进行编辑。]

这是代码和小提琴：http: //jsfiddle.net/m1erickson/BbCJx/

<!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:15px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var floorplan=document.getElementById("floorplan");
    var planCtx=floorplan.getContext("2d");
    planCtx.font="24px Arial";
    planCtx.fillStyle="red";

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var lastWindow=-1;
    var plan=new Image();
    var outside=new Image();
    outside.onload=function(){
        plan.onload=function(){
            ctx.drawImage(outside,0,0);
        }
        plan.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/inside.jpg";
    }
    outside.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/outside.png";

    var windows=[]
    windows.push({top:66, left: 70, bottom:111, right:111, floorplan:0, apartment:"3a"});
    windows.push({top:66, left:139, bottom:111, right:183, floorplan:0, apartment:"3b"});
    windows.push({top:66, left:211, bottom:111, right:255, floorplan:0, apartment:"3c"});
    windows.push({top:153, left: 70, bottom:196, right:111, floorplan:1, apartment:"2a"});
    windows.push({top:153, left:139, bottom:196, right:183, floorplan:1, apartment:"2b"});
    windows.push({top:153, left:211, bottom:196, right:255, floorplan:1, apartment:"2c"});
    windows.push({top:239, left:139, bottom:283, right:182, floorplan:2, apartment:"1a"});

    function selectWindow(x,y){
        var w;
        var isInWindow=false;
        for(var i=0;i<windows.length;i++){
            w=windows[i];
            if(x>w.left && x<w.right && y>w.top && y<w.bottom){
               isInWindow=true;
               if(i!=lastWindow){
                   planCtx.clearRect(0,0,floorplan.width,floorplan.height);
                   planCtx.drawImage(plan,0,0);
                   planCtx.fillText("Apt: "+w.apartment+", Plan: "+w.floorplan,70,25);
                   lastWindow=i;
               } 
               break;
            }
        }
        if(!isInWindow){ planCtx.clearRect(0,0,floorplan.width,floorplan.height); };
    }

    function handleMouseMove(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      $("#movelog").html("Move: "+ canMouseX + " / " + canMouseY);

      // Put your mousemove stuff here
      selectWindow(canMouseX,canMouseY);

    }

    $("#canvas").mousemove(function(e){handleMouseMove(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <p>Mouse over a window to see it's floorplan</p>
    <canvas id="canvas" width=300 height=300></canvas>
    <canvas id="floorplan" width=300 height=300></canvas>

</body>
</html>
于 2013-04-15T13:19:46.430 回答