代码之家 › 专栏 › 技术社区 › ceremcem

如何将组项目置于Paper.js中所有项目之上?

paperjs

0

ceremcem · 技术社区 · 7 年前

在 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()
    })
})

我们怎么能在任何时候把这些文本放在画布上的任何其他项目的前面?

注意:一个可能的解决方案是将文本从组中取出并手动定位。然而,这将在实际应用中引入巨大的设计变化。

1 回复 | 直到 7 年前

1

3

sasensi 7 年前

如果改变顺序真的不是一个选项,一个可能的解决办法是播放颜色和混合模式,使下面的项目可见。
例如,如果您有一个黑色背景,然后是一个白色文本,然后是一个橙色圆圈,如果橙色圆圈有 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'
});