javascript - 绕一圈

Question

我想将 2 个 div 中的文本绕成一个圆圈。我已经创建了我的 div 和圆圈。现在试图找出如何包装测试。似乎没有什么能做到这一点。

.blackbox{
    width: 600px;
    height:400px;
    margin-top: 12%;
    margin-left:auto;
    margin-right:auto;
    background-color: black;
    padding:35px;
    display:block;   
    line-height: 2.8em;
    font-size: 13px;
}

.center img{
    width: 200px;
    height:200px;
    display:inline-block;
    float:left;
    background: #f00;
    border-radius: 50%;
}

.left{
    width:33%;
    margin-top: 3.5%;
    color: white;
    display:inline-block;   
    float:left;
    text-align: right;
}

.right{
    width:33%;    
    margin-top: 3.5%;
    color: white;
    display:inline-block;    
    float:left;
    text-align: left;
}

<div class="content">
    <div class="blackbox">
        <div class="left">we believe that a great brand is a compassionate brand, tuned into what's affecting the people around it. Great brands listen actively and respond thoughtfully. They don't try to appear sincere-they are sincere.</div>
         <div class="center"><img class="img-responsive" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></div>
        <div class="right">You can be a Fortune 500 company, a nonprofit, a tech startup, or a fashion label, to be competitive and succeed unequivocally, while also doing what's right. ecognizes the value in every endeavor. <br><br> If that sounds good to you, let's get to work.</div>
    </div>
</div

这是jsfiddle

Answer 1

我用 javascript 编写了一个版本，因为正如评论中所述，任何 CSS 解决方案很可能都具有有限的浏览器支持。

在我的演示中，我更改了一些文本以更好地说明换行。我还给出了 div 元素 id，并调整了 CSS。

使用时，您需要将两个 jQuery 对象传递给 wrapToCircle()，第一个是要换行的文本，另一个是充当圆圈的元素。对于您的演示，如下所示:

$(function() {
  wrapToCircle($(".left"), $(".cirle img"));
  wrapToCircle($(".right"), $(".cirle img"));
});

它假设“圆形”元素的中心位于中间，其直径为其宽度(...或高度 - 如果元素是矩形，则以较小者为准)。

$(function() {
  // call wrapToCircle( div that you want to wrap, adjacent circle to follow)
  wrapToCircle($("#left"), $("#cirle img"));
  wrapToCircle($("#right"), $("#cirle img"));
});

function wrapToCircle($elementToWrap, $aroundElement) {

  var elementToWrapPos = $elementToWrap.offset();
  var aroundElementCentre = {}
  var radius = Math.min($aroundElement.width() / 2, $aroundElement.height() / 2);

  aroundElementCentre.left = $aroundElement.offset().left + ($aroundElement.width() / 2);
  aroundElementCentre.top = $aroundElement.offset().top + ($aroundElement.height() / 2);

  var text = $elementToWrap.text().split(" ");
  var wrappedText = '';
  var wordWidths = [];
  var isToTheRightOfCircle = $elementToWrap.offset().left > aroundElementCentre.left;

  $(text).each(function(idx, elem) {
    wrappedText += '<span>' + elem + '</span> ';
  });

  wrappedText += '<span>&nbsp;</span>'; // wrap text, end with a space, to measure width
  $elementToWrap.empty().append(wrappedText);

  $elementToWrap.find("span").each(function(idx, elem) {
    wordWidths.push($(this).width());
  });

  var $space = $elementToWrap.find('span').last();
  var spaceWidth = $space.width();
  $space.remove();

  var widthToWrapTo = $elementToWrap.width();
  var currentLine = '';
  var currentLineWidth = 0;

  $elementToWrap.empty();

  var curEl = $("<div>.</div>").appendTo($elementToWrap); // need default content so we can get the height
  var textHeight = curEl.height();
  var adjustedWidth = 0;

  adjustedWidth = calculateNewTextWidth(aroundElementCentre, curEl, textHeight, radius, widthToWrapTo);

  currentLine = "";

  // loop over the words
  $(text).each(function(idx, elem) {

    if (currentLineWidth + wordWidths[idx] + spaceWidth <= adjustedWidth) {
      currentLine += text[idx] + " ";
      currentLineWidth += wordWidths[idx] + spaceWidth;
    } else { // start a new line
      curEl.text(currentLine);
      curEl.css('width', adjustedWidth);

      if (isToTheRightOfCircle) {
        curEl.css('position', 'relative');
        curEl.css('left', -(adjustedWidth - widthToWrapTo));
      }

      curEl = $("<div>").appendTo($elementToWrap);

      adjustedWidth = calculateNewTextWidth(aroundElementCentre, curEl, textHeight, radius, widthToWrapTo);

      currentLine = text[idx] + " ";
      currentLineWidth = wordWidths[idx] + spaceWidth;
    }
  });

  curEl.text(currentLine);
  curEl.css('width', adjustedWidth);
  if (isToTheRightOfCircle) {
    curEl.css('position', 'relative');
    curEl.css('left', -(adjustedWidth - widthToWrapTo));
  }
}

function findX(y, radius) {
  return Math.sqrt(radius * radius - y * y);
}

function calculateNewTextWidth(aroundElementCentre, curEl, curElHeight, radius, widthToWrapTo) {
  var heightfromCircleCentre = Math.abs(aroundElementCentre.top - (curEl.offset().top + (0.5 * curElHeight)));
  if (heightfromCircleCentre > radius) {
    return widthToWrapTo + radius;
  } else { // vertically, this text is within the top and bottom boundaries of the cirlce
    return widthToWrapTo + (radius - findX(heightfromCircleCentre, radius));
  }
}

.blackbox {
  width: 600px;
  height: 400px;
  margin-top: 12%;
  margin-left: auto;
  margin-right: auto;
  background-color: black;
  padding: 35px;
  display: block;
  line-height: 2.8em;
  font-size: 13px;
}

.center {
  width: 200px;
  height: 200px;
  float: left;
}

.center img {
  width: 200px;
  height: 200px;
  background: #f00;
  border-radius: 50%;
}

.left {
  width: 33%;
  margin-top: 3.5%;
  color: white;
  display: inline-block;
  float: left;
  text-align: left;
  padding-right: 5px;
}

.right {
  width: 32%;
  margin-top: 3.5%;
  color: white;
  display: inline-block;
  float: left;
  text-align: right;
  padding-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="blackbox">
    <div id="left" class="left">we believe that a great brand is a useful brand, tuned into what's affecting the people around it. Great brands listen actively and respond thoughtfully. They don't try to appear sincere - they are sincere... Here is more text that wraps the bottom
      of the circle.</div>
    <div id="cirle" class="center"><img class="img-responsive" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></div>
    <div id="right" class="right">You can be a Fortune 500 company, any nonprofit, a tech startup, or a fashion label, to be competitive and succeed unequivocally, while also doing what's right. ecognizes the value in every endeavor. If that sounds good to you, let's do this right
      now.</div>
  </div>
</div>

这是 JsFiddle 中的相同代码 https://jsfiddle.net/wbaatowk/4/