Javascript fabricjs clipTo不工作

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

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

此处不调用

clipTo

函数。 我想剪辑

oImg

，但没有调用

clipTo

这里怎么了？

玩家

以下是工作代码：

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);
});

玩家

以下是工作代码：

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);
});

---

将

clipTo

函数放在

IFFE

中并检查？将

clipTo

函数放在

IFFE

中并检查？您可能需要花点时间解释为什么这是工作代码。原始代码有什么问题，该代码如何解决问题？该网站的理念是提供一种学习体验，而不仅仅是在没有考虑的情况下复制和粘贴一些东西！您可能需要花点时间解释一下为什么这是一个有效的代码。原始代码有什么问题，该代码如何解决问题？该网站的理念是提供一种学习体验，而不仅仅是在没有考虑的情况下复制和粘贴一些东西！