JavaScript/jQuery 插件：对齐网格

Question

尝试为jQuery-select-areas plugin 添加“对齐网格”功能。

Plugin's GitHub 和 Plugin's Demo

one similar plugin 具有我正在寻找的功能，但它是为 jQueryUI 构建的。老实说，我不确定如何将它们联系起来。 欣赏任何想法。

谢谢！

Answer 1

那个插件有一个changing event，你可以收听它，并且事件处理程序被传递给创建的区域。您可以通过更改该区域对象的宽度、高度、x 和 y 属性来操作该区域的值。

$("#example").selectAreas({
  onChanging: function(event,currentAreaId,areas){
    //use filter on areas to get currently changing area
    var area = areas.filter(area=>area.id==currentAreaId)[0];
    area.width = 50; //set value to nearest grid interval
    area.height = 50; //set value to nearest grid interval
  }
});

您可以使用以下语句计算最近的网格间隔：

Math.round( value / intervalAmount ) * intervalAmount

演示

function nearestInterval(interval,value){ 
  return Math.round(value / interval)*interval; 
}

$("#example").selectAreas({
  minSize: [30, 30],
  maxSize: [400, 300],
  onChanging: function(event,id,areas){
    var area = areas.filter(area=>area.id==id)[0];
    area.width = nearestInterval( 30, area.width );
    area.height = nearestInterval( 30, area.height );
    area.x = nearestInterval( 30, area.x );
    area.y = nearestInterval( 30, area.y );
  }
});

<link rel="stylesheet" href="https://rawgit.com/360Learning/jquery-select-areas/master/resources/jquery.selectareas.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/360Learning/jquery-select-areas/master/jquery.selectareas.js"></script>

<img id="example" src="https://placebear.com/g/400/250" />