javascript - 在网格点中创建 SVG 路径
问题描述
我需要沿着绿色(允许)点创建一个 SVG 路径到 mousedown 事件的最近点。
编码:
var GridArea = $('#Grid');
var MapPoints;
var PointsY = 140;
for (i = 160 ; i <= 560; i+=20) {
if (i == 560) {
PointsY+=20;
i = 160;
}
if (PointsY >= 440){
break;
}
MapPoints += ('<rect class="MapPoints NotAllowed" x="'+i+'" y="'+PointsY+'"/>');
}
GridArea.html(MapPoints + '<circle id="CirclePoint" cx="160" cy="280" r="5" fill="red"/>');
var RectGrid = $("rect");
var XValue, YValue;
var X = [160,180,200,220,240,240,240,240,260,260,260,280,300,300,320,340,360,380,400,400,380,380,380,380,380,400,420,420,420,440,440,460,480,480,500,500,520,540,420,440,460,480,500,500,520,540];
var Y = [280,300,320,320,320,340,360,380,400,320,300,300,300,280,280,280,280,280,300,280,260,240,220,200,180,160,140,320,340,340,360,380,380,400,400,420,440,440,300,300,300,300,300,280,280,260];
for (i = 0; i < RectGrid.length; i++) {
for (j = 0; j < X.length; j++) {
if ($("rect:nth-child("+i+")").attr('x') == X[j] && $("rect:nth-child("+i+")").attr('y') == Y[j]) {
$("rect:nth-child("+i+")").removeClass("NotAllowed");
$("rect:nth-child("+i+")").addClass("Allowed");
}
}
}
* {
margin: 0;
padding: 0;
}
#Grid {
width: 1000px;
height: 600px;
border: 1px solid black;
}
.MapPoints {
width: 20px;
height: 20px;
z-index: 0;
stroke: #000;
}
.NotAllowed {
fill: rgba(255, 0, 0, 0.40);
}
.Allowed {
fill: rgba(0, 255, 130, 0.40);
}
.CirclePoint {
z-index: 1000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
<svg id="Grid">
</svg>
我需要穿过或进入“允许”点的路径。我试图得到最近的点,它适用于“X”,但不适用于“Y”,我什至无法画出错误的路径。
解决方案
推荐阅读
- c# - WIX 不会在 unistall 上停止 Windows 服务
- angular6 - Angular v6、rxjs v6 错误 TS2339:“OperatorFunction”类型上不存在属性“管道”
- r - 如何在R中导入不同的文件,每个文件都包含xml文件?
- geoserver - 地理服务器:没有这样的工作区 'gwc/service'
- python - 为什么我不能在代码中确定对象是 DataTime 类型?
- c# - 从本机代码控制第三方线程
- python-3.x - 使用 Gensim 进行动态主题建模/哪个代码?
- javascript - 我已将函数名称“测试”添加到关注中,但错误提示它无法识别为函数。谁能帮助我
- java - 如何在Java中转换字符集?
- jquery - 淘汰赛:未捕获的 ReferenceError:分配中的左侧无效