jQuery UI Rotatable radians选项二次旋转自动归零问题排查

问题复现代码 #

核心异常逻辑

let idArrow = 1;
// 从AJAX获取的pos_rot默认是字符串类型，比如 "-2.42403827195133" 而非数字类型
let pos_rot; 

let newArrow = `<div id="${idArrow}" class="arrow arrow_${idArrow}" style="position:absolute;
       top: 100px;
       left: 100px;
       height: 100px;
       cursor: pointer;"></div>`;

var params = {
  radians: pos_rot // 传入字符串类型值会触发异常
}

$(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-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>

异常根因 #

• AJAX接口返回的数值默认是字符串格式，直接把字符串类型的弧度值传给rotatable的radians参数时，插件首次渲染会把值透传给CSStransform属性，CSS可以识别字符串格式的数字，所以初始角度显示正常、第一次旋转操作也能正常执行。
• 插件内部没有对传入的radians参数做强制数字类型转换，第二次触发旋转时，插件需要读取初始角度值计算旋转偏移量，字符串类型的值无法参与数值运算得到有效结果，插件就会直接 fallback 到默认的0弧度值，表现为元素直接跳回0度位置。
• 直接写数字字面量时传入的本身就是Number类型，完全符合插件参数的类型要求，所以不会触发这个问题。

修复方案 #

在把从AJAX获取到的弧度值传入插件配置前，显式将值转换为数字类型即可，两种常用实现方式选其一就行：

1. 用parseFloat转换（兼容性更好，能自动过滤值前后的非数字字符）：

// AJAX成功回调中处理返回值
success: function(response) {
  // 根据实际接口返回的字段名调整取值逻辑
  pos_rot = parseFloat(response.rot);
  // 类型转换完成后再初始化rotatable组件
}

2. 用一元正号快速转换（写法更简洁，适合确定返回值是纯数字字符串的场景）：

pos_rot = +pos_rot;

额外优化建议：自定义的$.fn.rotationInfo方法不要放在stop回调内部重复定义，提到全局作用域只定义一次即可，能减少不必要的性能开销。

内容的提问来源于stack exchange，提问作者Marco Dodaro