Блог

На холсте один прямоугольник и пара кругов. Разбросаны. Круги, которые находятся поверх прямоугольника, должны быть разного цвета.

Круг должен полностью находиться внутри прямоугольника.

Как я могу обнаружить это в Paper JS.

Элемент метода .isInside (прямоугольник) кажется, идеально соответствует вашим потребностям.

Вот эскиз, демонстрирующий решение.

 // 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';
    }
});