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); 
} 
};