查找坐标以在圆内绘制正方形

Question

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

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

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);
};

Answer 1

要在圆形内拟合正方形，可以使用如下所示（根据需要采用）：

现场例子

/**
 * 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);
}

只需将fillRect（）替换strokeRect（）。

这将导致以下情况（添加圆圈以供参考）：

将其用于一般用途：

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);
};