Не удалось установить единую ширину обводки на canvas.loadFromJSON?

Итак, я указал Rect как:

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
    );
  }

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
96
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Свойство strokeUniform было прокомментировано от до Object.

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

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

Вау, это сработало просто отлично, большое спасибо!

Ali Abbas 16.12.2020 13:04

Другие вопросы по теме