如何将一个分组项目置于Paper.js的所有项目之上？

Question

在following example中，随时都看不到标签：

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混合模式，则仍然可以通过它看到白色文本。
这是sketch演示解决方案。

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