我正在SVG中创建游戏,并且需要沿路径放置方块,名为 road 。
路径可以弯曲或以一定角度放置,我想相对于路径旋转方形瓷砖。
我目前的结构如下所示:
<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
答案 0 :(得分:2)
Raphael http://raphaeljs.com通过path.getPointAtLenght(x)
提供任意点的路径角度。 SVG有一个本机实现,但它没有提供角度。您可以查看Raphael的来源,看看发生了什么。这是相关的一点:
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是旋转角度。
答案 1 :(得分:0)
听起来你应该考虑使用瓷砖的标记然后分割路径,这样你就可以在你希望rects显示为标记中点的顶点。你可以免费获得标记。