2

私の質問は次のとおりです。特定の DIV からの線をどのように描画し、ページ上の他の DIV に接続するにはどうすればよいですか? (クモの巣効果)

これまでのところ、私は得ました - jsFiddle: http://jsfiddle.net/audnB/3/

しかし、私がやろうとしていることは...
以下に示すように、すべての行が母divから来ているようにします:

ここに画像の説明を入力

以下は、私が現在使用しているコードです (私の JsFiddle のものと同じです):
私は実際に<a>これに (リンク) を使用していますが、DIV ではありませんが、私が何を意味するか知っています...

var lineCoords = new Array();
var stage;
var globalTimer = null;

$(window).resize(function() {
  clearTimeout(globalTimer);
  globalTimer = setTimeout(doneResize, 100);
});

function doneResize(){
 drawLines();
}

function drawLines(){
      lineCoords = new Array();
      $('div#container > a').each(function(){
        if ($(this).attr('data-action-properties').length>0){
          var actionProperties = $.parseJSON($(this).attr('data-action-properties'));
        }
    var dx = $(this).css('left').replace('px','');
    var dy = $(this).css('top').replace('px','');
    var wd = ($(this).css('width').replace('px','') /2);
    var hi = ($(this).css('height').replace('px','') /2);

    var position = $(this).offset();

    lineCoords.push(parseInt(dx)+(wd));
    lineCoords.push(parseInt(dy)+(hi));
   }); 

      var layer = new Kinetic.Layer();
      var redLine = new Kinetic.Line({
      points: lineCoords,
      stroke: '#000',
      strokeWidth: 2,
      lineCap: 'round',
      lineJoin: 'round',
    dashArray: '0 30 0 30'
  });

      layer.add(redLine); 
      stage.add(layer);
  }

$(document).ready(function() {
   stage = new Kinetic.Stage({
        container: "container",
        width: $('#container').width(),
        height: $(window).height()
      });
    setTimeout(drawLines,100);
  });

  $(window).resize(function(e){
stage.clear();
});

 function imageresize() {
   var contentwidth = $('body').width();
   if ((contentwidth) < '700'){
   $('.fluidimage').attr('src','little.jpg');
   } else {
   $('.fluidimage').attr('src','big.jpg');
    }
   }

   imageresize();// Triggers when document first loads

   $(window).bind("resize", function(){ // Adjusts image when browser resized
    imageresize();
   });

大変お世話になりました。

4

2 に答える 2

1

以下のようにredLineを宣言する場合

var redLine = new Kinetic.Line({
    points: lineCoords,
    stroke: '#000',
    strokeWidth: 2,
    lineCap: 'round',
    lineJoin: 'round',
    dashArray: '0 30 0 30'
    });

基本的に連続するポイント間に線をpoints: lineCoords 引くため、2つのオプションがあります。1。ポイント2以降の座標から開始し、すべてのポイントの後に、マザーが常に最初であると仮定してポイント1（マザー）の座標を追加します。

points: [lineCoords[0],lineCoords[1],lineCoords[2],lineCoords[3],lineCoords[0],lineCoords[1],lineCoords[4],lineCoords[5]]

または2.forループを作成し、各線を個別に描画します。ここで、点を次のように割り当てます。point: [lineCoords[0],lineCoords[1],lineCoords[2*i],lineCoords[2*i+1]]、基本的に、線の始点と終点。i = 1,2

于 2013-01-11T15:13:37.387 に答える
0

これはあなたが探しているものに近いです：http：//jsfiddle.net/audnB/9/

基本的にアニが言ったことと似ています。

座標が一致するように、すべての線は0,1から2i、2i+1までである必要があります。そしてループで。

    var layer = new Kinetic.Layer();
    for (var i=0; i<lineCoords.length / 2; i++){
         var redLine = new Kinetic.Line({
                 points: [lineCoords[0], lineCoords[1], lineCoords[2*i],lineCoords[2*i+1]],
                 stroke: '#000',
                 strokeWidth: 2,
                 lineCap: 'round',
                 lineJoin: 'round',
                 dashArray: '0 30 0 30'
         });
        layer.add(redLine); 
    };
    stage.add(layer);
于 2013-01-11T16:11:43.573 に答える