let idArrow = 1; //the value here is a number ID from DB
let pos_rot = -2.42403827195133; //if I pass a value directly here
//it works fine like in the live code
//while if I pass the value retrieved from DB through AJAX request in the response
//it behave as I described in the description of the problem
let newArrow = `<div id="` + idArrow + `" class="arrow arrow_` + idArrow + `" style="position:absolute;
top: 100px;
left: 100px;
height: 100px;
cursor: pointer;"></div>`;
var params = {
//starting rotation angle
radians: pos_rot //THIS OPTION GIVES ME PROBLEMS STARTING FROM SECOND ROTATION
//SO IT FREEZES ON ANGLE 0
} //close params
$(newArrow).draggable().rotatable(params).appendTo('#body');.arrow {
position: relative;
width: 3px;
height: 100px;
background-color: #ff3c00;
z-index: 95;
}
.arrow::after {
content: '';
position: relative;
top: -40px;
left: -2.5px;
width: 0;
height: 0;
z-index: 96;
border-style: solid;
border-width: 0 4px 12px 4px;
border-color: transparent transparent #ff3c00 transparent;
}
.ui-rotatable-handle {
position: relative;
height: 12px;
width: 12px;
cursor: pointer;
background-image: url(jQuery-UI-Rotatable-Elements/rotate.png);
background-size: 100%;
left: -3px;
bottom: -3px;
z-index: 97;
}<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.css">
<script src="https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.min.js"></script>
<body id="body">
</body>我有一个关于可旋转函数参数中传递的弧度选项的问题(链接到官方文档https://github.com/godswearhats/jquery-ui-rotatable).
问题是，如果我在弧度选项后直接为Angular 键入一个数字，那么在浏览器中，它将保持对象的可旋转功能，并且键入的值的起始Angular 不变，但是如果我在浏览器中传递一个全局变量(在本例中为pos_rot)，我可以看到起始旋转，它在第一次旋转时可以正常工作，但在第二次旋转时，它直接捕捉到Angular 0.
如果我只有radians选项，而params中没有stop选项，那么问题也会存在.
为什么会有这种行为？我该如何解决这个问题？
let idArrow; //the value here is a number ID from DB
let pos_rot; //the value here is a rotation in radians passed from DB
var params = {
// Callback fired on rotation end
stop: function(event, ui) {
//setTimeout
clearTimeout(rotateTimer);
rotateTimer = setTimeout(function() {
//function to get rotation angle
$.fn.rotationInfo = function() {
var el = $(this),
tr = el.css("-webkit-transform") || el.css("-moz-transform") || el.css("-ms-transform") || el.css("-o-transform") || '',
info = {
rad: 0,
deg: 0
};
if (tr = tr.match('matrix\\((.*)\\)')) {
tr = tr[1].split(',');
if (typeof tr[0] != 'undefined' && typeof tr[1] != 'undefined') {
info.rad = Math.atan2(tr[1], tr[0]);
info.deg = parseFloat((info.rad * 180 / Math.PI).toFixed(1));
}
}
return info;
};
let rotation = $('.arrow_' + idArrow).rotationInfo().rad;
//AJAX request to update values
$.ajax({
url: 'procedure/update_rotation.php',
type: 'POST',
data: {
id: idArrow,
rot: rotation
},
success: function(response) {
console.log("New rotation: " + rotation); //here the value gets updated correctly
}
});
}, 150); //close setTimeout
}, //close stop function
//starting rotation
radians: pos_rot //THIS OPTION GIVES ME PROBLEMS STARTING FROM SECOND ROTATION, SO IT FREEZES ON ANGLE 0
} //close params