2

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

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

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

我已经找到了绘制线的常规 JS 示例，但它们都依赖于知道要绘制的确切点......有没有办法通过让 JS 计算确切的点而不需要很难做到这一点 -编码？悬停显示画线？

4

3 回答 3

1

这个替代方法如何突出图像之间的联系（如果您的设计允许）：

  • 添加足够宽/高的背景画布，以适应所有 html img。
  • 将您的 html img 添加到画布顶部（而不是画布的一部分）。
  • 悬停时，在画布上绘制连接线并在连接的图像周围放置高亮边框。
  • 离开时，清除画布连接线并移除 img 边框。

悬停前悬停期间

这是代码和小提琴：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>
于 2013-10-07T19:17:24.737 回答
1

作为一个非常规的选择，你可以试试这个库。这是一个 pre-HTML5-canvas oldie-but-still-goodie。它能够将任何 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/在顶部图像上挥动鼠标。

于 2013-10-07T21:19:19.040 回答
0

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

于 2013-10-07T18:12:06.377 回答