Как установить цвет заливки для выделения в fabricjs? - PullRequest
Новая
       13

Как установить цвет заливки для выделения в fabricjs?

2 голосов
/ 14 мая 2019

Я бы хотел выбрать группу объектов на холсте fabricjs (2.7.0) и показать выделение как заполненное с низкой непрозрачностью.

Текущее : enter image description here

Желаемая : enter image description here

Я пробовал это: 

fabric.Group.prototype.selectionBackgroundColor = '#2dcfab';
fabric.Group.prototype.backgroundColor = '#2dcfab';

Но не повезло. вот это jsfiddle . Любая помощь будет оценена!

1 Ответ

0 голосов
/ 14 мая 2019

Вы устанавливаете selectionBackgroundColor в строку rgba, чтобы придать цвету значение непрозрачности.

Пример: 

fabric.Group.prototype.selectionBackgroundColor = 'rgba(45,207,171,0.25)';


var canvas = new fabric.Canvas("canvas");
fabric.Group.prototype.selectionBackgroundColor = 'rgba(45,207,171,0.25)';

canvas.add(new fabric.Rect({
  width: 50,
  height: 50,
  left: 50,
  top: 100,
  fill: 'green'
}));

canvas.add(new fabric.Rect({
  width: 60,
  height: 60,
  left: 250,
  top: 100,
  fill: 'red'
}));

canvas.on('object:selected', function (e) {
  e.target.transparentCorners = false;
  e.target.borderColor = '#cccccc';
  e.target.cornerColor = '#0CB7F0';
  e.target.minScaleLimit = 2;
  e.target.cornerStrokeColor = '#0CB7F0';
  e.target.cornerStyle = 'circle';
  e.target.minScaleLimit = 0;
  e.target.lockScalingFlip = true;
  e.target.padding = 5;
  e.target.selectionDashArray = [10, 5];
  e.target.borderDashArray = [10, 5];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.0/fabric.min.js"></script>
<canvas id="canvas" height="400" width="400"></canvas>
...