计算多个圆片段旋转

Calculate multiple circle fragment rotations

本文关键字：片段 旋转 计算      更新时间：2023-09-26

所以我有 4 个 SVG 圆圈，我用stroke-dash来遮罩它们。一般的想法是，他们应该根据他们的百分比组成一个完整的圆圈。

我已经得到了每个段的长度，当我手动旋转它们时，我看到它们加起来。但是我不知道如何计算每个段的旋转。下面是一个 jsbin 链接，显示我走了多远：

http://jsbin.com/lutodomujo/1/

另外，如果有更好的方法来解决这个问题，我很高兴听到它。唯一必须起作用的是悬停效果，如示例中所示。

顺便说一下，以下行纯粹是一个疯狂的猜测（您可能已经注意到）：

var rotate = (Math.sin((c-prevRotate)/100) * Math.PI)*100; // ?

据我所知，这是我唯一需要帮助才能弄清楚的。

var prevRotate = 0;
$('circle').each(function (i) {
  var r = $(this).attr('r');
  var val = $(this).data('perc');
  var c = Math.PI * (r * 2);
  var pct = ((100 - val) / 100) * c;
  var rotate = (Math.sin((c-prevRotate)/100) * Math.PI)*100;
  $(this).css({
    strokeDasharray: c,
    strokeDashoffset: pct,
    transform: 'rotate(' + rotate + 'deg)'
  });
  prevRotate += pct;
});
svg { width: 300px; }
circle {
  stroke-width: 3;
  transform-origin: center;
}
circle:hover {stroke-width: 5}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 164">
  <circle fill="none" stroke="#A5D2C6" cx="82" cy="82" r="80" data-perc="40"/>
  <circle fill="none" stroke="#000000" cx="82" cy="82" r="80" data-perc="30"/>
  <circle fill="none" stroke="#EBE6B7" cx="82" cy="82" r="80" data-perc="20"/>
  <circle fill="none" stroke="#F1AAA6" cx="82" cy="82" r="80" data-perc="10"/>
</svg>

我做了一些更改，它的工作：

var prevRotate = 0;
$('circle').each(function (i) {
  var r = $(this).attr('r');
  var val = $(this).data('perc');
  var c = Math.PI * (r * 2);
  var pct = ((100 - val) / 100) * c;
  var rotate = prevRotate;
  $(this).css({
    strokeDasharray: c,
    strokeDashoffset: pct,
    transform: 'rotate(' + rotate + 'deg)'
  });
  prevRotate += (360*val/100); 
});
相关文章：