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 回答