Блог

Итак, я указал прямоугольник, как:

 addRect() {
    let square = new fabric.Rect({
      width: 20,
      height: 30,
      stroke:"yellow",
      strokeWidth:10,
      left: 50,
      top: 50,
      strokeUniform:true,
      fill:"rgba(0,0,0,0.2)",
      flipX:true
    });
    this.canvas.add(square);
  }

 

На холсте я получаю что-то вроде этого:

Я временно сохраняю данные холста:

 saveData() {
    let jsonData = JSON.stringify(this.canvas);
    localStorage.setItem('data', jsonData);
    this.dataPreview.nativeElement.value = jsonData;
  }

 

И затем я загружаю эти данные обратно на холст:

 loadData() {
    let jsonData = localStorage.getItem('data');
    this.canvas.loadFromJSON(
      jsonData,
      () => {
        this.canvas.requestRenderAll();
        this.dataPreview.nativeElement.value = jsonData;
      },
      this.onDataLoadFailed
    );
  }
 

Я получаю что-то вроде этого на canvas:

Как я должен это исправить? Я думаю, что проблема может быть в том, что данные JSON не имеют никакого значения для strokeUniform .

Свойство strokeUniform прокомментировано из ToObject.

Обходным путем является включение свойства в качестве аргумента метода toJSON

 console.log(JSON.stringify(canvas.toJSON("strokeUniform")));