javascript - ホバーで2つの要素の間に線を引く

Question

これを行う方法について多くの例を見てきましたが、必要なことを行っている例はありません。

私がやりたいことは、特定の画像（必要に応じて個々のdivにラップすることができます）が上に置かれると、その画像の中心から別の画像の中心まで（または潜在的に最初の画像を他の複数の画像の中央に移動)、マウスアウトで元の状態に戻ります。

HTML5のキャンバスを使ってみたのですが、キャンバス上でHTML（画像）をずらしながら線を引こうとすると、画像がキャンバスを覆って線が引かれました。キャンバスの z-index を変更しようとすると、キャンバスが HTML を覆い、ホバー時の既存の画像の変更が機能しないことを除いて機能しました。

線を描画する通常のJSの例を見つけましたが、それらはすべて描画する正確なポイントを知ることに依存しています...正確なポイントをJSで計算し、難しくする必要がないことでこれを行う方法はありますか?コード化？描かれた線を表示するオンホバーで？

score 1 · Accepted Answer

型破りな代替手段として、このライブラリを試すことができます。これは、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/上の画像の上でマウスを振ってください。

score 1 · Accepted Answer

画像間の接続を強調するこの代替手段はどうですか (デザインが許可する場合):

すべての html 画像が収まる十分な幅/高さの背景キャンバスを追加します。
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>

javascript - ホバーで2つの要素の間に線を引く

3 に答える 3

Related

Reference