给Javascript制作的对象一个半径 [英] Give a Javascript made object a radius

问题描述

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

I want to have it so that when i create a "component" i can set its radius to make it curved. Below is my code for component create:

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位置，但我找不到给它一个半径的方法。我的代码的另一端使用了这个组件函数：

as you can see it specifies the width height, color and x and y positions but i can't find a way to give it a radius. The other end of my code that uses this component function is here:

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

帮助将不胜感激！

推荐答案

使用圆弧可以绘制一个带圆角的矩形：

Drawing a rectangle with rounded corners can be done using arcs instead:

弧取参数：

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

这只是使用半径和开始和结束角度在每个角落绘制四个弧。由于我们使用单个路径，因此将在每个弧之间绘制从前一个弧的末尾到新弧的开头的线 - 这就是订单重要的原因。

This simply draws four arc in each corner using radius and start and end angle. Since we use a single path lines will be drawn between each arc from the end of the previous arc to the beginning of the new one - which is why the order matters.

只需 fill（）即可关闭路径并填充形状。如果你想 stroke（），请记住首先使用 closePath（）。如果您之后通过其他对象添加了路径，请记住在添加之前使用 beginPath（）。

Simply fill() to close the path and fill the shape. If you want to stroke() it as well remember to use closePath() first. If you have paths added later via other objects etc., also remember to use beginPath() before you add them.

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

The line setting radius will also clamp it to the minimum size possible:

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

首先使用高度和宽度的最小值除以2。然后是最小半径和这个结果。这确保半径不能大于最短边的一半，这将是不可能的。

First the minimum of height and width is used divided on two. Then the minimum of radius and this result. This makes sure the radius can't be larger then half of the shortest side which would be "impossible".

关于 setTransform的注释（ ）下面的用法 - 如果你没有累积的变换，这应该可以正常工作。如果你这样做并且不能轻易改变它用 ctx.translate（this.x，this.y）替换 setTransform（） s 并通过调用 ctx.translate（-this.x，-this.y）; 完成反转后。如果它们以某种方式被转换（旋转，缩放等），我建议使用setTransforms悬停所有对象。

A note on the setTransform() usage below - if you don't have accumulated transforms this should work fine. If you do and can't easily change it replace the setTransform()s with ctx.translate(this.x, this.y) and after finished reverse it by calling ctx.translate(-this.x, -this.y);. I would recommend using setTransforms for all your objects hover if they are transformed (rotated, scaled etc.) somehow.

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>

这篇关于给Javascript制作的对象一个半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！