Перетащите ручку на 360 градусов, используя зеленый носок - PullRequest
Новая
       46

Перетащите ручку на 360 градусов, используя зеленый носок

2 голосов
/ 08 марта 2019

Я пытаюсь перетащить круглую ручку от 0 до 360 градусов, используя библиотеку зеленых носков.Добавление нижеприведенного кода, в котором я использовал свойство bounds, которое ограничивает поворот перетаскивания от 0 до 359 градусов, но из-за этого, когда я начинаю перетаскивать из последнего квадранта (от 270 до 360 градусов), перетаскивание переходит на 1-й квадрант (0 градусов)) и начинает тянуть с 0 градусов.В 1-м, 2-м и 3-м квадранте перетаскивание работает правильно, но в 4-м квадранте есть некоторые проблемы.Я хочу сохранить границы, но также хочу тянуть, если я тяну от 270 до 360 градусов.Пожалуйста, посмотрите на кодовую ручку и помогите мне с этим.Спасибо.

Шаги для воспроизведения 1. Перетащите курсор до последнего квадранта (от 270 градусов до 360 градусов), как часы между 9 - 12, и оставьте мышь.

Нажмите в последнем квадранте, где вы оставили мышь, здесь вы можете увидеть, как перетаскивание начинается с 0 градусов. 

var rotationOffset = 90, //in case the dial's "home" position isn't at 0 degrees (pointing right). In this case, we use 90 degrees.
  RAD2DEG = 180 / Math.PI, //for converting radians to degrees
  adjusting;

TweenLite.set("#spinner", {
  transformOrigin: "center"
});

Draggable.create("#spinner", {
  type: "rotation",
  sticky: true,
  bounds: {
    minRotation: 0,
    maxRotation: 359,
  },
  trigger: "#svg",
  onPress: function(e) {
    if (!adjusting) {
      //figure out the angle from the pointer to the rotational origin (in degrees)
      var rotation = Math.atan2(this.pointerY - this.rotationOrigin.y, this.pointerX - this.rotationOrigin.x) * RAD2DEG;
      //set the rotation (with any offset that's necessary)
      TweenLite.set(this.target, {
        rotation: rotation + rotationOffset
      });
      //now we'll end the drag and start it again from this new place, but when we start again, it'll call the onPress of course so to avoid an endless loop, we use the "adjusting" variable to skip it in the triggered onPress.
      adjusting = true;
      this.endDrag(e);
      this.startDrag(e);
      adjusting = false;
    }
  },
  onDrag: function() {
    var rotation = Math.atan2(this.pointerY - this.rotationOrigin.y, this.pointerX - this.rotationOrigin.x) * RAD2DEG;
    $("#percent").text(rotation.toFixed(2))
  }
});
#svg {
  position: fixed;
  width: 100%;
  height: 100%;
  touch-action: none;
}

#spinner {
  cursor: pointer;
}

.big-circle {
  fill: dodgerblue;
  stroke: black;
  stroke-width: 6;
}

.small-circle {
  fill: black;
}

.line {
  fill: none;
  stroke: black;
  stroke-width: 6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/utils/Draggable.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js"></script>
<div id="percent">0</div>
<svg id="svg" viewBox="0 0 1000 1000">
  <g id="spinner">
    <circle class="big-circle" cx="500" cy="500" r="200" />
    <circle class="small-circle" cx="500" cy="500" r="12" />
    <polyline class="line" points="500,500 500,300" />
  </g>
</svg>

кодовая ручка ручки

* ОБНОВЛЕНО * Я обновил вышессылка на кодовое соединение с рабочим решением, если кто-нибудь придет в будущем, чтобы проверить подобную проблему.Спасибо.

1 Ответ

0 голосов
/ 08 марта 2019

По какой причине вы используете параметры bounds и trigger?Если вы удалите их, ваш код будет работать соответственно. 

var rotationOffset = 90, //in case the dial's "home" position isn't at 0 degrees (pointing right). In this case, we use 90 degrees.
	RAD2DEG = 180 / Math.PI, //for converting radians to degrees
	adjusting;

TweenLite.set("#spinner", {transformOrigin: "center"});

Draggable.create("#spinner", {
  type: "rotation",
  sticky: true,
  /*bounds: {
    minRotation: 0,
    maxRotation: 360,
  },
  trigger: "#svg",*/
	onPress: function(e) {
		if (!adjusting) {
			//figure out the angle from the pointer to the rotational origin (in degrees)
			var rotation = Math.atan2(this.pointerY - this.rotationOrigin.y, this.pointerX - this.rotationOrigin.x) * RAD2DEG;
			//set the rotation (with any offset that's necessary)
			TweenLite.set(this.target, {rotation:rotation + rotationOffset});
			//now we'll end the drag and start it again from this new place, but when we start again, it'll call the onPress of course so to avoid an endless loop, we use the "adjusting" variable to skip it in the triggered onPress.
			adjusting = true;
			this.endDrag(e);
			this.startDrag(e);
			adjusting = false;
		}
	},
  onDrag: function(){
    var rotation = Math.atan2(this.pointerY - this.rotationOrigin.y, this.pointerX - this.rotationOrigin.x) * RAD2DEG;
    
  }
});
#svg {
  position: fixed;
  width: 100%;
  height: 100%;
	touch-action: none;
  
}

#spinner {
  cursor: pointer;
}

.big-circle {
  fill: dodgerblue;
  stroke: black;
  stroke-width: 6;
}

.small-circle {
  fill: black;
}

.line {
  fill: none;
  stroke: black;
  stroke-width: 6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/utils/Draggable.min.js"></script>
<div id="percent">0</div>
<svg id="svg" viewBox="0 0 1000 1000">
  <g id="spinner">
    <circle class="big-circle" cx="500" cy="500" r="200" />
    <circle class="small-circle" cx="500" cy="500" r="12" />
    <polyline class="line" points="500,500 500,300" />
  </g>
</svg>

https://greensock.com/docs/Utilities/Draggable/static.create()

...