国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

FireFox下Canvas使用圖像合成繪制SVG的Bug

mudiyouyou / 2190人閱讀

摘要:本文適合適合對繪制圖形學前端可視化感興趣的讀者閱讀。結論已經明顯瀏覽器下,用下繪制繪制圖的時候,的設置將不生效。下面是一段用于測試的代碼,表示用源圖像的形狀去挖空目標圖像。后續繪制用臨時的替代圖片。

本文適合適合對canvas繪制、圖形學、前端可視化感興趣的讀者閱讀。
楔子

所有的事情都會有一個起因。
最近產品上需要做一個這樣的功能:給一些圖形進行染色處理。想想這還不是順手拈來的事情,早就研究過圖形染色的技術。于是我把之前寫好的兩種算法發給了小伙伴,讓他參照實現,第一種算法是操縱像素、第二種使用了圖像合成:globalCompositeOperation。
所有的事情都可能會有意外,寫程序更是如此了。
沒多久,小伙伴說,第二種算法在firefox下不起作用。

探索原因

聽說有bug,心中一驚。我測試過了的,FireFox下面也測試過的。于是我打開火狐瀏覽器,啟動示例,發現是好的,沒有問題。
但是小伙伴集成到產品中就有問題。 差別在哪兒呢? 通過一起排查,最終發現我的示例代碼和產品中代碼的一個區別是:示例代碼用的是png圖片,而產品中用的是svg圖片。
難道是svg圖片的問題,拿一個svg圖片放到示例代碼中,果然不對。結論已經明顯:
FireFox瀏覽器下,用Canvas下繪制繪制SVG圖的時候,globalCompositeOperation的設置將不生效。
下面是一段用于測試的代碼,ctx.globalCompositeOperation = "destination-out" 表示用源圖像的形狀去挖空目標圖像。
在其他瀏覽器中,以下代碼中是生效的,又挖空的效果。但是在
在FireFox 下不生效:



    


    
>
如何解決

找到問題的原因了,解決方法其實簡單。
事情往往就是這樣,很多時候,找到問題所在往往比解決問題要難。
解決方案其實很簡單

代碼中加入判斷,判斷瀏瀏覽器是否是FireFox。

如果是,則先把svg圖片繪制到臨時的canvas上面。

后續繪制用臨時的canvas替代svg圖片。

比如上面代碼可以改進如下:

function init() {
            var canvas = document.getElementById("c");
            var ctx = canvas.getContext("2d");
            var img = new Image();
            img.onload = function () {
                ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2);
                ctx.globalCompositeOperation = "destination-out";
            }
            img.src = "diffuse.png";
            var svg = new Image;
            svg.src = "./d.svg";
                      
        var tempCanvas = svg;  
                         if(isFirefox){
                             svg.onload = function(){
                                  tempCanvas = document.createElement("canvas");
                                tempCanvas.width = svg.width;
                                tempCanvas.height = svg.height;
                                var tempCtx = tempCanvas.getContext("2d");
                                tempCtx.drawImage(svg,0,0,svg.width,svg.height);
                             }           
                         }
                      
            function drawPoint(pointX, pointY) {
                            
                ctx.drawImage(tempCanvas, pointX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2);
            }
            canvas.addEventListener("click", function (e) {
                drawPoint(e.clientX, e.clientY);
            }, false);
        }

歡迎關注公眾號“ITman彪叔”。彪叔,擁有10多年開發經驗,現任公司系統架構師、技術總監、技術培訓師、職業規劃師。熟悉Java、JavaScript、Python語言,熟悉數據庫。熟悉java、nodejs應用系統架構,大數據高并發、高可用、分布式架構。在計算機圖形學、WebGL、前端可視化方面有深入研究。對程序員思維能力訓練和培訓、程序員職業規劃有濃厚興趣。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105500.html

相關文章

  • SVG粗談

    摘要:和確定的版本指定的寬高指定命名空間。的曲線就是使用畫的。等等元素元素是用來組合對象的容器。添加到元素的屬性會被其所有的子元素繼承。是基于矢量的,可以很好的處理圖像大小變化。而是基于位圖的,無法進行大小變化。 背景 最近一直在做報表之類的需求,用highcharts比較多。highcharts使用svg進行繪圖,所以學習了一下svg,稍微記錄一下。 概況 svg是XML語言的一種形式。S...

    el09xccxy 評論0 收藏0
  • 數據可視化實踐

    摘要:但如果數據可視化做的較弱,反而會帶來負面效果錯誤的表達往往會損害數據的傳播,完全曲解和誤導用戶,所以更需要我們多維的展現數據,就不僅僅是單一層面,目前有多種第三方庫來實現數據的可視化等。數據可視化的具體實現這里基于兩種實現方式,一種一種。 數據可視化的目的其實就是直觀地展現數據,例如讓花費數小時甚至更久才能歸納的數據量,轉化成一眼就能讀懂的指標;通過加減乘除、各類公式權衡計算得到的兩組...

    PrototypeZ 評論0 收藏0

發表評論

0條評論

mudiyouyou

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<