Fatal编程技术网
  • html/
  • HTML5和图像映射

HTML5和图像映射

html image html5-canvas

HTML5和图像映射,html,image,html5-canvas,Html,Image,Html5 Canvas,任何人都知道如何完成这样一件事 （您需要选择楼层…） 在html5中 这是关于选择公寓，灯光等。。 上图：HTML5是如何处理一幅图像的，结果就是这样 很抱歉，我的问题如此奇怪和简洁请尝试htmlmap元素 通过使用htmlmap，用户可以单击图像的一部分并链接到新的更具体的图像，您可能更简单地实现对建筑物的“深入”操作 这里有一个参考： [使用画布进行更华丽的显示进行编辑。] 下面是代码和小提琴： 正文{背景色：象牙色；填充：15px；} 画布{边框：1px纯红；} $（函数（）{ var

任何人都知道如何完成这样一件事

（您需要选择楼层…）

在html5中

这是关于选择公寓，灯光等。。 上图：HTML5是如何处理一幅图像的，结果就是这样

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

请尝试html
map
元素

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

这里有一个参考：

[使用画布进行更华丽的显示进行编辑。]

下面是代码和小提琴：


正文{背景色：象牙色；填充：15px；}
画布{边框：1px纯红；}
$（函数（）{
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=“红色”；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var lastWindow=-1；
var plan=新图像（）；
var outside=新图像（）；
outside.onload=函数（）{
plan.onload=函数（）{
ctx.drawImage（外部，0,0）；
}
plan.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/inside.jpg";
}
outside.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/outside.png";
变量窗口=[]
推窗（{顶部：66，左侧：70，底部：111，右侧：111，楼层平面图：0，公寓：“3a”}）；
推窗（{顶部：66，左侧：139，底部：111，右侧：183，平面图：0，公寓：“3b”}）；
推窗（{顶部：66，左侧：211，底部：111，右侧：255，平面图：0，公寓：“3c”}）；
推窗（{顶部：153，左侧：70，底部：196，右侧：111，平面图：1，公寓：“2a”}）；
推窗（{顶部：153，左侧：139，底部：196，右侧：183，平面图：1，公寓：2b}）；
推窗（{顶部：153，左侧：211，底部：196，右侧：255，平面图：1，公寓：“2c”}）；
推窗（{顶部：239，左侧：139，底部：283，右侧：182，平面图：2，公寓：“1a”}）；
功能选择窗口（x，y）{
var-w；
var isInWindow=假；
对于（变量i=0；iw.left&&xw.top&&y）

<!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>