Raphael設置透明png混濁失去了alpha通道

我正在使用Raphael 2.1.0。Raphael設置透明png混濁失去了alpha通道

當我動畫IE8下透明的PNG的不透明度，透明度以及動畫。即：從'0.0'的不透明度到'1.0的不透明度'。

透明度動畫結束後，我想設置/圖像的位置/阻恢復到前期的動畫狀態，但圖像的alpha通道變得不透明。曾經有透明背景的地方現在有一個白色的正方形。

隨着SVG渲染器 - Chrome和Firefox - 一切都很好。我試圖鏈接圖像，翻譯和阿爾法無濟於事。

下面的代碼：

var element = this._paper.image(image.Url(), 0, 0, width, height); 
var removeOnStop = true; 
var fromParams = {} 
var toParams = {}; 

// From options 
fromParams.opacity = options.from.alpha; 
// ... 
element.attr(fromParams); 

// To options 
toParams.transform = 'T300,300'; 
toParams.opacity = options.to.alpha;  

// Animate 
var anim = Raphael.animation(toParams, duration, 'linear', function() { 
    if (removeOnStop) { 
     element.attr({ opacity: defaultProperties.alpha }); 
     element.transform('T' + defaultProperties.left + ',' + defaultProperties.top); 
    } 
}).repeat(repeat); 

element.animate(anim);

任何幫助將不勝感激。

來源

2012-12-06 Matt Melton

我嘗試以下

動畫的alpha，無處不在，但這會導致內拉斐爾
鏈接translate()/transform()和attr()
直接將濾鏡對象
更改空引用的問題的順序（ATTR之前變換和反之亦然）

最後，工作方案是使用attr翻譯並設置不透明度：

if (removeOnStop) { 
    element.attr({ opacity: defaultProperties.alpha }); 
    element.transform('T' + defaultProperties.left + ',' + defaultProperties.top); 
}

成爲

if (removeOnStop) {       
    element.attr({ transform: 'T' + defaultProperties.left + ',' + defaultProperties.top, 
        opacity: defaultProperties.alpha }); 
}

重要的是，你必須做到這一點時，最初創建的圖像和設定的初始不透明度。

我希望這將救人後患。

來源

2012-12-06 11:36:36

謝謝，我今天需要它:) – patrick

這適用於'.image'元素。我希望它可能也適用於路徑或其他元素上的圖像填充，但它似乎沒有 - 任何轉換似乎都會永久性地破壞PNG透明度。 – user568458

Raphael設置透明png混濁失去了alpha通道

回答

相關問題