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属性。根据@ Eru的评论建议，使用此技术定位的每个元素必须具有position: absolute。

绘制两点之间的虚构路径并沿该路径打印图像？

1 个答案:

TL;博士

说明