需要为fabricJS对象添加参考轴

Question

使用fabricJS创建编辑工具..我想添加一个参考轴，以帮助用户在对象旋转时对齐对象。我需要类似图片中的内容 - ＆gt;

基本上我想知道如何修改选择以添加那些轴

*我不知道为什么人们在没有打算甚至提供可能的解决方案的情况下进行投票。我的问题并不需要解决方案，其他地方也无法提供解决方案！

Answer 1

这是你可以修改默认的fabricjs函数来保存原始行为并在其上添加一些东西。

var img02URL = 'http://fabricjs.com/lib/pug.jpg';
var originalDrawBorders = fabric.Object.prototype.drawBorders;

fabric.Object.prototype.drawBorders = function(ctx, styleOverride) {
originalDrawBorders.call(this, ctx, styleOverride);
      var wh = this._calculateCurrentDimensions(),
          strokeWidth = 1 / this.borderScaleFactor,
          width = wh.x + strokeWidth + 40,
          height = wh.y + strokeWidth + 40;
      ctx.strokeStyle = 'red';
      ctx.beginPath();
      ctx.moveTo(-width / 2, 0);
      ctx.lineTo(width/ 2, 0);
      ctx.moveTo(0, -height/2);
      ctx.lineTo(0, height/2);
      ctx.stroke();
}

var canvas = new fabric.Canvas('c');
canvas.setZoom(0.5)

fabric.Image.fromURL(img02URL, function(oImg) {
    oImg.scale(.40);
    oImg.left = 180;
    oImg.top = 0;
    canvas.add(oImg);
    canvas.renderAll();
});

#c {
    border:1px solid #ccc;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>