svg在路徑上的地點形狀

我在SVG中創建了一個遊戲，並要求沿着一條路徑放置方形的地圖塊，名爲道路。
路徑可以彎曲或放置在一個角度，我想旋轉正方形瓷磚相對於路徑。svg在路徑上的地點形狀

我現在的結構是這樣的：


<defs> 
    <rect id="tile" width="200" height="200" stroke-width="5" stroke="red"/> 
</defs>

<g style="stroke-width=10px; stroke:#23238E;> 
    <path id="road1" d="M100 100 L 500 100"/> 
    <path id="road2" d="M500 100 L 200 100"/> 
</g>

我目前SVG的理解告訴我，我將不得不通過插值計算出瓷磚的位置，但我可相對於在路徑的瓷磚自動化時尚？

所以，我怎麼能申請<use x="xx" y="yy" orient="汽車" xlink:href="tile"/>？

的道路是從以下信息生成：

id = # 
vector2D = { 
    x1 = # 
    y1 = # 
    x2 = # 
    y2 = # 
} 
tiles = # // number of tiles in road

來源

2012-09-19 JGM.io

Raphael http://raphaeljs.com在任何點通過path.getPointAtLenght(x)提供了一條路徑的角度。 SVG有一個本地實現，但它沒有提供角度。你可以看看拉斐爾的來源，看看發生了什麼。以下是相關位：

getLengthFactory = function (istotal, subpath) { 
     return function (path, length, onlystart) { 
      path = path2curve(path); 
      var x, y, p, l, sp = "", subpaths = {}, point, 
       len = 0; 
      for (var i = 0, ii = path.length; i < ii; i++) { 
       p = path[i]; 
       if (p[0] == "M") { 
        x = +p[1]; 
        y = +p[2]; 
       } else { 
        l = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]); 
        if (len + l > length) { 
         if (subpath && !subpaths.start) { 
          point = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6], length - len); 
          sp += ["C" + point.start.x, point.start.y, point.m.x, point.m.y, point.x, point.y]; 
          if (onlystart) {return sp;} 
          subpaths.start = sp; 
          sp = ["M" + point.x, point.y + "C" + point.n.x, point.n.y, point.end.x, point.end.y, p[5], p[6]].join(); 
          len += l; 
          x = +p[5]; 
          y = +p[6]; 
          continue; 
         } 
         if (!istotal && !subpath) { 
          point = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6], length - len); 
          return {x: point.x, y: point.y, alpha: point.alpha}; 
         } 
        } 
        len += l; 
        x = +p[5]; 
        y = +p[6]; 
       } 
       sp += p.shift() + p; 
      } 
      subpaths.end = sp; 
      point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[0], p[1], p[2], p[3], p[4], p[5], 1); 
      point.alpha && (point = {x: point.x, y: point.y, alpha: point.alpha}); 
      return point; 
     };

其中point.alpha是旋轉角度。

來源

2012-09-20 05:49:09 Duopixel

我有點遲到;謝謝 ;） –

聽起來像是你應該尋找到使用標記的瓷磚，然後分手了路徑，讓你有頂點，你想要的Rects作爲標記點出現。您可以通過標記免費獲得定位。

來源

2012-09-19 16:53:24

但據我所知，您不能將事件或偵聽器鏈接到標記，因爲它們實際上不是DOM /結構的一部分，而是更多事物的表示方面。這就是我從上次試驗SVG的時候記得的 –

你的問題沒有提到這個要求。 –

svg在路徑上的地點形狀

回答

相關問題