Нарисовать прямоугольник с помощью aCoords tl, заломить углы вместо верха, оставить в fabric.js?

Поэтому я хотел рисовать прямоугольники на холсте на основе координат, полученных из внешней системы, которая использует координаты (x1,y1) (вверху слева) и (x2,y2) (внизу справа) для рисования прямоугольника, тогда как в Fabric.js это немного по-другому, например, используя свойства top и left, я попытался сделать это с помощью aCoords и написал этот код:


  addRect() {
    let square = new fabric.Rect({
      stroke: 'yellow',
      noScaleCache: false,
      strokeWidth: 10,
      strokeUniform: true,
      fill: 'rgba(0,0,0,0.2)',
      flipX: true,
    });
    console.info(square.getCoords());

    square.set("aCoords", { tl: new fabric.Point(100, 2), br: new fabric.Point(1, 2), tr: new fabric.Point(1, 2), bl: new fabric.Point(1, 2) });

  
    this.canvas.add(square);
  }

Кажется, это не работает, что я упускаю?

javascript canvas html5-canvas fabricjs

21.12.2020 09:54

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Раскрытие чувствительных данных

Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Зод: сила проверки и преобразования данных

Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Руководство ChatGPT по продаже мини JS-файлов

JS-файл - это файл, содержащий код JavaScript. JavaScript - это язык программирования, который в основном используется для добавления интерактивности...

884

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Хотя, прочитав справку по API на Fabricjs.com, я не уверен, но после небольшого изучения кода я почти уверен, что aCoords просто служит геттером. Таким образом, вы не можете изменить внешний вид фигуры, используя это свойство.

Вместо этого вы обновляете свойства top, left, width и height по отдельности.

Вот пример:

(function() {
  var canvas = this.__canvas = new fabric.Canvas('c');
  fabric.Object.prototype.transparentCorners = false;
  let square = new fabric.Rect({
    stroke: 'yellow',
    noScaleCache: false,
    strokeWidth: 10,
    strokeUniform: true,
    fill: 'rgba(0,0,0,0.2)',
    flipX: true,
  });

  canvas.add(square);

  let x1 = 5;
  let y1 = 25;
  let x2 = 105;
  let y2 = 55;

  square.set("top", y1);
  square.set("left", x1);
  square.set("width", (x2 - x1));
  square.set("height", (y2 - y1));

})();

<script src = "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js "></script>
<canvas id = "c"></canvas>

Спасибо, я только что понял, что этот метод тоже будет работать!

— 24.12.2020 09:28

Нет проблем, Али, рад, что смог помочь! " = "

— 27.12.2020 14:11

21.12.2020 16:25

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

Как сделать подвижные точки пертикулера на изображении с позицией x y в Android?

Моделирование одновременно движущихся тел на холсте

Разрешить пользователям рисовать прямоугольники с помощью мыши на холсте с помощью Javascript

Ручная вставка в фрейм устанавливает полосу прокрутки, чтобы она не работала tkinter

Нежелательный контур растрового изображения textview

Блокирует ли canvas context2d.drawImage( webglCanvas, 0, 0 ) до тех пор, пока webgl не завершит рендеринг?

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

Как очистить свойства и события холста и добавить их обратно в Fabricjs?

Можно ли удалить объект холста, созданный с помощью функции в Python?

Есть ли более быстрый способ расчета частоты цвета в браузере?

Нарисовать прямоугольник с помощью aCoords tl, заломить углы вместо верха, оставить в fabric.js?

Ответы 1

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

Похожие вопросы