Giters

fskpf / svg2roughjs

Create sketchy, hand-drawn-like images from SVGs

Home Page:https://fskpf.github.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Absolute circular arcs seem broken

ygra opened this issue · comments

commented

Cf. paths-data-03-f from the SVG test suite:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"[]>
<svg version="1.1" viewBox="0 0 480 360" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="480" height="360">
  <g id="test-body-content">
    <!-- ====================================================================== -->
    <!-- Sin Wave using M, q, t, t, t, t, & z ================================ -->
    <!-- ====================================================================== -->
    <path id="Sin_MAAAAA" fill="none" stroke="#FF0000" d="   M   215    190      A   40    200      10          0       0      265    190    A   40    200      20          0       1     315    190        A   40    200      30          0       0     365    190    A   40    200      40          0       1     415    190        A   40    200      50          0       0     465    190                     " />
    <text font-family="Arial" font-size="12" x="215" y="246">M, A, A, A, A</text>
    <rect x="213" y="188" width="4" height="4" fill="#0000FF" stroke="none" />
    <rect x="263" y="188" width="4" height="4" fill="#0000FF" stroke="none" />
    <rect x="313" y="188" width="4" height="4" fill="#0000FF" stroke="none" />
    <rect x="363" y="188" width="4" height="4" fill="#0000FF" stroke="none" />
    <rect x="413" y="188" width="4" height="4" fill="#0000FF" stroke="none" />
    <rect x="463" y="188" width="4" height="4" fill="#0000FF" stroke="none" />
  </g>
</svg>

image
image

commented

This is due to the A_TO_C transform here in drawPath:

// Parse path data and convert to absolute coordinates
      new SVGPathData(dataAttrs)
        .toAbs()
        // Normalize H and V to L commands - those cannot work with how we draw transformed paths otherwise
        .transform(SVGPathDataTransformer.NORMALIZE_HVZ())
        // Normalize S and T to Q and C commands - Rough.js has a bug with T where it expects 4 parameters instead of 2
        .transform(SVGPathDataTransformer.NORMALIZE_ST())
        // Convert elliptical arcs to cubic béziers - those are easier to transform
        .transform(SVGPathDataTransformer.A_TO_C())

Without the last transform, the SVG snippet above is drawn correctly.

Do we really need this? The comment states that its easier to transform, though we don't transform the path ourselves (anymore?), other than applying the overall SVG transform.

commented

Might indeed be that that is a relic from the past. Although it'd still indicate a bug in the other library, I guess?

commented

True, this seems to be an issue with their transformation, since the path is all over the place, and not just wrongly placed or scaled.

commented

This was part of the initial refactoring of the manual path transformation to the svg-pathdata approach.

I've gone through most of the test files and none looked different, other than this snippet, which looks better. So I've removed this transformation for now. Maybe we don't need it (anymore?).