gpt4 book ai didi

JavaScript/jQuery 插件 : snap to grid

转载 作者:行者123 更新时间:2023-11-29 23:19:09 25 4
gpt4 key购买 nike

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

Plugin's GitHubPlugin's Demo

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

谢谢!

最佳答案

那个插件有一个 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" />

关于JavaScript/jQuery 插件 : snap to grid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51391098/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com