可以覆盖 fabricjs 中的边界框选择区域 - 控制选项

Question

在这里，我们正在 fabric.js 中创建设计 tool.We 已为 fabric.js 中的 canvas 对象创建自定义选择区域。我阅读了 fabric.js 中的源代码，它为边界框生成方框，但我想更改我的自定义。选择区域外观。有人可以告诉我吗？

我们想要自定义选择区域的外观。

我们已经尝试使用此代码 context.setLineDash() 选择区域。

if (fabric.StaticCanvas.supports('setLineDash') === true) {
    ctx.setLineDash([4, 4]);
}

请参考 Github 中的代码。但我的工作区域无法正常工作。

这里附上了Borderdasharray属性在fabric函数中的创建

fabric.Object.prototype.set({  
        borderColor: 'green',  
        cornerColor: 'purple',  
        cornerSize: 33,
        transparentCorners: false,padding:4,
        borderDashArray:[50,25]          
    });

但我们需要为 fabric.js 中的选择区域创建动画跳舞 dots/moving 点。

我们如何在 fabric.js 中创建自定义选择区域？

Answer 1

定制：

  borderDashArray: Dash stroke of borders
  cornerDashArray: Dash stroke of corners
  cornerStrokeColor: If corners are filled, this property controls the color of the stroke
  cornerStyle: standrd 'rect' or 'circle'
  selectionBackgroundColor: add an opaque or transparent layer to the selected object.

使用这个：

fabric.Object.prototype.set({
    transparentCorners: false,
    borderDashArray: ......

Answer 2

对于动画 "borderDashArray"

文档：https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D/lineDashOffset

演示：https://jsfiddle.net/bp4u8tsr/

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var offset = 0;

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10,10, 100, 100);
}

function march() {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();

在 fabricjs 中：object_interactivity.mixin.js 并像这个演示一样修改 drawBorders 函数

更新：

fabric.Object.prototype.set({  
        borderColor: 'green',  
        cornerColor: 'purple',  
        cornerSize: 33,
        transparentCorners: false,padding:14,
        borderDashArray:[50,25]          
    });
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c',{width: 500, height: 500});
textbox = new fabric.Textbox('Hello, World!', {
  width: 200,
  height: 200,
  top: 80,
  left: 80,
  fontSize: 50,
  textAlign: 'center',
});
canvas.add(textbox);
textbox2 = new fabric.Textbox('Hello, World!', {
  width: 200,
  height: 200,
  top: 160,
  left: 160,
  fontSize: 50,
  textAlign: 'center',
});
canvas.add(textbox2);
canvas.renderAll();
canvas.setActiveObject(textbox);
var offset = 0;

  (function animate() {
    offset++;
    if (offset > 75) {
      offset = 0;
    }  
    canvas.contextContainer.lineDashOffset = -offset;
    canvas.renderAll();
    fabric.util.requestAnimFrame(animate);
  })();

  canvas.on('after:render', function() {
    canvas.contextContainer.strokeStyle = 'green';
        canvas.contextContainer.setLineDash([50,25]);
    canvas.forEachObject(function(obj) {
      var bound = obj.getBoundingRect();            
      canvas.contextContainer.strokeRect(
        bound.left + 0.5,
        bound.top + 0.5,
        bound.width,
        bound.height
      );
    })
  });

演示：https://jsfiddle.net/Da7SP/398/

可以覆盖 fabricjs 中的边界框选择区域 - 控制选项

Possible to override bounding box selection area in fabricjs - controls option

javascript

canvas

custom-controls

html5-canvas

fabricjs