Javascript KineticJS Firefox問題

我試圖使用KineticJS對圖層進行復合操作。一切工作正常在Chrome中，但沒有任何顯示Firefox或IE10 代碼運行通過沒有任何錯誤。Javascript KineticJS Firefox問題

你可以看到這裏的問題： http://clients.lilodesign.com/Lilo/Kinetic/

瀏覽器，你應該看到一個圓的標準MS藍樹圖像顯示通過的部分比特。在Firefox和IE10中，您只會看到空白屏幕。

您可以通過查看源代碼來查看代碼。它的所有內聯和一個非常簡單的例子來展示這個問題。如果刪除以下行： ctx.globalCompositeOperation =「destination-atop」; 然後你可以在所有三個瀏覽器中看到帶有橢圓的藍色樹形圖像，所以代碼「起作用」。

有沒有其他人遇到過這種情況並找到了解決方法？我已經搜索並嘗試了建議的解決方案，如： shape intersection with KineticJS

但這些仍只是似乎在Chrome工作。

任何幫助或指針，將不勝感激。

謝謝

泰隆。

來源

2013-06-27 Tyrone

您是否嘗試過解決這個缺少會出現在控制檯？「HTML文檔的字符編碼沒有聲明，如果文檔包含US-ASCII範圍之外的字符，文檔將在某些瀏覽器配置中顯示爲亂碼文本。頁面的字符編碼必須在文檔中或在文檔中聲明傳輸協議。@ http://clients.lilodesign.com/Lilo/Kinetic/「 – Ani

感謝您的建議，但我不認爲這是問題，否則頁面將無法工作，如果我刪除globalCompositeOperation。我創建了另一個頁面http://clients.lilodesign.com/Lilo/Kinetic/test2.htm，其中註釋了該行，以便您可以看到在Firefox和IE10中呈現的內容。它是唯一沒有在FF＆IE上運行的全球性組合操作。我試過這在純HTML5和另一個帆布框架，它工作正常，所以我猜在Kinetics框架有些奇怪。 – Tyrone

對於第二個鏈接，我在Chrome和Firefox上看到相同的東西（不能說abt IE，因爲這已在Mac上測試過），即您期望顯示的內容 – Ani

我們曾經能夠通過抓取圖層的上下文來作弊，但現在它不可靠（正如您發現的那樣）。

你仍然可以得到verrrrry哈克和做這樣的：http://jsfiddle.net/m1erickson/6fTQU/

但是不要！（即使這種黑客實際上並不適用於透明像素的圖像）。

取而代之的是，通過創建一個動態自定義形狀對象來執行官方的方法。

動力學形狀給你一個正式的畫布和上下文來處理。

因此，globalCompositeOperation正常工作（可靠！）。

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/LtxEe/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script> 

<style> 
     body{ background-color: ivory; } 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:300px; 
    height:300px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 300, 
     height: 300 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 


    var img=new Image(); 
    img.onload=function(){ 
     buildLayer(img); 
    } 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png"; 


    function buildLayer(img){ 

     var myShape=new Kinetic.Shape({ 
      drawFunc:function(canvas){ 
       var ctx=canvas.getContext(); 
       ctx.beginPath(); 
       ctx.drawImage(img,0,0); 
       ctx.globalCompositeOperation="destination-atop"; 
       ctx.arc(150,150,60,0,Math.PI*2,false); 
       ctx.closePath(); 
       ctx.fill(); 
       canvas.fillStroke(this); 
      }, 
      x:0, 
      y:0, 
      width:img.width, 
      height:img.height 
     }); 
     layer.add(myShape); 
     layer.draw(); 

    } 

}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <div id="container"></div> 
</body> 
</html>

來源

2013-06-30 07:05:25 markE

謝謝，這種方法在IE10中甚至令人驚訝。它是一種恥辱，你不能使用內置的形狀對象，但假設你不能爲你做所有事情。 – Tyrone

Javascript KineticJS Firefox問題

回答

相關問題