Wall of People Groups: the poster's sheets lie on a grey table, and names are as black on screen as on paper
This commit is contained in:
parent
fab6cb695f
commit
2473ce5d01
1 changed files with 6 additions and 3 deletions
|
|
@ -186,10 +186,13 @@ export class WallCanvas {
|
|||
const sp = this.sp
|
||||
// The overlay (title, chart, footer) follows the same transform as the canvas.
|
||||
if (this.ovw) this.ovw.style.transform = `translate(${tx}px,${ty}px) scale(${s})`
|
||||
// A grey table under white sheets (the wall's own background is near-white), and a 3 px drop edge
|
||||
// per sheet, drawn as an offset rect: shadowBlur ignores the transform and costs a blur per frame.
|
||||
ctx.save(); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.fillStyle = '#d4d4d4'; ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); ctx.restore()
|
||||
ctx.fillStyle = 'rgba(0,0,0,.16)'
|
||||
for (const R of sp.sheets) ctx.fillRect(R.x + 3 / s, R.y + 3 / s, R.w, R.h)
|
||||
ctx.fillStyle = '#fff'
|
||||
ctx.shadowColor = 'rgba(0,0,0,.18)'; ctx.shadowBlur = 12 / s
|
||||
for (const R of sp.sheets) ctx.fillRect(R.x, R.y, R.w, R.h)
|
||||
ctx.shadowColor = 'transparent'; ctx.shadowBlur = 0
|
||||
const [x0, y0] = this.toWorld(0, 0), [x1, y1] = this.toWorld(this.cssW, this.cssH)
|
||||
const cardPx = (sp.cards[0]?.w || 0) * s, want = []
|
||||
for (const R of sp.cards) {
|
||||
|
|
@ -239,7 +242,7 @@ export class WallCanvas {
|
|||
if (cardPx < TEXT_PX) return
|
||||
ctx.textAlign = 'center'; ctx.textBaseline = 'top'
|
||||
ctx.font = `700 ${nameFs}px -apple-system, "Segoe UI", Arial, sans-serif`
|
||||
ctx.fillStyle = groupLink(g) ? '#0095f6' : '#1c1c1c'
|
||||
ctx.fillStyle = '#1c1c1c' // as printed; a linked name shows the pointer cursor instead of link blue
|
||||
ctx.direction = textDir(name)
|
||||
T.nameLines.forEach((ln, k) => ctx.fillText(ln, cx, R.y + pad + k * nameFs * ct.nameLine, iw))
|
||||
if (T.verse) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue