Fabric.js: Как указать вторичный цвет рамки окна выделения, если стиль границы пунктирный - PullRequest
Новая
       34

Fabric.js: Как указать вторичный цвет рамки окна выделения, если стиль границы пунктирный

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

Я хочу указать вторичный цвет рамки в поле выбора.

Пример, почему это необходимо.Если у меня два черных прямоугольника и я выбрал один прямоугольник, некоторая часть границы выделения не будет видна над другим прямоугольником: 

var canvas = window.__canvas = new fabric.Canvas('canvas');
 
var rect = new fabric.Rect({left: 10, strokeWidth: 0, top: 10, width: 100, height: 100, fill: 'black'});
 
var rect2 = new fabric.Rect({left: 40, strokeWidth: 0, top: 60, width: 200, height: 200, fill: 'black'});
 
rect.cornerSize = 8;
rect.padding = 0; 

canvas.add(rect);
canvas.add(rect2);
canvas.setActiveObject(rect2);  

fabric.Object.prototype.set({
  borderColor: 'black',
  cornerColor: 'black',
  cornerSize: 6,
  transparentCorners: true,
  borderDashArray: [4, 4],
  rotatingPointOffset: 20,
});
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>

<canvas id="canvas" width="400" height="400"></canvas>

1 Ответ

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

Когда объект выбран, установите для его свойства stroke желаемый цвет. Этот обходной путь послужит цели.

Когда объект выбран, отменен или обновлен выбор, я просто устанавливаю свойство stroke и strokeWidth объекта. 

var canvas = window.__canvas = new fabric.Canvas('canvas');
var activeObject;
var lastActiveObject;
canvas.on('selection:created', onObjectSelection);
canvas.on('selection:cleared', onObjectClear);
canvas.on('selection:updated', onselectionUpdate);



function onObjectSelection() {

  activeObject = canvas.getActiveObject();
  lastActiveObject = activeObject;
  activeObject.set({
    stroke: 'red',
    strokeWidth: 3,
    dirty: true
  });
  canvas.requestRenderAll();

}


function onObjectClear() {


  lastActiveObject.set({
    stroke: 'black',
    strokeWidth: 0,
    dirty: true
  });
  canvas.requestRenderAll();
}

function onselectionUpdate() {

  activeObject = canvas.getActiveObject();
  activeObject.set({
    stroke: 'red',
    strokeWidth: 4,
    dirty: true
  });

  lastActiveObject.set({
    stroke: 'black',
    strokeWidth: 0,
    dirty: true
  });
  canvas.requestRenderAll();
  lastActiveObject = activeObject;

}


var rect = new fabric.Rect({
  left: 10,
  strokeWidth: 0,
  top: 10,
  width: 100,
  height: 100,
  fill: 'black'
});

var rect2 = new fabric.Rect({
  left: 40,
  strokeWidth: 0,
  top: 60,
  width: 200,
  height: 200,
  fill: 'black'
});

rect.cornerSize = 8;
rect.padding = 0;

canvas.add(rect);
canvas.add(rect2);
canvas.setActiveObject(rect2);

fabric.Object.prototype.set({
  borderColor: 'black',
  cornerColor: 'black',
  cornerSize: 6,
  transparentCorners: true,
  borderDashArray: [4, 4],
  rotatingPointOffset: 20,
});
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>

<canvas id="canvas" width="400" height="400"></canvas>
...