Fabric.js Сбрасывается отступ объектов в группе

Версия

4.2.0

Прецедент

https://jsfiddle.net/dellvolk/c8zas7th/12/

let optObj = {
    width: 300,
    height: 300,
    backgroundColor: "rgba(255,255,0,0.5)",
  }
let canvas = new fabric.Canvas('c', optObj);

const stroke = {
  stroke: 'red',
  strokeWidth: 10,
}

const rect1 = new fabric.Rect({
    left: 30,
  top: 30, 
  ...stroke,
  width: 100,
  height: 100,
  fill: 'blue',
  padding: -stroke.strokeWidth,
  borderColor: '#000',
})

const rect2 = new fabric.Rect({
    left: 130,
  top: 130, 
  ...stroke,
  width: 100,
  height: 100,
  fill: 'green',
  padding: -stroke.strokeWidth,
  borderColor: '#000',
})

fabric.Object.prototype.padding = -10;

canvas.add(rect1);
canvas.add(rect2);

Ожидаемое поведение

Мне это нужно, когда объекты образуют группу, отступы остались. Мне не нужно устанавливать отступ для группы. Только для элементов в этой группе. Чтобы обводка группы оставалась такой, как есть, а черная обводка элементов группы была подобна отступу самих элементов.

Фактическое поведение

Отступ в объектах равен -10, но когда они образуют группу, отступ меняется на 0

Fabric.js Сбрасывается отступ объектов в группе

javascript canvas fabricjs

06.04.2021 15:19

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

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

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

Ответы 1

Метод, который обрабатывает расчет размера границы для объектов в группе, - это drawBordersInGroup (см. http://fabricjs.com/docs/fabric.Object.html#drawBordersInGroup).

Следующее должно работать как прямая замена для этого метода, чтобы учесть отступы при вычислении размера:

https://jsfiddle.net/melchiar/bw384o2n/

//drop in replacement for drawBordersInGroup method
fabric.Object.prototype.drawBordersInGroup = function(ctx, options, styleOverride) {
  styleOverride = styleOverride || {};
  var bbox = fabric.util.sizeAfterTransform(this.width, this.height, options),
    strokeWidth = this.strokeWidth,
    strokeUniform = this.strokeUniform,
    //borderScaleFactor = this.borderScaleFactor,
    //adds object padding to border scale calculation
    borderScaleFactor = this.borderScaleFactor + this.padding * 2,
    width =
    bbox.x + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleX) + borderScaleFactor,
    height =
    bbox.y + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleY) + borderScaleFactor;
  ctx.save();
  this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray, null);
  ctx.strokeStyle = styleOverride.borderColor || this.borderColor;
  ctx.strokeRect(
    -width / 2,
    -height / 2,
    width,
    height
  );
  ctx.restore();
  return this;
};

07.04.2021 02:35