1

Javascript（またはjQuery）を使用して、座標間に線を描画し（必ずしもそれらの線を表示する必要はありません）、それらの「パス」に沿って画像または文字を繰り返す方法はありますか？ここでは直線について話していますが、ベジェ曲線などはありません。大したことではないと思いますが、これについては他の人の意見を聞きたいと思います...（架空のコード）のようなもの：

path = point1[x,y], point2[x,y], point3[x,y];
every20pixels-->renderimage('path/to/image') or letter('letter')

私はクレイジーですか？ありがとう

4

1 に答える 1

1

tl;dr

これは、私があなたが望むと思うことを行うjsFiddleです: click。

説明

X座標と線が通過する2つの点を知ることで、線上の任意の点を計算できることを考えると、実際には非常に簡単です。

// A line, defined by two coordinates
var s = {x: 0.0, y: 0.0}; // Start
var e = {x: 300.0, y: 100.0}; // End

var distance = (e.x - s.x)
var slope = (e.y - s.y) / distance

勾配が得られるとすぐに、勾配を x 座標に乗算するだけで、直線上の "y" を計算できます。

var step = 32; // Calculate y-coordinate every 32 units
for(var x=0; x<distance; x+=step) {
    var y = x * slope;
    console.log(s.x + x, s.y + y);
    // The next snippet goes here ↓
}

後は、画像 (または他の DOM オブジェクト) をコピーして、次の座標に配置するだけです。

image.clone().appendTo(stage).css({
    left: (s.x + x-imageWidth/2) + "px",
    top: (s.y + y-imageHeight/2) + "px"
})

-imageWidth/2パーツは、画像を線の中央に配置するためにあります。そうしないと、画像の左上隅がそこに配置されます。また、このメソッドは、属性を持つ必要がある親コンテナのオフセットに対する座標を指定するという事実に依存していposition: relativeます。position: absolute@Eru のコメントで示唆されているように、この手法を使用して配置するすべての要素には が必要です。

于 2013-01-28T07:59:34.600 に答える