testGraphics: updates to handle dpr rendering in JS

fantom-lang · Dec 30, 2024 · 558dfb7 · 558dfb7
1 parent fef33fe
commit 558dfb7
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)
   }
-}
+}
+
diff --git 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
@@ -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)