metafloor / bwip-js

Barcode Writer in Pure JavaScript
Other
2.09k stars 301 forks source link

extra `1px` @ bottom and/or left within `code128` [toSVG] #330

Open xerc opened 6 months ago

xerc commented 6 months ago
let svg = bwipjs.toSVG(
{
  bcid:  'code128',
  text:  '1ZXXXXXXXXXXXXXXXX',
  scale:   2,
  height: 19,
  backgroundcolor: '#ff0000'
})

Bildschirmfoto 2024-03-16 um 04 45 39

xerc commented 6 months ago
.replace(/(?<=viewBox=")(0) (0) ([0-9]+) ([0-9]+)(?=")/,
  (match, p1, p2, p3, p4) => {return (++p1)+' '+(p2)+' '+(--p3)+' '+(--p4)})
metafloor commented 6 months ago

This was a legitimate issue - not sure why you closed it. Although the issue was not the viewBox sizing - some of the SVG drawing primitives were off by one compared to the built-in drawing. Also the text layout had several issues. v4.3.1 provides the fixes.

Manually comparing the images produced by the built-in canvas render vs SVG using the project's demo.html, there is now no perceptible difference.

xerc commented 6 months ago

might this also be an issue? scale:5 => fine @ scale:10 Bildschirmfoto 2024-03-17 um 18 15 11 top SVG & CANVAS bottom (right corner)

metafloor commented 5 months ago

Found the root of this issue. It is the combination of scale factor and stroke width. The svg drawing adjusts coordinates by 0.5px when stroke width is odd, which gives crisp lines by avoiding anti-aliasing. But apparently, it needs to subtract 0.5 when scale is odd, and add 0.5 when scale is even. I will have a release for this later today or tomorrow.

xerc commented 5 months ago

idea/ theoretical for SVG 1px can be 1px cause scaling can happen later => ignore scale and maybee even width

xerc commented 5 months ago

@ 4.3.2 ; SVG with BG red

& un-even px width Bildschirmfoto 2024-03-23 um 11 22 10 & even px width => looks alomst perfect Bildschirmfoto 2024-03-23 um 12 19 54