Question

我编写了简单的js函数，它在画布区域的随机坐标中输出数组中的单词或短语。

但我对我的算法或风格感到困惑，这些词在随机坐标中出现并互相覆盖。如何改善我的功能或风格以避免这个问题？

＆＃13;

$(document).ready(function() {
  words();
});

// Words array
function words() {
  var words = ["lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet", "lorem ipsum dolor sit amet"];

  $.each(words, function(index, value) {
    // console.log( index + ": " + value );
    $('#words_block').append('<div class="word"><span>' + value + '</span></div>');
  });

  // callback wuth check
  if (typeof wordsCloud != 'undefined' && $.isFunction(wordsCloud)) {
    return wordsCloud();
  } else {
    alert('wordsCloud() does not exist');
  }
}

// Words effects
function wordsCloud() {
  var maxDelay = 2000;
  var minSpeed = 2500;
  var maxSpeed = 4000;

  $('#words_block .word').each(function() {
    var delay = Math.ceil(Math.random() * maxDelay);
    var speed = maxSpeed + Math.ceil(Math.random() * (minSpeed - maxSpeed));

    var random_num_two = Math.floor(Math.random() * 101);
    var random_num_three = Math.floor(Math.random() * (0 - 700) + 700);
    var random_text_size = Math.floor(Math.random() * (14 - 55) + 55);

    $(this).delay(delay).css({
      "font-size": random_text_size + 'px',
      top: random_num_three + 'px',
      left: random_num_two + '%'

      // opacity from .1 to .6
    }).fadeTo(speed, (Math.random() * (0.1 - 0.7) + 0.7).toFixed(2));
  });
}

＆＃13;

body {
  background-color: black;
  color: white;
}
#words_block {
  cursor: default;
  position: relative;
  height: 700px;
  width: 900px;
}
#words_block .word {
  text-transform: uppercase;
  position: absolute;
  opacity: 0;
}
#words_block .word:hover {
  z-index: 10;
  opacity: 1 !important;
}
#words_block .word:hover span {
  background-color: red !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div id="words_block"></div>

＆＃13;

http://jsfiddle.net/ajf5nkp8/17/

Answer 1

您可以存储每个“随机”位置字符串的位置，并通过检查碰撞确保它们不重叠。

function(rect1_x, rect1_y, rect1_w, rect1_h,
                         rect2_x, rect2_y, rect2_w, rect2_h)
{

    // top-left corner
    if ( this.PointInRect(rect1_x, rect1_y, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;}
    // top-right corner
    if ( this.PointInRect(rect1_x + rect1_w - 1, rect1_y, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;}
    // bottom-right corner
    if ( this.PointInRect(rect1_x + rect1_w - 1, rect1_y + rect1_h - 1, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;}
    // bottom-left corner
    if ( this.PointInRect(rect1_x, rect1_y + rect1_h - 1, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;}
    // Check to see if rectangle 2 is hit any part of rectanlge 1
    // top-left corner
    if ( this.PointInRect(rect2_x, rect2_y, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;}
    // top-right corner
    if ( this.PointInRect(rect2_x + rect2_w - 1, rect2_y, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;}
    // bottom-right corner
    if ( this.PointInRect(rect2_x + rect2_w - 1, rect2_y + rect2_h - 1, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;}
    // bottom-left corner
    if ( this.PointInRect(rect2_x, rect2_y + rect2_h - 1, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;}
    // If there is no collision
    return false;
}

或者你可以在每个字符串周围绘制一个实心框，不透明度设置为25％，这将覆盖其后面的其他字符串，这可能会提供更好的感觉和风格。

如何改善我的随机词云＆＃34;功能？

1 个答案: