1

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

如果有更好的方法来实现这一点，请告诉我们

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

根据建议尝试了以下

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

//// 从图像类创建自定义图像类

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

有什么想法吗？

4

0 回答 0