这个问题适用于我的Snakes and Ladders游戏,我正在写这篇游戏来学习svg和d3.js。
http://codepen.io/geewhizbang/full/YGWZWv
目前我有一些漂亮的蛇形蛇,而不是我之前绘制的粗线。但我不知道如何正确关闭它们。
var path = gameBoard.append('path')
.attr("id", "snake" + snakeIndex)
.attr("d", cardinalInterpolator(data))
.attr('stroke-width', 0)
.attr('fill', 'none');
hotSpots[snake[0]] = { path: "snake" + snakeIndex, xOffset: 0, yOffset: 0, endPosition: parseInt(snake[snake.length-1]) };
var pathNode = path.node();
setSeededRandom(snake);
var odd = true;
var dataDown = [];
var dataUp = [];
for (var i = 0; i < snake.length - 1; i++) {
var width = snakeStroke * (10 + (odd ? (1 + getSeededRandom(4)) : getSeededRandom(4))) / 6;
var point = data[i];
var tangentPoints = getTangentPoints(pathNode, getClosestPositionInfo(pathNode, point).length, width);
var rotatedPoints = rotatePoints(tangentPoints.p1, tangentPoints.p2, Math.PI / 2);
dataDown.push(rotatedPoints.p1);
dataUp.push(rotatedPoints.p2);
}
var lastPoint = data[data.length - 1];
dataDown.push(lastPoint);
dataUp.push(lastPoint);
dataUp.reverse();
var dDown = cardinalInterpolator(dataDown);
var dUp = cardinalInterpolator(dataUp);
var connector = linearInterpolator([dataUp[dataUp.length - 1], dataDown[0]]);
问题在于:
gameBoard.append('path')
.attr("d", dDown + dUp + connector + "Z")
.attr('stroke-width', 1)
.attr('fill', config.snakeColor)
.attr('stroke', config.snakeOutlineColor);
}
其中一条混乱的蛇的“d”属性是:
M154.59472020467123,30.816396077473968Q151.03003730773926,47.616497294108065,147.703857421875,53.25049845377603C142.71458759307862,61.70150019327799,121.74338811238607,79.31515172322591,121.33292134602864,87.15640767415364S140.6673505147298,96.09899927775064,144.9674123128255,105.5255381266276Q147.83412017822263,111.80989735921223,150,150M150,150Q140。 52832641601563,116.41847635904949,136.79989115397137,110.04224141438803C131.20723826090497,100.47788899739584,112.20209986368816,95.41289850870768,112.7156473795573,86.23765055338542S135.3200963973999,57.4320287068685,140.22354125976562,48.87392171223959Q143.49250450134278,43.16851704915365,145.40527979532877,29.183603922526032M145.40527979532877,29.183603922526032L154.59472020467123,30.816396077473968Z < / p>
答案 0 :(得分:1)
事实证明,我所要做的就是删除上一条路径的最后一点,然后追加下一条路径减去第一个字母&#34; M&#34;。我还添加了最后一点。当我仅仅删除&#34; M&#34;重复点是一个问题。从第二条道路。
.attr("d", dDown.replace(/([0-9\.]*\,[0-9\.]*$)/, "")
+ dUp.substr(1) + "L" + dataDown[0].x + "," + dataDown[0].y + "Z")
我不知道如果其他人可能在最后一点上有一个Q参数,可能需要做一些更复杂的正则表达式来捕获它。但我的道路都没有。