在两点之间绘制假想路径并沿该路径打印图像
draw imaginary path between two points and print image along that path?
有没有办法用Javascript(或jQuery)在坐标之间画线(不一定显示这些线),然后沿着这些"路径"重复图像或字母?我在这里说的是直线,没有贝塞尔曲线或任何东西。我认为这似乎没什么大不了的,会试一试,但我想听听其他人对此的看法......类似的东西(虚构代码):
path = point1[x,y], point2[x,y], point3[x,y];
every20pixels-->renderimage('path/to/image') or letter('letter')
我疯了吗?谢谢
tl;dr
这是一个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
一旦有了斜率,您就可以通过简单地将其与斜率的 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的评论所建议的那样。
相关文章:
- 复制图像路径以单击它
- 如何使用jquery将base64图像路径转换为真实路径
- 如何设置SVG路径的样式以拍摄图像
- 滚动页面时的弯曲图像路径
- 如何使用php和javascript获取网页中显示图像的路径
- javascript onclick获取不带路径的图像名称
- Gulp bower图像路径
- Symfony2-Javascript文件中的图像路径
- 在移动设备上按路径或名称获取二进制图像(Ionic / Ng cordova 应用程序)
- 图像J宏路径问题
- 使用 jQuery 从 HTML 中的多个图像元素中删除文件路径
- 使用javascript从磁盘中的文件夹中选择所有图像的路径
- 将图像内容而非图像路径存储在mongodb中
- MVC5 和 Javascript 相对图像路径混淆
- 简单的图像滑块Javascript图像路径在IE 6中不起作用
- 从表单中派生要使用javascript对象加载的图像路径
- 将完整路径图像获取到输入文件中
- 使用Laravel中的Ajax保存路径图像
- 在智能手机上本地存储文件路径/图像,稍后上传
- 在iOS编程中将Base64图像转换为文件路径图像