bringForward в ткани JS

Question

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

Я хочу, чтобы выбрать объект прямоугольника при нажатии на Кубок изображения.

Пожалуйста, проверьте ниже ссылку. Я хочу сделать что-то подобное. 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 link

Answer 2

Это довольно просто, просто добавить обработчик события к объекту изображения после того, как вы добавили его на холст:

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

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

Если вы также хотите переместить его на передний план, то:

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

Я предлагаю вам ознакомиться с документацией по системе событий ткани в tutorial