From 558dfb71559e9ca1592d9708a38f6d7d3a91ea55 Mon Sep 17 00:00:00 2001 From: Brian Frank Date: Mon, 30 Dec 2024 12:43:46 -0500 Subject: [PATCH] testGraphics: updates to handle dpr rendering in JS --- src/testGraphics/fan/AlphaTest.fan | 4 +--- src/testGraphics/fan/BasicsTest.fan | 5 +++-- src/testGraphics/fan/FontMetricsTest.fan | 10 +++++++--- src/testGraphics/fan/FontStyleTest.fan | 12 +++++++----- src/testGraphics/fan/MainDom.fan | 21 +++++++++++---------- src/testGraphics/fan/PathTest.fan | 14 +++++++------- src/testGraphics/fan/StrokeTest.fan | 6 +++--- 7 files changed, 39 insertions(+), 33 deletions(-) diff --git a/src/testGraphics/fan/AlphaTest.fan b/src/testGraphics/fan/AlphaTest.fan index 85183371e..a8bbea193 100644 --- a/src/testGraphics/fan/AlphaTest.fan +++ b/src/testGraphics/fan/AlphaTest.fan @@ -33,7 +33,7 @@ class AlphaTest : AbstractTest g.stroke = Stroke(4f) PathTest.pathTurtle(g).draw - g.font = Font("48pt Times") + g.font = Font("32pt Times") g.color = Color("darkorange").opacity(0.7f) g.drawText("Alpha", 20f, 220f) @@ -48,7 +48,6 @@ class AlphaTest : AbstractTest g.stroke = Stroke(4f) PathTest.pathTurtle(g).draw - g.font = Font("48pt Times") g.color = Color("darkorange") g.drawText("Alpha", 20f, 220f) @@ -63,7 +62,6 @@ class AlphaTest : AbstractTest g.stroke = Stroke(4f) PathTest.pathTurtle(g).draw - g.font = Font("48pt Times") g.color = Color("darkorange") g.drawText("Opaque", 20f, 220f) } diff --git a/src/testGraphics/fan/BasicsTest.fan b/src/testGraphics/fan/BasicsTest.fan index c7c03c795..f45566187 100644 --- a/src/testGraphics/fan/BasicsTest.fan +++ b/src/testGraphics/fan/BasicsTest.fan @@ -25,11 +25,12 @@ class BasicsTest : AbstractTest tm := g.metrics tw := tm.width(text) tx := (size.w - tw) / 2f + cy := size.h / 2f ty := (size.h - g.metrics.height) / 2f + g.metrics.ascent g.color = Color("thistle") - g.fillRoundRect(tx - 30f, ty-60f, tw+60f, tm.height+60f, 20f, 20f) + g.fillRoundRect(tx - 30f, cy-60f, tw+60f, 120f, 20f, 20f) g.color = Color("purple") - g.drawRoundRect(tx - 30f, ty-60f, tw+60f, tm.height+60f, 20f, 20f) + g.drawRoundRect(tx - 30f, cy-60f, tw+60f, 120f, 20f, 20f) g.color = Color("blue") g.drawText(text, tx, ty) } diff --git a/src/testGraphics/fan/FontMetricsTest.fan b/src/testGraphics/fan/FontMetricsTest.fan index 0bcafa35c..fcc51e2bc 100644 --- a/src/testGraphics/fan/FontMetricsTest.fan +++ b/src/testGraphics/fan/FontMetricsTest.fan @@ -21,16 +21,20 @@ class FontMetricsTest : AbstractTest names := ["Times", "Helvetica", "Consolas", "Courier", "Tahoma", "Arial"] + ptSize := 24f + g.font = Font(["Times"], ptSize) + ty := 50f tx := 30f + th := g.metrics.height * 1.2f names.each |name| { - g.font = Font([name], 24f) + g.font = Font([name], ptSize) paintText(g, name, tx, ty) - ty += 50f + ty += th paintText(g, alphabet, tx, ty) - ty += 50f + ty += th } } diff --git a/src/testGraphics/fan/FontStyleTest.fan b/src/testGraphics/fan/FontStyleTest.fan index ac96b54b8..be6ed52b4 100644 --- a/src/testGraphics/fan/FontStyleTest.fan +++ b/src/testGraphics/fan/FontStyleTest.fan @@ -17,37 +17,39 @@ class FontStyleTest : AbstractTest tx := 20f ty := 0f + th := 20f points := 12 pixels := 16f text := "0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ" names.each |n| { - ty += 40f + ty += th*2 g.color = Color("black") g.font = Font("${points}pt $n") g.drawText("$g.font", tx, ty) + if (Env.cur.runtime == "js") th = g.metrics.height + 10f - ty += 20f + ty += th g.color = Color("green") g.fillRect(tx, ty-pixels, 6f, pixels) g.color = Color("black") g.drawText(text, tx+10f, ty) - ty += 20f + ty += th g.color = Color("red") g.fillRect(tx, ty-pixels, 6f, pixels) g.color = Color("black") g.font = Font("bold ${points}pt $n") g.drawText(text, tx+10f, ty) - ty += 20f + ty += th g.color = Color("purple") g.fillRect(tx, ty-pixels, 6f, pixels) g.color = Color("black") g.font = Font("italic ${points}pt $n") g.drawText(text, tx+10f, ty) - ty += 20f + ty += th g.color = Color("orange") g.fillRect(tx, ty-pixels, 6f, pixels) g.color = Color("black") diff --git a/src/testGraphics/fan/MainDom.fan b/src/testGraphics/fan/MainDom.fan index 554aa08c5..a27dbd4a2 100644 --- a/src/testGraphics/fan/MainDom.fan +++ b/src/testGraphics/fan/MainDom.fan @@ -16,6 +16,7 @@ const class MainDomMod : WebMod { new make() { + WebJsMode.setCur(WebJsMode.es) pods := [typeof.pod] this.jsPack = FilePack(FilePack.toAppJsFiles(pods)) this.cssPack = FilePack(FilePack.toAppCssFiles(pods)) @@ -130,16 +131,15 @@ class MainDom //Elem("a") { it->href=`/svg/${typeName}`; it.text = "SVG"; it.style->lineHeight = "25px" }, } - size := Size(1000, 800) - canvas := Elem("canvas") - canvas.setAttr("width", "${size.w.toInt}px") - canvas.setAttr("height", "${size.h.toInt}px") - canvas.renderCanvas |g| { test.paint(size, g) } + dpr := Win.cur.devicePixelRatio + elemSize := Size(1000, 800) + rendSize := Size(elemSize.w * dpr, elemSize.h * dpr) - repaint = |->| - { - canvas.renderCanvas |g| { test.paint(size, g) } - } + canvas := Elem("canvas") + canvas.size = elemSize + canvas.setAttr("width", rendSize.w.toStr) + canvas.setAttr("height", rendSize.h.toStr) + canvas.renderCanvas |g| { test.paint(rendSize, g) } sash := SashBox { @@ -151,4 +151,5 @@ class MainDom Win.cur.doc.body.add(sash) } -} \ No newline at end of file +} + diff --git a/src/testGraphics/fan/PathTest.fan b/src/testGraphics/fan/PathTest.fan index 6986e2dea..aeef9011c 100644 --- a/src/testGraphics/fan/PathTest.fan +++ b/src/testGraphics/fan/PathTest.fan @@ -39,14 +39,14 @@ class PathTest : AbstractTest // quadTo cx := 100f - cy := 250f - r := 45f + cy := 450f + r := 90f pathArc(g, cx, cy, r, 0f, 90f).draw - pathArc(g, cx+100f, cy, r, 0f, -90f).draw - pathArc(g, cx+200f, cy, r, 90f, 45f).draw - pathArc(g, cx+300f, cy, r, 135f, 90f).draw - pathArc(g, cx+400f, cy, r, 180f, -45f).draw - pathArc(g, cx+500f, cy, r, 270f, 45f).draw + pathArc(g, cx+200f, cy, r, 0f, -90f).draw + pathArc(g, cx+400f, cy, r, 90f, 45f).draw + pathArc(g, cx+600f, cy, r, 135f, 90f).draw + pathArc(g, cx+800f, cy, r, 180f, -45f).draw + pathArc(g, cx+1000f, cy, r, 270f, 45f).draw } static GraphicsPath pathTurtle(Graphics g) diff --git a/src/testGraphics/fan/StrokeTest.fan b/src/testGraphics/fan/StrokeTest.fan index 4c7aab40d..9a020850b 100644 --- a/src/testGraphics/fan/StrokeTest.fan +++ b/src/testGraphics/fan/StrokeTest.fan @@ -42,7 +42,7 @@ class StrokeTest : AbstractTest g.color = Color("blue") g.stroke = Stroke("[$dash]") - g.drawLine(x+60f, y, x+200f, y) + g.drawLine(x+100f, y, x+200f, y) } Void paintCap(Graphics g, StrokeCap cap, Float x, Float y) @@ -52,10 +52,10 @@ class StrokeTest : AbstractTest g.color = Color("blue") g.stroke = Stroke("20 $cap") - g.drawLine(x+60f, y, x+200f, y) + g.drawLine(x+100f, y, x+200f, y) g.color = Color("#ccc") g.stroke = Stroke(1f) - g.drawLine(x+60f, y, x+200f, y) + g.drawLine(x+100f, y, x+200f, y) } Void paintJoin(Graphics g, StrokeJoin join, Float x, Float y)