制造is不工作

Question

我有一个简单的脚本，如：

fabric.Image.fromURL(url, function(oImg) { 
        oImg.set({selectable:false})
        oImg.clipTo = function(ctx) {
            console.log("ctx")
            console.log(ctx)
        }
    })

这里不调用clipTo函数。我想剪辑oImg，但是没有调用clipTo。

这里面怎么了？

Answer 1

游戏玩家，

以下是工作代码：

var canvas = new fabric.Canvas('c1');
var src = "http://fabricjs.com/lib/pug.jpg";
canvas.backgroundColor = "#333";

var object;
fabric.util.loadImage(src, function (img) {
    object = new fabric.Image(img);
    object.set({
        left: 100,
        top: 100,
        selectable: false,
        clipTo: function(ctx) {
            console.log("ctx")
            console.log(ctx);
            ctx.rect(
                        2,
                        2,
                        430,
                        430
                    );
        }
    });
    object.hasRotatingPoint = true;
    object.scaleX = object.scaleY = 0.25;
    canvas.add(object);
    canvas.renderAll();
});

实际上，您的代码也运行良好。我相信只有与库版本不同。我使用了1.7.1我猜它对你不起作用，因为你的图像还没有被激活或者还没有加载到画布中，所以你试着剪辑它。

另外，我使用fabric.util.loadImage而不是fabric.Image.fromURL。

对于fabric.Image.fromURL，您应该创建一个活动对象，然后设置属性。要创建一个活动对象，您应该执行如下操作：

var objImg = null;
var image = fabric.Image.fromURL(img, function(oImg) {
                    oImg.set({width: oImg.width,
                              height: oImg.height,
                              left: 100,
                              top: 100,
                              originX: 'center',
                              originY: 'center',
                              selectable: false,
                              perPixelTargetFind: true,
                              transparentCorners: false});

                    canvas.setActiveObject(oImg);
                    objImg  = canvas.getActiveObject();
                    objImg.clipTo = function(ctx) {
                console.log("ctx")
                console.log(ctx);
                ctx.rect(
                            2,
                            2,
                            430,
                            430
                        );
            }
                    canvas.add(oImg);
});