svg-edit - 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");

この関数 setImageBackground を svgcanvas.js に追加します。この画像はキャンバスに表示され、回転できます。

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