Question

尝试为jQuery-select-areas plugin添加“捕捉到网格”功能。

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

谢谢！

Answer 1

该插件具有一个changing event，您可以收听，事件处理程序将传递到创建的区域。您可以通过更改该区域对象的width，height，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" />

JavaScript / jQuery插件：对齐网格

1 个答案: