问题
Here i am trying to scale canvas background image dynamically.On click .set_bg_images i am setting up the canvas background image dynamically its working good and i have added button change_scale on click this button i am trying to change the scale of canvas background image,after setting up the background image and when click the change scale button the entire canvas background image going to diapered.Give me some idea to do this.
**//Here i am setting canvas background image**
$(".set_bg_images").click(function(){
var svg_src=$(this).attr('src');
canvas.remove(background);
fabric.loadSVGFromURL(svg_src,
function (objects, options) {
background = fabric.util.groupSVGElements(objects, options);
background.set({
// left: canvas.width/2,
// top: canvas.height/2,
scaleY: canvas.height / background.width,
scaleX: canvas.width / background.width,
selectable: false
});
// setBackgroundColor(back_colour);
canvas.add(background);
canvas.renderAll();
parent.$("#element_to_pop_up").bPopup().close();
});
**//Here i am trying to change scale of background image onclick event**
document.getElementById('change_scale').addEventListener('click', function (e) {
alert("sdfsdfds");
canvas.remove(background);
background.set({
// left: canvas.width/2,
// top: canvas.height/2,
scaleY: canvas.height / background.width -150 ,
scaleX: canvas.width /background.width - 150 ,
selectable: false
});
// setBackgroundColor(back_colour);
canvas.add(background);
canvas.renderAll();
});
});
回答1:
Finally got the answer bellow is code
document.getElementById('sdhafsdfjsd').addEventListener('change', function (e) {
var clickedID = this.value;
// alert(clickedID);
canvas.backgroundImage = '';
canvas.renderAll();
fabric.loadSVGFromURL(svg_src,
function (objects, options) {
background = fabric.util.groupSVGElements(objects, options);
// alert(background.width);
if(clickedID==8)
{
canvas.setBackgroundImage(svg_src, canvas.renderAll.bind(canvas), {
scaleY: canvas.height / background.width,
scaleX: canvas.width / background.width,
});
}
if(clickedID==6)
{
var rval=1;
background.width=background.width+(100*rval);
background.height=background.height+(70*rval);
//alert(background.width);
canvas.setBackgroundImage(svg_src, canvas.renderAll.bind(canvas), {
left: 65,
top: 30,
scaleY: canvas.height / background.width,
scaleX: canvas.width / background.width,
});
}
if(clickedID==0)
{
var rval=6;
background.width=background.width+(100*rval);
background.height=background.height+(70*rval);
//alert(background.width);
canvas.setBackgroundImage(svg_src, canvas.renderAll.bind(canvas), {
left: 210,
top: 110,
scaleY: canvas.height / background.width,
scaleX: canvas.width / background.width,
});
}
if(clickedID==2)
{
var rval=4;
background.width=background.width+(100*rval);
background.height=background.height+(70*rval);
// alert(background.width);
canvas.setBackgroundImage(svg_src, canvas.renderAll.bind(canvas), {
left: 175,
top: 100,
scaleY: canvas.height / background.width,
scaleX: canvas.width / background.width,
});
}
if(clickedID==4)
{
var rval=2;
background.width=background.width+(100*rval);
background.height=background.height+(70*rval);
//alert(background.width);
canvas.setBackgroundImage(svg_src, canvas.renderAll.bind(canvas), {
left: 110,
top: 60,
scaleY: canvas.height / background.width,
scaleX: canvas.width / background.width,
});
}
});
});
来源：https://stackoverflow.com/questions/22877846/scale-canvas-background-image-dynamically-using-fabric-js