commit
2262459b5d
4 changed files with 64 additions and 7 deletions
|
@ -7,6 +7,15 @@ import bumpy, chroma, pixie/common, pixie/fonts, pixie/images, pixie/masks,
|
||||||
## https://developer.mozilla.org/en-US/docs/Web/API/ContextRenderingContext2D
|
## https://developer.mozilla.org/en-US/docs/Web/API/ContextRenderingContext2D
|
||||||
|
|
||||||
type
|
type
|
||||||
|
|
||||||
|
BaselineAlignment* = enum
|
||||||
|
TopBaseline
|
||||||
|
HangingBaseline
|
||||||
|
MiddleBaseline
|
||||||
|
AlphabeticBaseline
|
||||||
|
IdeographicBaseline
|
||||||
|
BottomBaseline
|
||||||
|
|
||||||
Context* = ref object
|
Context* = ref object
|
||||||
image*: Image
|
image*: Image
|
||||||
fillStyle*, strokeStyle*: Paint
|
fillStyle*, strokeStyle*: Paint
|
||||||
|
@ -18,6 +27,7 @@ type
|
||||||
font*: string ## File path to a .ttf or .otf file.
|
font*: string ## File path to a .ttf or .otf file.
|
||||||
fontSize*: float32
|
fontSize*: float32
|
||||||
textAlign*: HorizontalAlignment
|
textAlign*: HorizontalAlignment
|
||||||
|
textBaseline*: BaselineAlignment
|
||||||
lineDash: seq[float32]
|
lineDash: seq[float32]
|
||||||
path: Path
|
path: Path
|
||||||
mat: Mat3
|
mat: Mat3
|
||||||
|
@ -58,6 +68,7 @@ proc newContext*(image: Image): Context {.raises: [].} =
|
||||||
result.strokeStyle = newPaint(SolidPaint)
|
result.strokeStyle = newPaint(SolidPaint)
|
||||||
result.strokeStyle.color = color(0, 0, 0, 1)
|
result.strokeStyle.color = color(0, 0, 0, 1)
|
||||||
result.fontSize = 12
|
result.fontSize = 12
|
||||||
|
result.textBaseline = AlphabeticBaseline
|
||||||
|
|
||||||
proc newContext*(width, height: int): Context {.inline, raises: [PixieError].} =
|
proc newContext*(width, height: int): Context {.inline, raises: [PixieError].} =
|
||||||
## Create a new Context that will draw to a new image of width and height.
|
## Create a new Context that will draw to a new image of width and height.
|
||||||
|
@ -185,7 +196,22 @@ proc fillText(ctx: Context, image: Image, text: string, at: Vec2) =
|
||||||
|
|
||||||
# Canvas positions text relative to the alphabetic baseline by default
|
# Canvas positions text relative to the alphabetic baseline by default
|
||||||
var at = at
|
var at = at
|
||||||
at.y -= round(font.typeface.ascent * font.scale)
|
|
||||||
|
case ctx.textBaseline:
|
||||||
|
of TopBaseline:
|
||||||
|
discard
|
||||||
|
of HangingBaseline:
|
||||||
|
# TODO: make accurate (Used by Tibetan and other Indic scripts.)
|
||||||
|
discard
|
||||||
|
of MiddleBaseline:
|
||||||
|
at.y -= round((font.typeface.ascent - font.typeface.descent) / 2 * font.scale)
|
||||||
|
of AlphabeticBaseline:
|
||||||
|
at.y -= round(font.typeface.ascent * font.scale)
|
||||||
|
of IdeographicBaseline:
|
||||||
|
# TODO: make accurate (Used by Chinese, Japanese, and Korean scripts.)
|
||||||
|
at.y -= round((font.typeface.ascent - font.typeface.descent) * font.scale)
|
||||||
|
of BottomBaseline:
|
||||||
|
at.y -= round((font.typeface.ascent - font.typeface.descent) * font.scale)
|
||||||
|
|
||||||
font.paint = ctx.fillStyle
|
font.paint = ctx.fillStyle
|
||||||
|
|
||||||
|
|
|
@ -781,12 +781,12 @@ proc drawUber(
|
||||||
when type(a) is Image and type(b) is Image:
|
when type(a) is Image and type(b) is Image:
|
||||||
if blendMode in {NormalBlend, OverwriteBlend} and
|
if blendMode in {NormalBlend, OverwriteBlend} and
|
||||||
isOpaque(b.data, b.dataIndex(sx, sy), xStop - xStart):
|
isOpaque(b.data, b.dataIndex(sx, sy), xStop - xStart):
|
||||||
copyMem(
|
copyMem(
|
||||||
a.data[a.dataIndex(x, y)].addr,
|
a.data[a.dataIndex(x, y)].addr,
|
||||||
b.data[b.dataIndex(sx, sy)].addr,
|
b.data[b.dataIndex(sx, sy)].addr,
|
||||||
(xStop - xStart) * 4
|
(xStop - xStart) * 4
|
||||||
)
|
)
|
||||||
continue
|
continue
|
||||||
|
|
||||||
when defined(amd64) and not defined(pixieNoSimd):
|
when defined(amd64) and not defined(pixieNoSimd):
|
||||||
case blendMode:
|
case blendMode:
|
||||||
|
|
BIN
tests/contexts/textBaseline_1.png
Normal file
BIN
tests/contexts/textBaseline_1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 68 KiB |
|
@ -644,3 +644,34 @@ block:
|
||||||
ctx.restore()
|
ctx.restore()
|
||||||
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
||||||
ctx.image.writeFile("tests/contexts/paintSaveRestore.png")
|
ctx.image.writeFile("tests/contexts/paintSaveRestore.png")
|
||||||
|
|
||||||
|
block:
|
||||||
|
# From https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline
|
||||||
|
let
|
||||||
|
image = newImage(550, 500)
|
||||||
|
ctx = newContext(image)
|
||||||
|
image.fill(rgba(255, 255, 255, 255))
|
||||||
|
|
||||||
|
const baselines = @[
|
||||||
|
TopBaseline,
|
||||||
|
HangingBaseline,
|
||||||
|
MiddleBaseline,
|
||||||
|
AlphabeticBaseline,
|
||||||
|
IdeographicBaseline,
|
||||||
|
BottomBaseline,
|
||||||
|
]
|
||||||
|
|
||||||
|
ctx.font = "tests/fonts/Roboto-Regular_1.ttf"
|
||||||
|
ctx.fontSize = 28
|
||||||
|
ctx.strokeStyle = "red"
|
||||||
|
|
||||||
|
for index, baseline in baselines:
|
||||||
|
ctx.textBaseline = baseline
|
||||||
|
let y = (75 + index * 75).float32
|
||||||
|
ctx.beginPath()
|
||||||
|
ctx.moveTo(0, y + 0.5)
|
||||||
|
ctx.lineTo(550, y + 0.5)
|
||||||
|
ctx.stroke()
|
||||||
|
ctx.fillText("Abcdefghijklmnop (" & $baseline & ")", 0, y)
|
||||||
|
|
||||||
|
ctx.image.writeFile("tests/contexts/textBaseline_1.png")
|
||||||
|
|
Loading…
Reference in a new issue