Question

我正在尝试paper.js，并且圈了几个圈：

var circle = new Shape.Circle({
   center: [100,100],
   radius: 50,
   strokeColor: 'black',
   strokeWidth: 2
});

这将绘制一个以[100,100]为中心（也可以是一个点：Point({x:100, y:100});），半径为50的圆。这很好，这是一个圆。

如果我想获取一个圆的半径，可以这样做：

circle.radius; // returns 50

但是我不知道该如何再次找回中心。我猜测的部分原因是Shape.Circle返回了一个Shape对象，该对象没有center参数（documentation here），但是我可以肯定地以某种方式返回。有人知道吗？

Answer 1

由于圆以创建时的位置为中心，因此您可以从中获取位置（作为点）以及x和y值：

var circle = new Shape.Circle({
    center: [100,100],
    radius: 50,
    strokeColor: 'black',
    strokeWidth: 2
});

console.log(circle.position.x, circle.position.y); //100 100

来自http://paperjs.org/reference/shape/#position

Answer 2

尽管circle对象没有center属性，但是如果您正确阅读文档，就会发现它确实具有bounds属性。

在图形中，“边界”是完全包含对象的矩形。因此，对于一个圆，边界将是一个矩形，该矩形接触左，右，上和下的圆。因此，边界的中心是圆的中心（请注意：并非所有对象都正确，这取决于您对“中心”的定义。）

Paper.js将为您提供：

circle.bounds.x
circle.bounds.width
circle.bounds.y
circle.bounds.height

因此circle的中心是：

var centerX = circle.bounds.x + circle.bounds.width/2;
var centerY = circle.bounds.y + circle.bounds.height/2;

注意：由于我对paper.js的零经验，您必须自己尝试一下。我只是看了文档

Answer 3

使用：

circle.center[0] and circle.center[1]

导致其为数组

<script>

var circle = {
   center: [100,100],
   radius: 50,
   strokeColor: 'black',
   strokeWidth: 2
};

console.log(circle.center[0]);
</script>

更新：抱歉，我没有正确阅读您的问题。您可以使用circle.position获取中心的位置。

如何在paper.js中获得圆心？

3 个答案: