fabricjs clipTo无法正常工作 [英] fabricjs clipTo is not working

问题描述

我有一个简单的脚本，例如:

I have a simple script like:

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

此处未调用clipTo函数. 我想剪辑oImg，但不调用clipTo.

Here clipTo function is not called. I want to clip oImg but clipTo is not called.

这是怎么了?

推荐答案

玩家，

这是工作代码:

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 我猜这对您不起作用，因为您的图片未处于活动状态或尚未加载到画布中，因此您尝试对其进行裁剪.

Actually, your code working fine as well. I believe only difference only with library version. I used 1.7.1 My guess it didn't work for you, because your image wasn't active or not loaded yet into canvas, and you tried to clip it.

我还使用了 fabric.util.loadImage 而不是 fabric.Image.fromURL

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

For fabric.Image.fromURL you should make an active object and then set properties. To make an active object you should do something like this:

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

这篇关于fabricjs clipTo无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！