创建无缝旋转的背景图像

Question

我想重复旋转的背景图像。试图让它无缝摧毁我的灵魂。

从简单的事情开始，考虑每个图像都像砖块一样布局。创建无缝重复背景图像非常简单：

（红色区域是作物）。您可以在http://jsfiddle.net/mPqfB找到预期的效果。

现在假设我要将图像旋转45度：

不幸的是，同样的裁剪不再适用，正如您在http://jsfiddle.net/mPqfB/1上看到的那样。

我正在试图弄清楚如何正确裁剪图像，以便我们无缝重复。这可能涉及一些相当微不足道的数学，但我不能为我的生活弄明白。

[更新]

我正在尝试关注@ oezi的计算，以便更轻松地创建尺寸图像：100px x 50px。

因此：

最少公倍数= 100
斜边= 100 ² + 100 ² = 20000

现在我假设这意味着我们不必创建20000px x 20000px的图像。我希望@oezi可以澄清他如何执行他的大小调整？

如果这是 ² + b ² = c ² 等于c =平方根（a ^{2 < / sup> + b 2 ）}

然后我们可以同意我们的作物应该是141px？

最后，这实际上并没有解释我们从何处采摘作物？

[更新2]

看起来这应该是如何创建调整大小的。拍摄141px x 141像素的图像会产生正确的结果 - http://jsfiddle.net/EfuV2/

至于从何处裁剪，实际上并不重要！

Answer 1

旋转正好是45度，您必须找出未旋转图案宽度和高度的least common multiple。

• 在您的情况下， 15100 （宽度100和高度151）
• 将图案缩放到宽度100和高度150会更好，所以最不常见的倍数只有 300

取这个数字和一些数学（pythagorean theorem）。假设你的数字是两个短臂的长度，并计算the hypotenuse的长度 - 这就是我们的结果（制作一个这样大小的方形图像来获得你的模式）。

• 在您的情况下， 21355
• 通过调整大小，它是 424

请注意，这只是直接输入，因为我现在几乎无法尝试 - 但我确信这是正确的。

编辑：快速（且杂乱）测试让我了解到这一点：

• http://i.imgur.com/rZuu9.jpg
• http://jsfiddle.net/mPqfB/2/（首先点击图片链接，否则jsfiddle不显示图片）

我不小心让这个图案的高度只有423，旋转不完美（这里没有photoshop），但这足以证明我的数学是正确的。

Answer 2

诀窍是在被切断的部分与裁剪区域另一侧的剩余部分匹配的点处裁剪图案（参见示例蓝色切割）。它可能需要一些试验和错误才能做到正确，但你应该能够轻松地做到这一点。