創建一個傾斜的徽標的無縫，花木圖像

Question

這不是一個直接的編程問題，但它確實使用了一些數學和css，現在它一直在困擾着我。

我的目標是創建一個傾斜的徽標圖像（帶有旋轉的標誌，例如35度），並使其可以平鋪。我已經提到this well thought out question但我目前有點停留在階段1

所以說，這是我的標誌：

它不是在它的頂部有一個小圖標，以便定期左側，它沒有設置在一個設置大小的矩形內，所以它的邊界不明顯。

我猜，第一步就是使它在目前的形式下變得更加可愛。只是應用CSS瓷磚規則，因爲它代表會導致這樣的事情，這是沒有好處：

理想的情況下，纔將其旋轉，我們要交替行應偏移，因此它不太網像。

偏移量應該明顯是相同的點之間的空間的50％的2個相鄰的徽標。實現這一步驟的最好方法是什麼？我只是複製/粘貼並拖動它直到看起來正確嗎？這不會那麼準確。 （使用Photoshop）。

然後，我需要確定裁剪區域，以便無縫重複。

完成此操作後，我有一個圖像網格，現在我可以將其作爲一個在Photoshop中旋轉到所需的角度。困難將會使作物區域正確。然後我會參考上面的鏈接。

增加的困難是確保我們有一個適合水平標誌的大小適當的作物區域。如果邊緣的比例意味着我們有非常高的比例，那麼我的旋轉裁剪區域將是巨大而毫無意義的。

總之，可靠地設置水平網格的最佳方法是什麼，這樣我們就能得到具有合理尺寸的作物區域（例如150 x 100像素）？

Answer 1

好的，經過一些艱苦的嘗試，我已經破解了它，但只有45度旋轉。如果有人能夠就如何計算其他角度的作物面積提供建議，我會很感興趣。

• 因此，第一步是製作一個水平格子的徽標，就像問題中的最後一個例子。 通過將徽標放置在畫布的左上角，然後裁剪畫布以使徽標恰好嵌入其中。

• 接下來，如有必要，將畫布調整爲大約所需圖像的大小。在這個階段，長寬比並不重要，我們只是想擁有一個可管理的圖像大小來工作。寬度爲250像素是很好的。這樣做的結果很可能是，你會對另一個邊緣有一個奇怪的維度。例如。 250px寬×78px高。

• 現在我們用空白空間填充徽標。這將有2個目的。首先要在徽標之間留出足夠的空間，其次要獲得良好的寬高比。這非常重要。如果可能的話，嘗試製作您的畫布，使一個邊緣爲另一個邊緣長度的1/2或1/3。這將有助於我們儘可能降低最小公倍數。調整畫布大小時，請確保將實際徽標保留在畫布的左上角，填充物位於圖像的右側和底部。

• 我們現在要手動平鋪圖像，但也包括填充區域。如果我們只是複製它，那麼photoshop將忽略填充區域，只複製徽標本身。製作一個新圖層，並將其放在帶有圖層的圖層文件夾中。用一種顏色填充此圖層。

• 現在製作一個新的Photoshop文檔。使畫布尺寸相當大;像1000px x 1000px。

• 將剛剛製作的圖層文件夾複製到新文檔中，方法是在選中圖層並重復時選擇新文檔作爲目標。

• 現在通過複製圖層並將其拖動來平鋪此文件夾。首先向下拖動第一個副本，然後向右拖動。 Photoshop通過將關鍵點上的圖層捕捉到原始圖像來幫助實現這一點。你會發現當它的上邊緣接觸到原始圖層的下邊緣時，你可以得到複製圖層，並沿着長度的一半進行拍攝，因此它被水平偏移。

• 保持複製和捕捉到位，直到您已經用瓷磚覆蓋大型畫布。

• 現在做一個會產生圖像的作物。獲取選擇工具並選擇fixed size選項。輸入一個像素大小，使得選擇的邊長與原始圖像的長度相同。即如果您的原始圖像是150px x 50px，那麼您應該使裁剪尺寸爲150px x 150px。

• 單擊畫布上的任意位置進行選擇，複製併合到一個新的文檔中，並且您應該會發現您可以使用可以使用的圖形圖像，儘管使用了水平標誌。

• 現在旋轉它。轉到大平鋪文檔。按Ctrl-D取消選擇。編輯 - >旋轉畫布45deg。

• 現在計算您的作物的大小。如下所示：

  1. 找到最小公倍數。所以如果你的尺寸是150x50 LCM = 150。

  2. 裁剪框的大小是直角三角形的縮影，其他邊長= LCM。即如果LCM = 150，L = sqrt（150 * 150 ）= 212.12。

• 現在製作一個尺寸爲212（在這種情況下）的旋轉畫布（任何地方都可以）的方形裁切。這應該是一個平鋪圖像可以保存，縮放，編輯等

這種方法工作在對待我的company's Twitter page

正如我所說的，任何計算裁切尺寸方法等角度會很有幫助。