colors - Fabric.js：如果边框样式为虚线，如何指定选择框辅助边框颜色

Question

我想在选择框上指定辅助边框颜色。

示例为什么需要这样做。如果我有两个黑色矩形，并选择一个矩形，则选择边框的某些部分在另一个矩形上方不可见：

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> 

标签： colorsborderselectionfabricjs

Answer 1

选择对象后，将其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>