我正在画布上绘制 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);
}