Как поместить групповой элемент поверх всех элементов в Paper.js?

Question

В следующем примере ярлыки не видны в любое время:

var g1 = new Group({
    position: view.center,
    applyMatrix: false
})
new Shape.Circle({
    radius: 50,
    fillColor: 'red',
    parent: g1
})
new PointText({
    content: 'hello world',
    parent: g1
})

var g2 = new Group({
    position: view.center += [10, 10],
    applyMatrix: false
})
new Shape.Circle({
    radius: 40,
    fillColor: 'yellow',
    parent: g2
})
new PointText({
    content: 'hi there',
    parent: g2
})

var sleep = function(ms, f){setTimeout(f, ms)}

sleep(1000, () => {
    g2.position += [20, 20]
    g1.children[1].fillColor = 'blue'
    g1.children[1].bringToFront();
    sleep(1000, () => {
        g1.bringToFront()
    })
})

Как можномы храним эти тексты перед любыми другими элементами на холсте в любое время?

Примечание. Возможным решением было бы вынуть тексты из групп и расположить их вручную.Тем не менее, это приведет к огромным изменениям дизайна в реальном приложении.

Answer 1

Если изменение порядка на самом деле не вариант, возможный обходной путь может заключаться в игре с цветами и режиме наложения, чтобы сделать видимыми ниже элементы.
Например, если у вас черный фон, то белый текст, а затеморанжевый круг поверх него, если оранжевый круг имеет режим смешивания screen, белый текст все равно будет виден через него.
Вот эскиз , демонстрирующий решение.

// draw a black background so we can see white text
new Path.Rectangle({
    from: [0, 0],
    to: [200, 200],
    fillColor: 'black'
});

// draw a white text
new PointText({
    content: 'Your label here',
    point: [100,80],
    fontSize:20,
    justification: 'center',
    fillColor: 'white'
});

// draw a circle with screen blend mode
new Path.Circle({
    center: [50,100],
    radius: 50,
    fillColor: 'orange',
    blendMode: 'screen'
});

// draw a circle with normal blend mode
new Path.Circle({
    center: [150,100],
    radius: 50,
    fillColor: 'orange',
    blendMode: 'normal'
});

// draw instructions
new PointText({
    content: 'Left circle has a screen blend mode so text is visible even if it is below it',
    point: view.center + [0, -50],
    justification: 'center'
});