在famo.us中使用Chrome作物圖像

我有一張背景（svg）圖像，我最初將查看放大圖像，然後放大圖像將縮小以適合頁面。這在Firefox中運行良好，但在Chrome中，圖片在放大時會被裁剪，因此當它適合頁面時，其周圍會有空白區域。我相信這是Chrome的優化器的一部分描述在這裏：http://famo.us/guides/pitfalls 在famo.us中使用Chrome作物圖像

我的問題是，我可以禁用此特定圖像的優化？或者還有其他解決方案嗎？

編輯：無需查看Chrome優化器，通過使用更好的縮放方法解決（從正確的答案下面）。

來源

2015-01-13 vikeri

很難知道你需要什麼樣的解決方案，沒有看到與您正在使用把圖像渲染的方法和你正在使用的轉換代碼。 jsBin或Fiddle也會很好，看看它是如何失敗的。這些都是很好的做法，可以讓你知道你的問題，因爲你希望我們能夠回答我們的問題。 – talves

對不起，我很高興你瞭解它無論如何:)我的問題是，我使用'transform.Scale'而不是'transform.Proportions'，當再次放大使圖像模糊在Chrome中。然後，我的最初解決方法是讓原始圖像放大，然後剪切發生。實際上看着「比例」，但文檔中平庸的描述使我無法理解它。 – vikeri

我對'transform.scale'有同樣的問題。這是Chrome瀏覽器中的問題。 – talves

雖然我們不知道您的用例，但下面是一個使用比例的示例。

Example jsBin (click on the image to resize)

var mainContext = Engine.createContext(); 
    mainContext.setPerspective(1000); 

    var mod = new StateModifier(); 

    var logo = new ImageSurface({ 
    content: 'http://code.famo.us/assets/famous_logo.svg', 
    classes: ['double-sided'] 
    }); 
    logo._mod = new Modifier({ 
    size: [undefined, undefined], 
    origin: [0.5, 0.5], 
    align: [0.5, 0.5], 
    transform: Transform.translate(0, 0, 0), 
    proportions: [1.5, 1.5] 
    }); 

    var mainMod = new Modifier({ 
    origin: [0.5, 0.5], 
    align: [0.5, 0.5] 
    }); 
    var rootnode = mainContext.add(mainMod); 
    rootnode.add(logo._mod).add(logo); 

    //logo._mod.setProportions([1.5, 1.5], {duration: 2000}); 

    logo.on('click', function(){ 
    if (!logo.small) 
     logo._mod.setProportions([1,1], {duration: 1000}); 
    else 
     logo._mod.setProportions([1.5, 1.5], {duration: 1000}); 

    logo.small = !logo.small; 

    });

來源

2015-01-13 22:54:37 talves

在famo.us中使用Chrome作物圖像

回答

相關問題