Question

我有一个点击点很少的圆圈。当我点击其中一个时，我希望它旋转到右侧（零度）位置。当我点击顶部的点（90度）时，我希望圆圈顺时针旋转，当我点击底部的点（270度）时，我希望它逆时针旋转。从本质上讲，走最短路径到达右侧。问题是，当我点击底部点（蓝色星形）时，圆圈的最长路径位于右侧。如果你多玩一点，你可以看到它似乎为每个点设置了一个特定的方向，无论它们在哪里，它都遵循这个方向。

我该如何控制旋转方向？任何指向这一点的人都表示赞赏。

function rotate(angle) {
  d3.select('.container')
    .attr('transform', `rotate(${angle})`);
}

body {
  margin: 0 auto;
  text-align: center;
  padding: 10px;
}

.container {
  transform-origin: 250px 250px;
  transition: all 0.5s ease-in;
}

.star {
  cursor: pointer;
}

.star--red {
  fill: red;
}

.star--green {
  fill: green;
}

.star--blue {
  fill: lightblue;
}

.star--pink {
  fill: salmon;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewbox="0 0 500 500"> 
 <g class="container">
  <ellipse id="main-circle" stroke-width="2" ry="145" rx="145" cy="250" cx="250" stroke="#000" fill="#fff"/> 
  <path id="svg_8" class="star star--red" onclick="rotate(90);" 
        d="m228.500007,135.025599l16.424656,0l5.075345,-15.603354l5.075348,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643555l-13.287804,9.643555l5.075609,-15.603354l-13.287806,-9.643293z"/>
  <path id="svg_9" class="star star--green" onclick="rotate(180);"
        d="m119.362495,245.178355l16.424656,0l5.075345,-15.603354l5.075347,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643556l-13.287805,9.643556l5.07561,-15.603354l-13.287806,-9.643293z"/>
  <path id="svg_10"  class="star star--blue" onclick="rotate(270);"
 d="m228.500007,355.025599l16.424656,0l5.075345,-15.603354l5.075347,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643556l-13.287805,9.643556l5.07561,-15.603354l-13.287806,-9.643293z"/> 
  <path id="svg_11" class="star star--pink" onclick="rotate(0);"
 d="m337.362495,245.178355l16.424656,0l5.075345,-15.603354l5.075347,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643556l-13.287805,9.643556l5.07561,-15.603354l-13.287806,-9.643293z"/>
 </g>
</svg>

^{基本上我在这里复制粘贴了代码簿代码，但笔也可以在https://codepen.io/anon/pen/LjMVzM}

Answer 1

您不仅可以仅跟踪所需的旋转，还需要跟踪总旋转。例如，如果你不断点击顶部的任何星号，那么继续前进所需的度数[0, 90, 180, 270, 360, 450, ...]。一旦跟踪总旋转，您需要做的就是确定增量方向，如下所示。

var totAngle = 0;
function rotate(angle) {
  d3.select('.container')
    .attr('transform', () => {
      // Clamp the current rotation to 0-360
      var minAngle = ((totAngle % 360) + 360) % 360;
      // Calculate the required rotation 0/90/180/270
      var rot = (angle - minAngle + 360) % 360;
      // Determine the direction clockwise/counter-clockwise
      totAngle += rot <= 180 ? rot : -90
      return `rotate(${totAngle})`;
    });
}

body {
  margin: 0 auto;
  text-align: center;
  padding: 10px;
}

.container {
  transform-origin: 250px 250px;
  transition: all 0.5s ease-in;
}

.star {
  cursor: pointer;
}

.star--red {
  fill: red;
}

.star--green {
  fill: green;
}

.star--blue {
  fill: lightblue;
}

.star--pink {
  fill: salmon;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewbox="0 0 500 500"> 
 <g class="container">
  <ellipse id="main-circle" stroke-width="2" ry="145" rx="145" cy="250" cx="250" stroke="#000" fill="#fff"/> 
  <path id="svg_8" class="star star--red" onclick="rotate(90);" 
        d="m228.500007,135.025599l16.424656,0l5.075345,-15.603354l5.075348,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643555l-13.287804,9.643555l5.075609,-15.603354l-13.287806,-9.643293z"/>
  <path id="svg_9" class="star star--green" onclick="rotate(180);"  d="m119.362495,245.178355l16.424656,0l5.075345,-15.603354l5.075347,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643556l-13.287805,9.643556l5.07561,-15.603354l-13.287806,-9.643293z"/>
  <path id="svg_10"  class="star star--blue" onclick="rotate(270);"
 d="m228.500007,355.025599l16.424656,0l5.075345,-15.603354l5.075347,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643556l-13.287805,9.643556l5.07561,-15.603354l-13.287806,-9.643293z"/> 
  <path id="svg_11" class="star star--pink" onclick="rotate(0);"
 d="m337.362495,245.178355l16.424656,0l5.075345,-15.603354l5.075347,15.603354l16.424653,0l-13.287801,9.643293l5.075608,15.603354l-13.287807,-9.643556l-13.287805,9.643556l5.07561,-15.603354l-13.287806,-9.643293z"/>
 </g>
</svg>

Answer 2

要逆时针旋转，请使用负角度。

在d3中设定旋转方向

2 个答案: