Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4085

knob slider rendering artifacts in extreme cases

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 8.6.1
    • Freshly, 8.6.0
    • Components
    • Security Level: Jimmy
    • None
    • rendering artifacts are browser (svg engine) specific (screenshots taken with chrome - firefox shows different issues at different values)
      The underlying problem are floating point precision limitations.

    • ZK 8.6.1 S1

      Steps to Reproduce

      1) attempting to rendering a full circle by choosing a large stroke width:

      1.1) extremely small value ...

      	<slider mold="knob"
      			minpos="0.0" maxpos="100.0"
      			curpos="0.000100" step="0.000001" width="1000px" angleArc="360"
      			style="border: 1px solid black;" strokeWidth="333"/>
      

      1.2) other values cause seemingly random problems

      	<slider mold="knob"
      			minpos="0.0" maxpos="100.0"
      			curpos="89.719426" step="0.000001" width="1000px" angleArc="360"
      			style="border: 1px solid black;" strokeWidth="333"/>
      

      1.2.1)

      	<slider mold="knob"
      			minpos="0.0" maxpos="100.0"
      			curpos="90.508068" step="0.000001" width="300px" angleArc="360"
      			style="border: 1px solid black;" strokeWidth="100"/>
      

      2) setting a value close to 360 degrees

      2.1) renders a double circle

      <slider mold="knob"
      			minpos="0.0" maxpos="100.0"
      			curpos="99.999987" step="0.000001" width="1000px" angleArc="360"
      			style="border: 1px solid black;" strokeWidth="2"/>
      

      2.2) the blue circle doesn't cover the grey circle

      <slider mold="knob"
      			minpos="0.0" maxpos="100.0"
      			curpos="99.999984" step="0.000001" width="1000px" angleArc="360"
      			style="border: 1px solid black;" strokeWidth="2"/>
      

      Potential Ideas

      1) the full circle issues might be avoidable by calculating the inner and outer circle arc separately and connecting them by lines, and filling the resulting polygon
      2) the near 360deg artifacts can be avoided by splitting the arc into 2 arcs of half the angle

      3) if the above ideas aren't implementable in a feasible manner, the extreme cases can be avoided by limiting the configuration options
      (e.g. minimum step size, min inner radius to avoid full circle issues)

        1. case-1.1.png
          case-1.1.png
          22 kB
        2. case-1.2.1.png
          case-1.2.1.png
          6 kB
        3. case-1.2.png
          case-1.2.png
          25 kB
        4. case-2.1.png
          case-2.1.png
          56 kB
        5. case-2.2.png
          case-2.2.png
          48 kB
        6. screenshot-1.png
          screenshot-1.png
          8 kB

            CharlesQiu CharlesQiu
            cor3000 cor3000
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 2 days Original Estimate - 2 days
                2d
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 days, 30 minutes
                4d 30m