如何在FabricJS上始终保持1的缩放[已编辑]

时间:2018-01-22 17:44:58

标签: fabricjs

我需要在fabricJS中创建的应用程序中,当我使用缩放处理程序修改对象时,缩放保持为1,并且对象的大小取高度值乘以scaleX。我可以为宽度应用相同的。但我不能在图像中应用它。我怎样才能解决这个问题?

我为一个正方形和一个图像留下了一个示例小提琴,以便您可以看到结果。

图像中的结果类似于裁剪,我无法避免这种情况,因为很明显,当我修改图像的容器时,_element属性也包含scaleXscaleY不会更改,因此图像不会在容器内调整大小。 这是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();
        //}
    });
});

编辑:新发现

说到文本,矩形,图像和折线,似乎我正在修改外部容器,因为内部内容保持不变。如何修改内容容器的大小?

0 个答案:

没有答案