我试图找到一个圆的坐标之间的元素.
在 Fiddle中我有一个根据鼠标位置动画的圆圈我想要设置/选择所有来自大圆圈区域内的小圆圈
在 Fiddle中我有一个根据鼠标位置动画的圆圈我想要设置/选择所有来自大圆圈区域内的小圆圈
var s = Snap('svg')
for (var x = 10; x < 500; x = x + 30) {
for (var y = 10; y < 500; y = y + 30) {
var circle = s.circle(x,y,5)
circle.attr({
fill: 'black' //'#8BFE03'
})
}
}
s.mousemove(function(e) {
$('.circle').attr({
cx: e.pageX,cy: e.pageY
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script> <svg width="1500" height="1500" id="svg"> <circle class="circle" cx="0" cy='0' r='80' /> </svg>
解决方法
我已经检查过小的坐标是否在大的坐标中,如果是这样我改变它的颜色
var s = Snap('svg')
for (var x = 10; x < 500; x = x + 30) {
for (var y = 10; y < 500; y = y + 30) {
var circle = s.circle(x,5)
circle.attr({
fill: 'black',//'#8BFE03'
class: 'small'
})
}
}
s.mousemove(function(e) {
$('.circle').attr({
cx: e.pageX,cy: e.pageY
})
rangeX1=parseInt($(".circle").attr("cx"))+parseInt($(".circle").attr("r"));
rangeX2=parseInt($(".circle").attr("cx"))-parseInt($(".circle").attr("r"));
rangeY1=parseInt($(".circle").attr("cy"))+parseInt($(".circle").attr("r"));
rangeY2=parseInt($(".circle").attr("cy"))-parseInt($(".circle").attr("r"));
$(".small").each(function(){
if(parseInt($(this).attr("cx"))<rangeX1&&parseInt($(this).attr("cx"))>rangeX2&&parseInt($(this).attr("cy"))<rangeY1&&parseInt($(this).attr("cy"))>rangeY2)
$(this).attr('fill','#fff');
else
$(this).attr('fill','#000');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg width="1500" height="1500" id="svg">
<circle class="circle" cx="0" cy='0' r='80' />
</svg>
