0

I have this simple SVG knob that I rotate using Snap SVG. When I click on the knob and drag one pixel it jumps to an arbitrary angle. After it make the initial jumps it behaves well.

Here is an example of the behavior:

enter image description here

Here is the current code:

https://jsfiddle.net/yepher/w14hqtnc/

JavaScript

var s = Snap("#knobCanvas");

Snap.select('#knobCanvas-knobGroup').drag(dragRotate, dragRotateStart)

function dragRotate(dx, dy, x, y) {
  this.transform('r' + Snap.angle(this.getBBox().cx, this.getBBox().cy, dx + this.data('oxy').x, dy + this.data('oxy').y));
}

function dragRotateStart(x, y) {
  this.data('oxy', {
    x: x,
    y: y
  })
}

Knob SVG

<?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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="222" height="149" xml:space="preserve" id="knobCanvas">
    <!-- Generated by PaintCode - http://www.paintcodeapp.com -->
    <g id="knobCanvas-knobGroup">
      <path id="knobCanvas-knobPath" stroke="none" fill="rgb(146, 146, 146)" d="M 12.88,-58.93 C 10.68,-58.93 8.89,-57.18 8.89,-55.01 8.89,-52.85 10.68,-51.1 12.88,-51.1 14.28,-51.1 15.52,-51.81 16.23,-52.89 16.64,-53.5 16.87,-54.23 16.87,-55.01 16.87,-57.18 15.08,-58.93 12.88,-58.93 Z M 64.75,-0.25 C 64.75,36.48 34.98,66.25 -1.75,66.25 -38.48,66.25 -68.25,36.48 -68.25,-0.25 -68.25,-36.98 -38.48,-66.75 -1.75,-66.75 34.98,-66.75 64.75,-36.98 64.75,-0.25 Z M 64.75,-0.25"
      transform="translate(68.25, 66.75)" />
    </g>
    <g id="knobCanvas-overlayGroup">
      <path id="knobCanvas-yAsix" stroke="rgb(255, 108, 108)" stroke-opacity="0.51" stroke-width="0.5" stroke-miterlimit="10" stroke-dasharray="2,2" stroke-dashoffset="0" fill="rgb(255, 108, 108)" fill-opacity="0.51" d="M 67.73,-1.5 L 67.73,143.5" />
      <path id="knobCanvas-xAxis" stroke="rgb(255, 108, 108)" stroke-opacity="0.51" stroke-width="0.5" stroke-miterlimit="10" stroke-dasharray="2,2" stroke-dashoffset="0" fill="none" d="M -20.5,66.47 L 153.5,66.47" />
      <path id="knobCanvas-bezier" stroke="rgb(0, 0, 0)" stroke-width="1" stroke-miterlimit="10" fill="none" d="M 82.43,18.89" />
      <path id="knobCanvas-bezier2" stroke="rgb(0, 0, 0)" stroke-width="1" stroke-miterlimit="10" fill="none" d="M 84.88,16.62" />
      <path id="knobCanvas-bezier3" stroke="rgb(255, 108, 108)" stroke-opacity="0.51" stroke-width="0.5" stroke-miterlimit="10" stroke-dasharray="2,2" stroke-dashoffset="0" fill="rgb(255, 108, 108)" fill-opacity="0.51" d="M 68.25,66.75 L 86.25,-0.75" />
    </g>
  </svg>

How can I keep git rid of that initial jump each time I click on the knob?

Yepher
  • 1,465
  • 12
  • 25
  • This is a follow on question from this this great answer that Ian provided: https://stackoverflow.com/questions/44112205/paintcode-and-snap-svg – Yepher May 22 '17 at 19:29
  • 1
    I think this is what you may want. If so, I will update the answers later with an explanation, and correct the original... jsfiddle.net/w14hqtnc/5 – Ian May 23 '17 at 06:37
  • 1
    I have updated the original answer, so it's all in one place, and marked this as a duplicate, so that anyone can find the original workings in one place. – Ian May 23 '17 at 07:13
  • Yes, tis example works perfectly. It no longer jumps when clicking at arbitrary points on the object to be rotated. – Yepher May 23 '17 at 13:09

0 Answers0