如何在fabricjs中获取对象标识符？答案

【问题标题】：How to get an object identifier in fabricjs?如何在fabricjs中获取对象标识符？
【发布时间】：2023-03-18 13:40:01
【问题描述】：

如何在fabricjs中获取对象标识符？例如

var text = new fabric.IText('hello world', { left: mouse1X, top: mouse1Y });

ID = text.get???

这个标识符应该出现在

JSON.stringify(canvas) 
canvas.loadFromJSON()

标识符应该存在于 JSON.stringify(canvas) canvas.loadFromJSON()

【问题讨论】：

请使用上方的编辑标签编辑您的问题。

标签： fabricjs

【解决方案1】：

对象上没有 id 属性，但您可以创建自己的。像这样：

var msg = 'hello world';
var myId = 1;

var text = new fabric.IText(msg, 
{ 
    left: mouse1X, 
    top: mouse1Y,
    id: myId } //my custom property
);

canvas.add(text);

//get id value
console.log(text.get('id'));
//OR
console.log(text.id));

//change id value
text.set('id',5);
//OR
text.id = 5;
canvas.renderAll();

【讨论】：

您的示例中的 id 不会保存在 JSON 中
我担心你的问题是如何在fabricjs对象上拥有一个id，而不是你如何将它保存在json上。我回答了，这是正确的解决方案。但是如果您需要将属性保存在 json 上，请在此处查看我的答案：stackoverflow.com/questions/30052223/… 如果我的回答对您有帮助，请勾选。

【解决方案2】：

创建对象时，将id 属性传递给选项：

var obj = fabric.Object({id: 'myid'});

或在运行时添加：

obj.id = 'myid';

保存到 JSON 时，使用 propertiesToInclude 参数指定您要保存它：

obj.toJSON(['myid', 'others...']);

或

canvas.toJSON(['myid', 'others...']);

加载将是自动的。

【讨论】：

【解决方案3】：

在创建这样的任何对象时添加一个 id：

// functions that generates an id
function generateId(type) {
    return `${type}-${Math.random().toString(36).substr(2, 9)}`;
}

const rectangle = new fabric.Rect({
    id: generateId('rect'),
    left: 150,
    top: 45,
});

因此，您可以通过将 reviver 回调传递给 loadFromJSON 来重置 ID。

// function to be passed as reviver callback
function resetObjectsIds(o, object) {
    object.set({ id: generateId(object.get('type')) });
}

// when loading json...
canvas.loadFromJSON(
    canvasJson,
    canvas.renderAll.bind(canvas),
    resetObjectsIds, // here is the reviver callback function
);

现在，每次保存或加载画布时，它都会有 id。

【讨论】：

i 不适用于打字稿，因为该 id 属性不是界面的一部分