0

我正在画布上绘制 SVG 文件。

为此，我在 Canvas 上使用 canvg Javascript SVG 解析器和渲染器。

如果我使用：

context.drawSvg('/static/images/awesome_tiger.svg', 0, 0, 400*scaleValue, 400*scaleValue);

然后它工作正常。

但如果我使用：

context.drawSvg(images[0], 0, 0, 400*scaleValue, 400*scaleValue);

然后出现以下错误。

错误：未捕获的类型错误：对象# has no method 'substr' in canvg.js

图像 = ["/static/images/awesome_tiger.svg"]

原始代码：

var dataJSON = data || [];
    var dataJSON2 = data2 || [];
    window.onload = function(){ 
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext('2d');

        //tooltipTxt = ["Region 1", "Region 2", "Region 3"];
        var tooltip = null,
                timer;

        console.log(dataJSON);
        var files = ["/static/images/awesome_tiger.svg", "/static/images/green1.png", "/static/images/pink.png"],
        images = [],
        numOfFiles = files.length,
        count = numOfFiles;
        // in files variable no use of svg name. 
        //var x = canvg('myCanvas', '/static/images/awesome_tiger.svg') In this we can load svg with this method also but we used drawSvg method

        /// function to load all images in one go
        function loadImages() {
            /// go through array of file names
            for(var i = 0; i < numOfFiles; i++) {
                /// create an image element
                var img = document.createElement('img');
                /// use common loader as we need to count files
                img.onload = imageLoaded;

                //img.onerror = ... handle errors
                img.src = files[i];                 
                /// push image onto array in the same order as file names
                images.push(img);

            }
        }
        loadImages();
        function imageLoaded(e) {
            /// for each successful load we count down
            count--;
            //if (count === 0) 
            if (count === 0) 
            start(); //start when nothing more to count
        }
        function start() {
        context.clearRect(0, 0, canvas.width, canvas.height);   
        context.drawSvg('/static/images/awesome_tiger.svg', 0, 0, 400*scaleValue, 400*scaleValue);  

           for(var i = 0, pos; pos = dataJSON[i]; i++) {

               /// as we know the alpha ball has index 1 we use that here for images
               context.drawImage(images[1], pos.x, pos.y, 20/scaleValue, 20/scaleValue);
           }
            for(var i = 0, pos; pos = dataJSON2[i]; i++) {             
               context.drawImage(images[2], pos.x, pos.y, 20/scaleValue, 20/scaleValue);
           }
        }

        function draw1(scaleValue){             
            context.save();     
            context.setTransform(1,0,0,1,0,0)   
            context.globalAlpha = 0.5;                      
            context.clearRect(0, 0, canvas.width, canvas.height);   
            context.restore();          
            context.save(); 
            context.drawSvg('/static/images/awesome_tiger.svg', 0, 0, 400*scaleValue, 400*scaleValue)
            context.scale(scaleValue, scaleValue);
            for(var i = 0, pos; pos = dataJSON[i]; i++) {
                   /// as we know the alpha ball has index 1 we use that here for images
                   context.drawImage(images[1], pos.x, pos.y, 20/scaleValue, 20/scaleValue);
               }    
            for(var i = 0, pos; pos = dataJSON2[i]; i++) {
                   /// as we know the alpha ball has index 1 we use that here for images
                   context.drawImage(images[2], pos.x, pos.y, 20/scaleValue, 20/scaleValue);
               }
            context.restore();
        }; 
        draw1(scaleValue);


    }
4

0 回答 0