帶去面料js

Question

https://jsfiddle.net/techticchetan/p638quv8/3/

我想選擇rect對象時點擊杯圖像。

請檢查以下鏈接。我想要做這樣的事情。 http://preview.codecanyon.net/item/fancy-product-designer-woocommercewordpress/full_screen_preview/6318393?_ga=1.254133448.1940140524.1450868289

感謝，

var canvas = new fabric.Canvas('cv' ) ; 
 
var rect; 
 
    
 
fabric.Image.fromURL('http://tmgraphics.biz/test/HTML5_CANVAS%20_TESTING/test-7-21-15/test33/77000_Lime.png', function(img) { 
 
var hRatio = canvas.width/img.width ; 
 
    var vRatio = canvas.height/img.height ; 
 
    var ratio = Math.min (hRatio, vRatio); 
 
    var centerShift_x = (canvas.width - img.width*ratio)/2; 
 
    var centerShift_y = (canvas.height - img.height*ratio)/2; 
 
    
 
widdy = img.width*ratio; 
 
hiddy = img.height*ratio; 
 
    
 
img.set({ 
 
lockMovementX: true, 
 
    lockMovementY: true, 
 
    hasControls: false, 
 
    left: centerShift_x, 
 
    top: centerShift_y, 
 
    width: widdy, 
 
    height: hiddy, 
 
    selectable:false 
 
    }); 
 
    canvas.add(img) ; 
 
    if (rect) img.bringToFront(); 
 
     
 
    }); 
 
    rect = new fabric.Rect({ 
 
      top : 5, 
 
      left : 170, 
 
      width : 200, 
 
      height : 300, 
 
      stroke: 'blue', strokeWidth: 2, 
 
      fill : '' 
 
     }); 
 
canvas.add(rect); 
 
canvas.bringToFront(img)

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<canvas id="cv" width="400" height="400" style="border:1px solid black;"></canvas>

Answer 1

我已經得到答案了面料事件系統上的文檔。請檢查此https://github.com/kangax/fabric.js/issues/3506鏈接

Answer 2

這是相當簡單的，只需添加一個事件處理的圖像對象您已經將其添加到畫布後：

... 
canvas.add(img) ; 
if (rect) img.bringToFront(); 

// Add event handler 
img.on('mouseup', function() { 
    canvas.setActiveObject(rect); 
}); 

如果您還想將其移動到前面，則：

rect.bringToFront(); 
canvas.renderAll(); 

我建議你閱讀在tutorial