我需要在用fabricJS制作的应用程序中,当我使用缩放处理程序修改对象时,缩放保持在1,并且对象的大小采用高度乘以scaleX的值。我可以对宽度应用相同的方法。但我无法将其应用到图像中。我怎样才能解决这个问题?
我留下了一个正方形和图像的示例小提琴,以便您可以看到结果。
图像中的结果类似于裁剪,我无法避免这种情况,因为显然,当我修改图像的容器时,也包含并且scaleX不会scaleY更改的 _element 属性,因此图像不会在容器内调整大小。这是jsFiddle。
var canvas = new fabric.Canvas('canvas');
var rect1 = new fabric.Rect({
width: 100,
height: 100,
left: 200,
top: 200,
angle: 0,
fill: 'rgba(0,0,255,1)',
originX: 'center',
originY: 'center'
});
canvas.add(rect1);
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) {
//i create an extra var for to change some image properties
var img1 = myImg.set({
left: 0,
top: 0,
width: 150,
height: 150
});
canvas.add(img1);
});
canvas.on('mouse:up', function(e) {
/*if(e.target != null){
//alert(e.target.width*e.target.scaleX);
}*/
//console.log(e.target);
canvas.getActiveObjects().forEach(function(obj) {
//if(obj.get('type')!='image'){
obj.set('width', obj.width * obj.scaleX, obj);
obj.set('height', obj.height * obj.scaleY, obj);
//if(obj.get('type')!='image'){
obj.scaleX = 1;
obj.scaleY = 1;
//}else{
// obj.scaleX = 1;
// obj.scaleY = 1;
// obj._element.scaleX = 1;
// obj._element.scaleY = 1;
// console.log("Width Contenedor Imagen: "+obj.width+" Width Imagen: "+obj._element.width);
// console.log("Scale Contenedor Imagen: "+obj.scaleX+" Scale Imagen: "+obj._element.scaleX);
//}
obj.setCoords();
//}
});
});
Run Code Online (Sandbox Code Playgroud)
编辑:新发现
说到文本、矩形、图像和折线,我似乎正在修改外部容器,因为内部内容保持不变。我怎样才能修改内部容器的大小?