[英]Better way to use mousedown and mousemove?
I am using the following to rotate elements around a center point. 我正在使用以下内容围绕中心点旋转元素。
$('.marker').on 'mousedown': ->
$(this).on 'mousemove': ->
rotateAnnotationCropper $('.innerCircle').parent(), event.pageX, event.pageY, $(this)
Not sure if this is needed, but the function it is calling is below. 不知道是否需要这样做,但是下面调用的函数。
rotateAnnotationCropper = (offsetSelector, xCoordinate, yCoordinate, markerNumber) ->
x = xCoordinate - (offsetSelector.offset().left) - (offsetSelector.width() / 2)
y = -1 * (yCoordinate - (offsetSelector.offset().top) - (offsetSelector.height() / 2))
centerAngle = 90 - (Math.atan2(y, x) * 180 / Math.PI)
rotate = 'rotate(' + centerAngle + 90 + 'deg)' + ' translateX(-50%)'
It works as I had hoped with one exception. 它的工作与我所希望的一样,但有一个例外。 When I am moving the cursor around the center point, I have to keep the cursor exactly over the element, or the movement will stop. 当我围绕中心点移动光标时,必须将光标保持在元素上,否则移动将停止。 Any idea on how I can keep the element moving even if the cursor extends outside of the element? 关于如何即使光标延伸到元素外部也能保持元素移动的任何想法?
I am using the class .marker on 5 elements at the moment. 我目前在5个元素上使用class .marker。
Codepen here: https://codepen.io/DaveVan/pen/QvJORb 这里的Codepen: https ://codepen.io/DaveVan/pen/QvJORb
Bind to document
to capture events outside. 绑定到document
以捕获外部事件。 See this updated pen . 请参阅此更新的笔 。
$('.marker').on 'mousedown': ->
marker = this
$(document).on 'mousemove': ->
rotateAnnotationCropper $('.innerCircle').parent(), event.pageX, event.pageY, $(marker)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.