javascript - HTML5 Canvas : Draw lines from a centered DIV, 连接到周围的其他 DIV 吗？ (蜘蛛网效应)Kinetic JS

Question

我的问题是:如何绘制来自特定 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();
   });

非常感谢您的帮助，非常感谢!

Answer 1

当您如下声明 redLine 时

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

使用 points: lineCoords 本质上是在连续的点之间画线，所以你有两个选择， 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

行的起点和终点