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在路径上的地点形状

回答

相关问题