Question

我有一个自定义图像类，如下所示。我想要做的是在应用某个逻辑之后，我想在图像的边界框上显示彩色边框。由于设置边框使图像可选，我想知道是否有办法以某种方式覆盖矩形并使其透明并只是切换其边框颜色。如何使用自定义图像类完成。

如果有更好的方法可以实现此目的，请告知我们

fabric.CustomImage = fabric.util.createClass(fabric.Image, {
    type: 'named-image',
    initialize: function (element, options) {
        this.callSuper('initialize', element, options);
        options && this.set('name', options.name);
        options && this.set('rot', options.rot);
        options && this.set('rawURL', options.rawURL);
        options && this.set('belongsto', options.belongsto);
    },
    toObject: function () {
        return fabric.util.object.extend(this.callSuper('toObject'),
                                         { name: this.name, rot: this.rot });
    }
});

根据以下建议尝试

/////////////////////////////////////////////////////////////

////从Image类

创建Custom Image类

fabric.CustomImage = fabric.util.createClass(fabric.Image, {
    type: 'named-image',
    initialize: function (element, options) {
        this.callSuper('initialize', element, options);
        options && this.set('name', options.name);
        options && this.set('rot', options.rot);
        options && this.set('rawURL', options.rawURL);
        options && this.set('belongsto', options.belongsto);
        options && this.set('myrect', true);
    },
    toObject: function () {
        return fabric.util.object.extend(this.callSuper('toObject'),
                                         {
                                             name: this.name,
                                             rot: this.rot,
                                             myrect : ''
                                         });
    },
    _render: function (ctx) {
        this.callSuper('_render', ctx);
        var r = new fabric.Rect();
        r.left = this.left;
        r.top = this.top;
        r.height = this.height;
        r.width = this.width;
        r.borderColor = 'red';
        r.strokeWidth = 2;
        ctx.myrect = (r);
      //  ctx.add(r);
    }
});

仍然没有工作，有什么想法吗？

好的，所以我正在尝试以下代码，但仍无法看到图像周围的边框

    var currentObj = ChrImages.d[j];

    //closure, create a scope for specific variables
    (function (obj) {
        fabric.util.loadImage(obj.URL, function (img) {
            var customImage = new fabric.CustomImage(img, {
                name: obj.Name,
                rot: obj.Rotation,
                rawURL: obj.RawURL,
                belongsto: obj.BelongsTo,
                left: obj.PosX,
                top: obj.PosY,
                angle: obj.Rotation,
                perPixelTargetFind: true,

            });

            customImage.stroke = true;
            customImage.strokeWidth = 2;
            customImage.lockScalingX = true;
            customImage.lockScalingY = true;
            customImage.filters.push(new fabric.Image.filters.RemoveWhite());
            canvas.add(customImage);
            groupWorkingImages.add(customImage);
        });

    })(currentObj);

有什么想法吗？

在Fabric.js图像上叠加矩形

0 个答案: