parallax/jsPDF

Provided ctx.textAlign and ctx.rotate , position for the text is hard to understand

Open

#2733 aperta il 28 apr 2020

Vedi su GitHub
 (3 commenti) (2 reazioni) (0 assegnatari)JavaScript (4596 fork)batch import
Bugdifficulty:mediumhacktoberfest

Metriche repository

Star
 (28.280 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

Version : v2.1.1 which is located in dist folder Code to reproduce this issue:

  const doc = jsPDF({
   orientation: 'l',
    unit: 'mm',
    format: [100, 100]
  })
  const ctx = doc.canvas.getContext('2d')

  ctx.translate(50, 50)
  ctx.rotate(this.toRAD(45))
  ctx.fillRect(0, 0, 2, 2)

  // ctx.textAlign = 'left' will work as expected
  ctx.textAlign = 'center'
  ctx.fillText('helloworld', 0, 0)

  doc.save("test.pdf")

In all, I want to draw 'hello world' right in the middle of the canvas and then rotate it 45°.

Setting ctx.textAlign = 'left'(which is the default value I think), position for the text is just as expected , the text starts right from middle of the canvas

While setting ctx.textAlign = 'center', things work differently. There is a small distance from the rect and the text.

In fact, you may refer to attached docs, position for the text is really hard to controll or to understand when you tried other degrees like 90 and 180.

no-align.pdf align-center-rotate45.pdf align-center-rotate90.pdf align-center-rotate180.pdf

You may try this example in your own laptop Archive.zip

Guida contributor