创建无缝旋转背景图像

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

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

（红色区域是作物）。您可以看到它按预期工作http://jsfiddle.net/mPqfB http://jsfiddle.net/mPqfB.

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

不幸的是，同样的作物不再有效，正如您所看到的http://jsfiddle.net/mPqfB/1 http://jsfiddle.net/mPqfB/1.

我正在尝试找出如何正确裁剪图像，以便我们能够无缝重复。做到这一点可能涉及一些相当琐碎的数学，但我一生都无法弄清楚。

[Update]

我试图遵循 @oezi 的计算，以便让事情变得更容易，创建了一个尺寸的图像：100px x 50px。

所以：

Least Common Multiple = 100
Hypotenuse = 100² + 100² = 20000

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

If this is a² + b² = c² is equal to c = square root of (a² + b²)

那么我们可以同意我们的裁剪应该是141px吗？

最后，这并不能真正解释我们从哪里获取作物？

[更新2]

看起来确实应该这样创建调整大小。对图像进行 141px x 141px 裁剪得到了正确的结果 -http://jsfiddle.net/EfuV2/ http://jsfiddle.net/EfuV2/

至于从哪里裁剪，实际上并不重要！

旋转正好是 45 度，你必须找出最小公倍数 http://en.wikipedia.org/wiki/Least_common_multiple未旋转图案的宽度和高度。

• 就你而言，那就是15100（宽度 100，高度 151）
• 将图案缩放到宽度 100 和高度 150 会更好，因此最小公倍数仅为300

拿这个数字和一些数学（勾股定理 http://en.wikipedia.org/wiki/Pythagorean_theorem）。假设你的数字是两个短臂的长度，并计算斜边 http://en.wikipedia.org/wiki/Hypotenuse- 这就是我们的结果（制作该尺寸的方形图像以获得您的图案）。

• 就你而言，那就是21355
• 调整大小后，就是~424

请注意，这只是我直接从脑海中输入的，因为我目前无法实际尝试 - 但我真的确定它是正确的。

edit:一个快速（而且混乱）的测试让我得到了这个：

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

不小心我把图案的高度设为了423，而且旋转并不完美（这里没有photoshop），但它足以证明我的数学是正确的。