Question

如何在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（）

中

Answer 1

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

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

或在运行时添加：

obj.id = 'myid';

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

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

或

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

加载回来将是自动的。

Answer 2

对象上没有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();

Answer 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。

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

3 个答案: