找到坐标以在圆内绘制正方形答案

【问题标题】：find coordinates to draw square inside circle找到坐标以在圆内绘制正方形
【发布时间】：2014-02-25 02:18:45
【问题描述】：

如何计算在圆内画正方形的起始坐标？

功能绘制圆形光谱。现在帮我找到在圆内绘制矩形的起始坐标

Gradient.prototype.renderSpectrum = function() {
    var radius = this.width / 2;
    var toRad = (2 * Math.PI) / 360;
    var step = 1 / radius;

   this.ctx.clearRect(0, 0, this.width, this.height);

    for(var i = 0; i < 360; i += step) {
        var rad = i * toRad;
        this.ctx.strokeStyle = 'hsl(' + i + ', 100%, 50%)';
        this.ctx.beginPath();
        this.ctx.moveTo(radius, radius);
        this.ctx.lineTo(radius + radius * Math.cos(rad), radius + radius * Math.sin(rad));
        this.ctx.stroke();
    }

   this.ctx.fillStyle = 'rgb(255, 255, 255)';
   this.ctx.beginPath();
   this.ctx.arc(radius, radius, radius * 0.8, 0, Math.PI * 2, true);
   this.ctx.closePath();
   return this.ctx.fill();

}

绘制正方形的函数

Gradient.prototype.renderGradient = function() {
  var color, colors, gradient, index, xy, _i, _len, _ref, _ref1;
  xy = arguments[0], colors = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
  gradient = (_ref = this.ctx).createLinearGradient.apply(_ref, [0, 0].concat(__slice.call(xy)));
  gradient.addColorStop(0, (_ref1 = colors.shift()) != null ? _ref1.toString() : void 0);
  for (index = _i = 0, _len = colors.length; _i < _len; index = ++_i) {
    color = colors[index];
    gradient.addColorStop(index + 1 / colors.length, color.toString());
  }
  this.ctx.fillStyle = gradient;
  this.renderSpectrum();
  return this.ctx.fillRect(?, ?, this.width * 0.8, this.height * 0.8);
};

【问题讨论】：

标签： html html5-canvas

【解决方案1】：

要将正方形放入圆内，您可以使用类似这样的方法（根据需要采用）：

Live example

/**
 * ctx - context
 * cx/cy - center of circle
 * radius - radius of circle
*/
function squareInCircle(ctx, cx, cy, radius) {

    var side = Math.sqrt(radius * radius * 2),  // calc side length of square
        half = side * 0.5;                      // position offset

    ctx.strokeRect(cx - half, cy - half, side, side);
}

只需将 strokeRect() 替换为 fillRect()。

这将导致这个（添加圆圈以供参考）：

将其用于一般用途：

function getSquareInCircle(cx, cy, radius) {

    var side = Math.sqrt(radius * radius * 2),  // calc side length of square
        half = side * 0.5;                      // position offset

    return {
        x: cx - half,
        y: cy - half,
        w: side,
        h: side
    }
}

然后在你的方法中：

Gradient.prototype.renderGradient = function() {
  var color, colors, gradient, index, xy, _i, _len, _ref, _ref1;
  xy = arguments[0], colors = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
  gradient = (_ref = this.ctx).createLinearGradient.apply(_ref, [0, 0].concat(__slice.call(xy)));
  gradient.addColorStop(0, (_ref1 = colors.shift()) != null ? _ref1.toString() : void 0);
  for (index = _i = 0, _len = colors.length; _i < _len; index = ++_i) {
    color = colors[index];
    gradient.addColorStop(index + 1 / colors.length, color.toString());
  }
  this.ctx.fillStyle = gradient;
  this.renderSpectrum();

  // supply the proper position/radius here:
  var square = getSquareInCircle(centerX, centerY, radius);

  return this.ctx.fillRect(square.x, square.y, square.w, square.h);
};

【讨论】：

我尝试了上面的代码..并进行了相应的修改，但它没有在圆圈内正确对齐jsfiddle
@BLPraveen 您需要将其相对于圆心对齐。
我试过了，这里是 [jsfiddle](jsfiddle.net/Bl_praveen2004/rjN5F/)。我猜边计算必须是 Math.sqrt(radius * radius / 2)（从对角线中找到边）。我需要用 HSL 和 HSV 渐变而不是中风填充矩形。它没有正确生成
圆内矩形如何生成HSL和HSV？
@BLPraveen 我相信这将是另一个问题 - 请考虑提出一个新问题。要填充只需用填充替换笔画。在调用填充之前将渐变设置为填充样式。

【解决方案2】：

这是我如何计算坐标以在圆内绘制正方形

1)获取135度内圆的坐标使用公式

x = rad + rad * Math.cos(135 * ( 2 Math.PI / 360);

y = rad - rad * Math.sin(135 * ( 2 Math.PI / 360);

2) 然后 pyhthogoram therom 求正方形的宽度

width = Math.sqrt(rad * rad / 2);

【讨论】：