Question

在下图中有一张1000x1000的画布，有一个矩形物体，灰色背景为900x300，位置为50,50，边框为黑色。矩形内部是一个织物图像对象，只是加载在哈巴狗的方形图像中。

图像对象的大小与在画布上位于50,50的矩形900x300相同（与矩形相同）。您可以看到突出显示的图像对象边界框与矩形的大小相同，应该如何，但图像本身并没有伸展以填充图像对象的大小。我想看到的是，哈巴狗是图像对象的900宽度，高度是基于实际的JPG比率;因此，如果图像本身为300x300且宽度为900，则图像的高度也应为900，但显然底部将被隐藏，因为对象仅为300高。

有谁知道如何让JPG拉伸以适合图像对象？

    var img02URL = 'http://fabricjs.com/lib/pug.jpg';   
        var canvas = new fabric.Canvas('mainc');

        var clipRect1 = new fabric.Rect({
            originX:'left',
            originY:'top',
            left:50,
            top:50,
            width:900,
            height:300,
            fill:'#DDD',
            stroke:'black',
            strokeWidth:2,
            selectable:false
        });
        clipRect1.set({
            clipFor:'test1'
        });
        canvas.add(clipRect1);

    var image1 = new Image();
        image1.onload = function(img){
            var image = new fabric.Image(image1,{
                width:900,
                height:300,
                left:50,
                top:50,
                clipName:'test1',
                clipTo:function(ctx){
                    return _.bind(clipByName,image)(ctx);
                }
            });
            canvas.add(image);
        }
        image1.src = img02URL;

var clipByName = function (ctx) {
        this.setCoords();

        var clipRect = findByClipName(this.clipName);

        var scaleXTo1 = (1 / this.scaleX);
        var scaleYTo1 = (1 / this.scaleY);
        ctx.save();

        var ctxLeft = -( this.width / 2 ) + clipRect.strokeWidth;
        var ctxTop = -( this.height / 2 ) + clipRect.strokeWidth;
        var ctxWidth = clipRect.width - clipRect.strokeWidth + 1;
        var ctxHeight = clipRect.height - clipRect.strokeWidth + 1;

        ctx.translate( ctxLeft, ctxTop );

        ctx.rotate(degToRad(this.angle * -1));
        ctx.scale(scaleXTo1, scaleYTo1);
        ctx.beginPath();

        ctx.rect(
            clipRect.left - this.oCoords.tl.x,
            clipRect.top - this.oCoords.tl.y,
            ctxWidth,
            ctxHeight
        );
        ctx.closePath();
        ctx.restore();
    }

    function degToRad(degrees) {
        return degrees * (Math.PI / 180);
    }

    function findByClipName(name) {
        return _(canvas.getObjects()).where({
                clipFor: name
            }).first()
    }

FabricJs从URL加载的图像不会拉伸以适合图像对象

0 个答案: