沒有得到如何正確關閉SVG/d3.js中的路徑

這個問題是我的Snakes and Ladders遊戲，我正在寫它來學習svg和d3.js.沒有得到如何正確關閉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

來源

2016-09-17 GeeWhizBang

有沒有錯誤信息順便說一句。 – GeeWhizBang

'Z'會從你的路徑的最後一個點到第一個點執行一個'lineTo'。如果你想要一個乾淨的形狀，你必須使用恢復的貝塞爾曲線回到你的出發點。 – Kaiido

我想在最後一段上寫一行。我可以用我在上面繪製的最後一個圓圈隱藏神器。我只需要如何讓曲線在正確的位置關閉。但是，即使使用幾何精確的線作爲最後一個元素，它也會繪製直線來關閉路徑 – GeeWhizBang

事實證明，我所要做的就是刪除前一個路徑的最後一個點，然後追加下一個路徑減去第一個字母「M」。我還補充了最後一點。當我僅僅從第二條路上移走「M」時，重複的問題就成了一個問題。

.attr("d", dDown.replace(/([0-9\.]*\,[0-9\.]*$)/, "") 
    + dUp.substr(1) + "L" + dataDown[0].x + "," + dataDown[0].y + "Z")

我不知道其他人是否可能對最後一點Q參數，並有可能做一些更復雜的正則表達式來抓住它。但是我的路徑都沒有。

來源

2016-09-18 01:04:29 GeeWhizBang

沒有得到如何正確關閉SVG/d3.js中的路徑

回答

相關問題