I have SVG images. user can upload image and set it as pattern to SVG. After that user click on canvas anywhere. Now again when user selects SVG on canvas and want to scale image which set as pattern. How do I get image object img so that I can scaleWidth or can perfoem other operations.
upload_custom_image: function(currentElement){
console.log('Toolbar : upload_custom_image');
$("#customImage").on('change',function(){
var url = $("#customImage").val();
fabric.Image.fromURL('http://localhost/test/img/baker-profile.jpg',function(img){
var padding = 0;
img.scaleToWidth(100);
patternSourceCanvas.add(img);
patternSourceCanvas.renderAll();
var pattern = new fabric.Pattern({
source: function() {
patternSourceCanvas.setDimensions({
width: img.getWidth() + padding,
height: img.getHeight() + padding
});
patternSourceCanvas.renderAll();
return patternSourceCanvas.getElement();
},
repeat: 'repeat',
name:'sample'
});
currentElement.paths[0].setFill(pattern);
canvas.renderAll();
});
});
}
Now I have slider to change width of pattern. and I need img from above code to change width.
$("#img-width").on('change',function(){
img.scaleWidth($(this).val());
});
Aucun commentaire:
Enregistrer un commentaire