Question

我已经看过很多关于如何做到这一点的例子，但没有一个做我需要做的事。

我想要做的是，当某个图像（如果需要它可以包裹在一个单独的div中）悬停在上面时，它会从该图像的中心到另一个图像的中心（或者可能来自第一个图像的中心到其他几个图像的中心），在鼠标输出时，它返回到原始状态。

我尝试使用HTML5画布，但是当我尝试在画布上画一条线同时在画布上移动HTML（图像）时，图像覆盖了画布和画线。当我尝试更改画布的z-index时，除了覆盖HTML的画布并使现有的悬停图像更改不起作用外，它的工作正常。

我发现了绘制线的常规JS示例，但它们都依赖于知道要绘制的确切点......有没有办法通过JS计算精确点而不需要是硬编码的吗？用悬停显示绘制的线条？

Answer 1

如何突出显示图像之间的连接（如果您的设计允许）：

添加足够宽/高的背景画布，以使所有html img适合。
在画布上添加html img（不作为画布的一部分）。
悬停时，在画布上画出连线。在连接的imgs周围加上一个高亮边框。
离开时，清除画布连接线并删除img边框。

Before Hover During Hover

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

<!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; }
    #canvas{border:1px solid red;}
    #img1{position:absolute; left:30px; top:30px; }
    #img2{position:absolute; left:200px; top:180px; }
    #img3{position:absolute; left:30px; top:330px; }
    #img4{position:absolute; left:200px; top:30px; }
    #img5{position:absolute; left:30px; top:180px; }
    #img6{position:absolute; left:200px; top:330px; }
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.fillStyle="skyblue";
    ctx.fillRect(0,0,canvas.width,canvas.height);


    $(".connectable").hover(

        function(){connectGroup(this);},
        function(){unconnectGroup(this);}

    );

    function connectGroup(element){

        var $element=$(element);

        var hubId=$element.attr("id");
        var p=$element.position();
        var hubX=p.left;
        var hubY=p.top;
        var hubW=$element.width();
        var hubH=$element.height();
        ctx.fillStyle="green";
        ctx.fillRect(hubX-3,hubY-3,hubW+6,hubH+6);

        var group=$element.attr("data-group");

        var g="img[data-group='"+group+"']"

        var $group=$(g);

        var notG="img:not("+g+")";
        var $hidden=$(notG);
        $hidden.fadeOut();

        $group.each(function(){

            var $groupMember=$(this);

            var id=$groupMember.attr("id");

            if(id!=hubId){
                var p=$groupMember.position();
                var x=p.left;
                var y=p.top;
                var w=$groupMember.width();
                var h=$groupMember.height();
                ctx.fillStyle="green";
                ctx.strokeStyle="green";
                ctx.beginPath();
                ctx.moveTo(hubX+hubW/2,hubY+hubH/2);
                ctx.lineTo(x+w/2,y+h/2);
                ctx.stroke();
                ctx.fillRect(x-3,y-3,w+6,h+6);
            }

        });

    }

    function unconnectGroup(element){
        // clear the canvas
        ctx.clearRect(0,0,canvas.width,canvas.height);
        // show the hidden images
        $("img").show();
    }



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

</head>

<body>
    <canvas id="canvas" width=330 height=450></canvas>
    <img id="img1" class="connectable" data-group="1" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png" width=100 height=100/>
    <img id="img2" class="connectable" data-group="1" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png" width=100 height=100/>
    <img id="img3" class="connectable" data-group="1" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png" width=100 height=100/>
    <img id="img4" class="connectable" data-group="2" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/ship.png" width=100 height=100/>
    <img id="img5" class="connectable" data-group="2" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/ship.png" width=100 height=100/>
    <img id="img6" class="connectable" data-group="2" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/ship.png" width=100 height=100/>
    <h3>Hover over image to show connections</h3>
</body>
</html>

Answer 2

作为一种非传统的替代方案，您可以试试this library。这是一个HTML5之前的画布老人但仍然很好。它能够将任何DIV转换为伪“画布”，您可以在此DIV中包含任何HTML元素，并在它们之间进行各种绘制。

例如，如果您像这样定义“画布”：

<div id="myCanvas" style="position: relative;"></div>

您可以启动库，设置颜色，笔触大小和绘制线，如下所示：

var jg = new jsGraphics("myCanvas");

jg.setColor("#0000FF");
jg.setStroke(2);
jg.drawLine(x1, y1, x2, y2);

jg.paint();

它不是HTML5画布，但它是一个“画布”，你可以直接将DOM元素放在其中并在那里画画。

这是一个小型演示：http://jsfiddle.net/Rs5eY/1/将鼠标放在顶部图像上。

Answer 3

正如@Boaz建议的那样，理想情况下，您希望将图像作为画布的一部分，同时保留在某些javascript变量中绘制它们的位置。然后，您可以以编程方式从图像到图像绘制线条，因为所有内容都将连接在同一个画布实例上。你有什么理由不能这样做吗？

用悬停在两个元素之间画一条线

3 个答案: