需要为fabricJS对象添加参考轴

-1

使用fabricJS创建编辑工具我想要添加参考轴以帮助用户在对象旋转时对齐对象。我需要这样的东西是什么在图像 - > 需要为fabricJS对象添加参考轴

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

*我不知道为什么人们downvote没有打扰，甚至给一个可能的解决方案。我有这个问题并不需要一个片段，也不需要其他解决方案！

来源

2017-09-01 Nilanjan Roy

每个问题都值得帮助谁愿意回答的一个片段。除非你的答案已准备好（不太可能），无论如何谁还想回答，那么片段就是一个起点。 – AndreaBogazzi

Downvoted也被困扰回答。从谁的问题和谁的答案应该没有太大的差别。我必须准备一个完整的片段，而我本可以修改你的。 – AndreaBogazzi

这就是你如何修改一个默认的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>

来源

2017-09-02 05:06:00 AndreaBogazzi

需要为fabricJS对象添加参考轴

回答

相关问题