svg-edit - 배경을 동적으로 설정하십시오.

Question

브라우저에서 이미지에 주석을 달기 위해 svg-edit를 사용하고 있습니다. 이미지는 svg-edit가 포함 된 동일한 페이지에 업로드되며 svg-edit의 배경으로 업로드시 동적으로 설정해야합니다. 이 작업을 수행 할 수 있습니까?

Answer 1

개체의 메서드 즉 svgCanvas.setBackground()를 호출해야합니다.

이를 위해 당신은 확장 등을 만들 수 있습니다

이

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


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

return {}; 
}); 

그런 다음 마지막 줄에서 같은 SVG-edit.js이 확장자를 포함 : EXT-backchange.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); 
} 
};