生成精靈帶指南針智能佈局和間距

我想產生一些精靈與上海社會科學院壓縮，我想聰明的佈局適用於像文檔精靈文件http://compass-style.org/help/tutorials/spriting/sprite-layouts/生成精靈帶指南針智能佈局和間距

這個偉大的工程：

$sprites: sprite-map("sprite/*.png", $spacing: 20px);

但是，當我添加布局它打破了;沒有間距也沒有智能佈局：

$sprites: sprite-map("sprite/*.png", $layout: smart, $spacing:

如何將智能佈局應用於生成的精靈？

更新一段時間後，我得到這個工作：

$sprite-spacing: 20px; 
$sprite-layout: smart; 
@import "sprite/*.png"; 
@include all-sprite-sprites;

但現在我無法得到的間距工作。精靈很聰明，但沒有間距。

來源

2013-05-28 Tommy Sørensen

使用智能佈局時，間距不能設置。 – agustibr

您無法獲得間距以處理智能佈局的原因是因爲智能佈局根本不支持間距。間距僅對水平和垂直佈局有任何影響。

也就是說，如果您願意修補指南針代碼，您可以自己添加支持。您需要替換layout_methods.rb文件中的calculate_smart_positions方法，該文件可在lib/compass/sass_extensions/sprites/layout_methods.rb（相對於羅盤安裝目錄）找到。

更新的方法應該是這樣的：

def calculate_smart_positions 
    fitter = ::Compass::SassExtensions::Sprites::RowFitter.new(@images) 
    current_y = 0     
    width = 0 
    height = 0 
    last_row_spacing = 9999 
    fitter.fit!.each do |row| 
    current_x = 0     
    row_height = 0 
    row.images.each_with_index do |image, index| 
     extra_y = [image.spacing - last_row_spacing,0].max 
     if index > 0 
     last_image = row.images[index-1] 
     current_x += [image.spacing, last_image.spacing].max 
     end 
     image.left = current_x 
     image.top = current_y + extra_y 
     current_x += image.width 
     width = [width, current_x].max 
     row_height = [row_height, extra_y+image.height+image.spacing].max 
    end 
    current_y += row.height 
    height = [height,current_y].max 
    last_row_spacing = row_height - row.height 
    current_y += last_row_spacing 
    end 
    @width = width 
    @height = height 
end

注意，這有時可能不會產生最佳的佈局，因爲它只能應用到限位後的行擬合算法已經決定了精靈是如何分成行。但希望它對大多數情況下應該足夠好。

我還應該提到，我有寶貴的零紅寶石編程經驗，所以這可能是寫得非常糟糕的代碼。它確實似乎工作。

來源

2013-06-01 15:54:12

@TommySorensen這個補丁不適合你嗎？ –

它完美的工作，但我正在尋找一個解決方案，我不需要自己改變指南針文件。我不是這個項目的唯一開發者。與紅寶石代碼的偉大工作！ –

@TommySorensen我完全打算將此作爲補丁提交給指南針項目 - 我只是在等待一些關於它是否有效的反饋。他們是否願意接受目前形式的代碼是另一個問題，但我認爲至少比其他拉取請求的條件更好。 –

當使用智能佈局時，間距不能設置#718。

但有解決問題拉入請求：Smart layout now considers spacing, should fix #718

來源

2013-06-03 15:59:43 agustibr

拉請求是我想要的，現在我只能等待它 –

是＃718合併成指南針還是你知道狀態？ –

還沒有:( >沒有，這還沒有被合併，這是因爲內部API已經改變了一些，所以這是針對穩定的，並且需要重新設計，並且還有一些代碼質量問題http://git.io/wrUNLg – agustibr

下面是一個簡單的解決方案，我已經創造了它有很好的表現Check it on GitHub

來源

2014-02-06 18:31:35

它是否支持每個圖像之間填充的垂直和水平對齊？ –

如果將精靈佈局設置爲垂直或水平，則它將支持間距，如果您保持智能佈局，則它將不支持圖像之間的任何間距，即指南針配置和你不能做任何事情。 –

生成精靈帶指南針智能佈局和間距

回答

相關問題