Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix actualBoundingBoxLeft/Right with center/right alignment #2109

Merged
merged 1 commit into from
Sep 6, 2022
Merged

Conversation

zbjornson
Copy link
Collaborator

This bug goes back 10 years to the original implementation.

Fixes #1909

image

  • Have you updated CHANGELOG.md?

This bug goes back 10 years to the original implementation.

Fixes #1909
@chearon chearon merged commit 6862532 into master Sep 6, 2022
@chearon chearon deleted the zb/1909 branch September 6, 2022 12:32
phipla pushed a commit to e-cervo/node-canvas that referenced this pull request Oct 26, 2022
* master: (33 commits)
  v2.10.1-ecervo.1
  fix a crash in getImageDate if the rectangle is outside the canvas
  remove deprecated constructor overload
  add review comments
  remove save() limit, improve save/restore perf, fix some props
  Update CHANGELOG.md
  reimplement accessors on prototype
  Update CHANGELOG.md
  Update CHANGELOG.md
  Update CHANGELOG.md
  fix Assertion failed: (object->InternalFieldCount() > 0), function Unwrap, file nan_object_wrap.h, line 32.
  bump version
  add node 16 & 18 to build
  v2.10.1
  add line in CHANGELOG
  Parse rgba(r,g,b,0) correctly
  Fix actualBoundingBoxLeft/Right with center/right alignment (Automattic#2109)
  v2.10.0
  fix: add user agent to remote images request
  Add roundRect() support
  ...

# Conflicts:
#	.github/workflows/prebuild.yaml
@stepancar
Copy link
Contributor

@zbjornson , @chearon , it seems like after this change actualBoundingBoxLeft was broken for textAlign = start.

Because it returns value with opposite sign comparing to browser

@zbjornson
Copy link
Collaborator Author

@stepancar can you provide a repro in a new issue please? It seems to be correct:

tests['measureText()'] = function (ctx) {
  function drawWithBBox (text, x, y) {
    ctx.fillText(text, x, y)
    ctx.strokeStyle = 'red'
    ctx.beginPath(); ctx.moveTo(0, y + 0.5); ctx.lineTo(200, y + 0.5); ctx.stroke()
    const metrics = ctx.measureText(text)
    ctx.strokeStyle = 'blue'
    ctx.strokeRect(
      // positive numbers for actualBoundingBoxLeft indicate a distance going left
      x + metrics.actualBoundingBoxLeft + 0.5,
      y - metrics.actualBoundingBoxAscent + 0.5,
      metrics.width,
      metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
    )
  }

  ctx.font = '20px Arial'
  ctx.textBaseline = 'alphabetic'
  ctx.textAlign = 'start'
  drawWithBBox('start', 10, 150)
}

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

measureText make actualBoundingBoxRight mistake when textAlign is center
3 participants