需要爲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對象添加參考軸

回答

相關問題