javascript - 给 Javascript 对象指定一个半径

Question

我想要拥有它，这样当我创建一个“组件”时，我可以设置它的半径以使其弯曲。下面是我的组件创建代码:

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.color = color;
  this.update = function() {
    ctx = GameArena.context;
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

正如你所看到的，它指定了宽度高度、颜色以及x和y位置，但我找不到给它半径的方法。使用此组件函数的代码的另一端在这里:

PaintBrush = new component(30, 30, "Blue", 30, 320);

帮助将不胜感激!

Answer 1

可以使用圆弧来绘制圆 Angular 矩形:

弧接受参数:

arc(x, y, radius, startAngle, endAngle [,ccw]); // we won't need counter-clockwise

例如:

var pi2 = Math.PI * 2;                        // 360 deg.
var r = this.radius, w = this.width, h = this.height;
// ...

// draw rounded rectangle
ctx.beginPath();
ctx.arc(r, r, r, pi2*0.5, pi2*0.75);          // top-left
ctx.arc(r+w-r*2, r, r, pi2*0.75, pi2);        // top-right
ctx.arc(r+w-r*2, r+h-r*2, r, 0, pi2*0.25);    // bottom-right
ctx.arc(r, r+h-r*2, r, pi2*0.25, pi2*0.5);    // bottom-left

这只是使用半径以及起始 Angular 和结束 Angular 在每个 Angular 绘制四个圆弧。由于我们使用单个路径，因此将在每个弧之间从前一个弧的末尾到新弧的开头绘制线条 - 这就是顺序很重要的原因。

只需fill()即可关闭路径并填充形状。如果您想要 lines() ，也请记住先使用 closePath() 。如果您稍后通过其他对象等添加了路径，还请记住在添加它们之前使用 beginPath()。

线条设置半径也会将其限制为可能的最小尺寸:

this.radius = Math.min(radius, Math.min(width, height)/2);

首先将高度和宽度的最小值一分为二。然后是半径的最小值和这个结果。这确保半径不能大于最短边的一半，这是“不可能的”。

下面关于 setTransform() 用法的注释 - 如果您没有累积转换，这应该可以正常工作。如果您这样做并且无法轻松更改它，请将 setTransform() 替换为 ctx.translate(this.x, this.y) 并在完成后通过调用反转它ctx.translate(-this.x, -this.y);。我建议对所有悬停的对象使用 setTransforms，如果它们以某种方式进行变换(旋转、缩放等)。

演示

var GameArena = {context: c.getContext("2d")};  // dummy
var PaintBrush  = new component(200, 100, "#37f", 10, 10, 16);
PaintBrush.update();

function component(width, height, color, x, y, radius) {
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  
  this.radius = Math.min(radius, Math.min(width, height)/2); // clamp radius
  
  this.color = color;
  this.update = function() {
    var pi2 = Math.PI * 2;                        // 360 deg.
    var r = this.radius, w = this.width, h = this.height;
    
    ctx = GameArena.context;
    ctx.fillStyle = this.color;
    ctx.setTransform(1,0,0,1,this.x, this.y);     // transform (absolute here)
    
    // draw rounded rectangle
    ctx.beginPath();
    ctx.arc(r  , r  , r, pi2*0.5 , pi2*0.75);     // top-left
    ctx.arc(w-r, r  , r, pi2*0.75, pi2);          // top-right
    ctx.arc(w-r, h-r, r, 0       , pi2*0.25);     // bottom-right
    ctx.arc(r  , h-r, r, pi2*0.25, pi2*0.5);      // bottom-left
    ctx.fill();
    
    ctx.setTransform(1,0,0,1,0,0);                // reset transform
  }
}

<canvas id=c></canvas>