0

Preciso adicionar dados a um objeto no FabricJS e buscar eles novamente na hora de exportar o canvas.

Função que eu uso para adicionar um objeto:

function _addImageObject(imageURL) {
  fabric.util.loadImage(imageURL, function (imageLoaded) {

    var image = new fabric.Image(imageLoaded);

    image.set({
      borderColor: 'black',
      cornerColor: 'black',
      cornerStrokeColor: 'white',
      cornerSize: 11,
      transparentCorners: false,
    });

    canvas.add(image);
    canvas.centerObject(image);
    canvas.setActiveObject(image);
    canvas.renderAll();
  });
}

Função usada para buscar os objetos:

 function _canvasJSON() {
      try {
        let canvasCopy = _copyCanvas(canvas);

        let canvasJSON = {
          canvasImage: JSON.stringify(canvasCopy),
          svg: canvas.toSVG()
        };
        return canvasJSON;
      } catch (e) {
        canvas.renderAll();
      }
    }

function _copyCanvas() {
     let canvasString = JSON.stringify(canvas);
     return JSON.parse(canvasString);
}

Queria adicionar um objeto dentro dessa image, exemplo:

image.set('key', { values: 123});

E conseguir buscar ele no retorno do _canvasJSON();

1 Resposta 1

1


Para adicionar uma nova informação, é preciso criar um objeto, utilizar obj.set() e renderizar o canvas. Exemplo:

var obj = canvas.getActiveObject(); obj.set('foo','bar'); canvas.renderAll();

Feito isso, a nova informação já estará dentro do seu objeto, porém ela ainda não está disponível no JSON.

Para isso, basta especificar no JSON.stringify.Exemplo:

var json = JSON.stringify(canvas.toJSON(['foo']));


Para buscar a informação inserida, basta busca-la dentro de um objeto. Exemplo: var obj = canvas.getActiveObject(); console.log(obj.foo);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .