svg-edit - 动态设置背景

Question

我正在使用svg-edit在浏览器中注释图像。该图像上传到svg-edit所嵌入的同一页面中，并且需要在上传时动态设置，作为svg-edit的背景。这可以做到吗？

Answer 1

你必须调用对象的方法，即svgCanvas.setBackground（）;

为此，您可以创建一个扩展名，比如：EXT-backchange.js

这个文件看看喜欢这样的：

svgEditor.addExtension("changeback", function() { 


svgCanvas.setBackground('','abc.png'); 

return {}; 
}); 

然后包括在本扩展SVG-edit.js在上线：

svgEditor.setConfig(
{ 

extensions: ['ext-backchange.js'] 

}) 

Answer 2

您可以使用setImageBackground（imageBackground）函数

setImageBackground("image.png"); 

并在svgcanvas.js中添加此函数setImageBackground此图像出现在画布上并可以旋转。

this.setImageBackground= function(val) { 

var elem = addSvgElementFromJson({ 
    "element": "image", 
    "attr": { 
     "x": (svgcontent.getAttribute('x') - bgimg_with)/2, 
     "y": (svgcontent.getAttribute('y') - bgimg_height)/2, 
     "width": bgimg_with, 
     "height": bgimg_height, 
     "id": 'ImgBckgd', 
     "opacity": 1, 
     "style": "pointer-events:inherit", 
    } 
}); 

setHref(elem, last_good_img_url); 
preventClickDefault(elem);  
if(!elem) return; 
var attrs = $(elem).attr(['width', 'height']); 
var setsize = (!attrs.width || !attrs.height); 
var cur_href = getHref(elem); 
// Do nothing if no URL change or size change 
if(cur_href !== val) { 
    setsize = true; 
} else if(!setsize) return; 
var batchCmd = new BatchCommand("Change Image URL"); 
setHref(elem, val); 
batchCmd.addSubCommand(new ChangeElementCommand(elem, { 
    "#href": cur_href 
})); 
if(setsize) { 
    $(new Image()).load(function() { 
     var changes = $(elem).attr(['width', 'height']);   
     $(elem).attr({ 
      width: this.width, 
      height: this.height 
     });   
     selectorManager.requestSelector(elem).resize();   
     batchCmd.addSubCommand(new ChangeElementCommand(elem, changes)); 
     addCommandToHistory(batchCmd); 
     call("changed", [elem]); 
    }).attr('src',val); 
} else { 
    addCommandToHistory(batchCmd); 
} 
};