javascript - 在两点之间绘制假想路径并沿该路径打印图像？

Question

有没有一种方法可以使用Javascript(或jQuery)在坐标之间绘制线条(不一定显示这些线条)，然后沿着这些“路径”重复图像或字母？我这里说的是直线，没有贝塞尔曲线或任何东西。我认为这似乎没什么大不了的，会尝试一下，但我想听听其他人对此的看法......类似于(虚构的代码):

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

我疯了吗？谢谢

Answer 1

tl;博士

这是一个 jsFiddle ，它可以完成我认为你想要的事情:click .

说明

实际上这很容易，因为您可以通过知道它的 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

一旦获得斜率，您就可以通过简单地将其 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 的评论所建议的。