绘制沿该路径的两个点和打印图像之间的虚路径？(draw imaginary path between

是否有使用JavaScript（或jQuery的）的方式来绘制坐标之间的线（不一定是显示那些线），然后重复图像或字母沿着这些“路径”？ 我在这里讲的直线，没有Bezier曲线或任何东西。 我认为它似乎并不像一个大问题，并给它一去，但我想对这个...像（虚代码）别人的意见：

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

我疯了吗？ 谢谢

Answer 1:

TL;博士

这里有一个的jsfiddle是做什么，我想你想： 点击 。

说明

它实际上是很容易的，因为你可以计算出在一个线上的任何一点通过了解它的x坐标和两个点的线经过：

// 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

只要你有坡度，你可以通过简单地multiypling它与斜率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 ，通过@鄂的评论的建议。

文章来源: draw imaginary path between two points and print image along that path?