如何在图像保存期间切换 Fabric.js 对象的边框和控件？答案

【问题标题】：How to toggle borders and controls of Fabric.js objects during image save?如何在图像保存期间切换 Fabric.js 对象的边框和控件？
【发布时间】：2022-03-03 20:54:25
【问题描述】：

我想创建一个 fabric.js 画布，移动一些内容，然后将画布保存为图像。之前已经做过了（Fabric.js demo Objects Bounding Rectangles，save），但是如何在保存图像的过程中将边框和控件更新为隐藏？

我试过了，但它没有删除边框。保存后如何恢复？

canvas.forEachObject(function (obj) {
    obj.hasBorders = false;
    obj.hasControls = false;
});
canvas.discardActiveObject();
canvas.renderAll();

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

我发现边框是由demo手动创建的，所以我只需要删除那部分：

canvas.on('after:render', function () {
    canvas.contextContainer.strokeStyle = '#555';

    canvas.forEachObject(function (obj) {
        var bound = obj.getBoundingRect();

        canvas.contextContainer.strokeRect(
            bound.left + 0.5,
            bound.top + 0.5,
            bound.width,
            bound.height
        );
    })
});

【讨论】：