检测 Paper JS 中的重叠对象

Question

canvas 上有一个矩形和几个圆圈。疏散。矩形顶部的圆圈需要不同的颜色。

圆必须完全在矩形内。

如何在 Paper JS 中检测到这一点。

Answer 1

方法item.isInside(rectangle)似乎完全符合您的需要。

这里是 sketch 演示解决方案。

// create 3 circles scattered on the canvas.
var circles = [
    new Path.Circle({
        center: view.center - 100,
        radius: 50,
        fillColor: 'orange'
    }),
    new Path.Circle({
        center: view.center,
        radius: 50,
        fillColor: 'orange'
    }),
    new Path.Circle({
        center: view.center + 150,
        radius: 50,
        fillColor: 'orange'
    })
];

// Create a rectangle.
var rectangle = new Path.Rectangle({
    from: view.center - 80,
    to: view.center + 80,
    strokeColor: 'black'
});

// Scale things up so that we can see better.
project.activeLayer.fitBounds(view.bounds.scale(0.8));

// For each circle...
circles.forEach(circle => {
    // ...if circle is contained in rectangle bounds...
    if (circle.isInside(rectangle.bounds)) {
        // ...change circle color.
        circle.fillColor = 'blue';
    }
});

检测 Paper JS 中的重叠对象

Detecting Overlapping objects in Paper JS

paperjs