HTML5/Javascript 画布 - 用 7 个分区绘制圆圈 [关闭]答案

【问题标题】：HTML5/Javascript canvas - draw circle with 7 partitions [closed]HTML5/Javascript 画布 - 用 7 个分区绘制圆圈 [关闭]
【发布时间】：2014-11-11 20:32:51
【问题描述】：

我需要画一个有 7 个分区的圆。

我已经完成了这段代码：

HTML

<body style="background:#F6A631;">
    <canvas id="wheelcanvas" width="730" height="730"></canvas>  
</body>

var services = ["paragraphs", "paragraphs", "paragraphs", "paragraphs", "paragraphs", "paragraphs", "paragraphs"];

  function serviceCircle() {
    var canvas = document.getElementById("wheelcanvas");
    if (canvas.getContext) {
      var outsideRadius = 360;
      var textRadius = 280;
      var insideRadius = 220;

      ctx = canvas.getContext("2d");
      ctx.clearRect(0,0,720,720); // 720 - 360 - 180 (500 - 250)


      ctx.strokeStyle = "#fff";
      ctx.lineWidth = 5;

      ctx.font = 'bold 18px Tahoma';

      for(var i = 0; i < 7; i++) {
        var angle = startAngle + i * arc;
        ctx.fillStyle = "#ffc000";

        ctx.translate(360 + Math.cos(angle + arc / 2) * textRadius, 360 + Math.sin(angle + arc / 2) * textRadius);
        // ctx.rotate(angle + arc / 2 + Math.PI / 2);
        var text = services[i];
        ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
        ctx.restore();
      } 

      //Arrow
      ctx.fillStyle = "#fff";
      ctx.beginPath();
      ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
      ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
      ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
      ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
      ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
      ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
      ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
      ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
      ctx.fill();
    }
  }
  draw();

我的结果 - Image 我需要这个。将鼠标悬停在分区上并更改其背景。

不知道如何解决。

【问题讨论】：

我不确定您需要帮助哪些部分——我猜是它的自动换行。首先使用var words=services[0].split(' ') 将每个标签分成单独的单词。然后使用context.measureText 得到每个单词的宽度。然后，您可以对这些单词进行自动换行以适应分区。你会发现context.textAlign='center' 有助于将你的包装词居中。
文本问题已解决。我需要带有 7 个带边框的分区和悬停更改分区背景的圆圈。

标签： javascript html canvas

【解决方案1】：

这里有一些伪代码来高亮鼠标下的分区...

使用以下方法计算鼠标与中心点的角度：

// mx,my are mouse coordinates, cx,cy are centerpoint coordinates
var angle=Math.atan2(my-cy,mx-cx).

使用以下方法计算从中心点到鼠标的距离：

var distance=Math.sqrt((mx-cx)*(mx-cx)+(my-cy)*(my-cy)).

如果angle 位于分区的起始角和结束角之间，而distance 位于内半径和外半径之间，则鼠标位于该分区中。

var isInsidePartition1 = 
      angle>partition1StartingAngle &&
      angle<=partition1EndingAngle &&
      distance>=innerRadius &&
      distance<=outerRadius;

现在重绘所有内容（没有突出显示）；

最后，如果鼠标“击中”一个分区，只需用突出显示的颜色重新绘制“击中”的分区。

【讨论】：