函数arc()在p5.js中无法正确呈现

Question

我只是用p5.js做了一个小程序,但我发现了一些奇怪的东西.当尺寸非常大时,arc()函数似乎无法正确呈现.

这是我的代码:

var ellipseSize = 200;
var strokeSize = 60;

for(var j=0; j<filteredTrees.length; j++){
  strokeWeight(strokeSize);
  var rad = 0;
  for(var i =0; i < filteredTrees[j].trees.length; i++){
    var element = filteredTrees[j].trees[i];
    var radBegin = rad;
    rad += (element.nbr/filteredTrees[j].rangeNbr)*(2*PI);
    stroke(element.color.red, element.color.green, element.color.blue);
    arc(width/2, height/2, ellipseSize, ellipseSize, radBegin, rad);
  }
  ellipseSize += (strokeSize*2);
  strokeSize *= 0.9;
}

这里是渲染图像,黑色圆圈表示弧应该具有正确的对齐方式.有些弧超出预期位置,你可以在那里看到:

你知道为什么会这样吗？

Answer 1

我不确定您使用的是什么渲染器，默认的 2D 渲染器在角度之间使用贝塞尔曲线： https: //github.com/processing/p5.js/blob/0.6.1/src/core/p5.Renderer2D.js# L430

所以，没有办法提高电弧分辨率......

我建议您使用正弦和余弦来绘制弧：

function setup(){
  createCanvas(200, 100);
  customArc(20, 50, 20, 20, 0, PI, PI/2);
  customArc(60, 50, 20, 20, 0, PI, PI/4);
  customArc(100, 50, 20, 20, 0, PI, PI/10);
}

function customArc(x, y, w, h, start, stop, resolution){
  beginShape();
  for(var i = start; i < stop; i += resolution){
    vertex(x + sin(i) * w, y + cos(i) * h);
  }
  endShape();
}

<script src="https://github.com/processing/p5.js/releases/download/0.7.2/p5.min.js"></script>