拉斐爾Freetransform顯示/ hidehandle，對象是正面和對象可去除

Question

UPDATE

我使用拉斐爾Freetransform顯示來自用戶上傳IMGS，
搜索了很久，該怎麼辦下面的東西
1）click toggle showhandle``hidehandle？ 已解決

2）每次創建新的Freetransform對象時都添加一個新按鈕。
- 單擊按鈕對象可以刪除。

3）聖拉斐爾對象可以使用toFront，Freetransform如何做到這一點

使用聖拉斐爾Freetransform基本編碼：在畫布

var paper = Raphael($('.canvas')[0], 1000, 1000); 
var r_img = paper.image('img/path'+file_type, 100, 100, 200, 200); 
paper.freeTransform(r_img).setOpts({drag:'self', scale:true, rotate:true, draw:[ 'bbox' ], keepRatio: true}); 

用戶上傳後2張圖片時，輸出源代碼將成爲：

<image></image> 
<image></image> 
// 1st image handle 
<path></path> 
<circle></circle> 
<path></path> 
<circle></circle> 
<path></path> 
<rect></rect> // x8 
// 2nd image handle 
<path></path> 
<circle></circle> 
<path></path> 
<circle></circle> 
<path></path> 
<rect></rect> // x8 

解決問題2）
如果我創建一個div標籤是按鈕，我找不到1組（圖像和句柄）被選中。

解決問題3）
如果click，則image可以使用toFrontresoure，但手柄如何成爲前呢？

http://jsfiddle.net/Ls7FS/3/

img.onload = function(){ 
    var img_width = this.width, img_height = this.height; 
    var img_scale = img_width/200; 
    var new_height = img_height/img_scale; 
    var ft, r_img = paper.image('img/'+path, 0, 0, 200, new_height), dragged = false; 

    r_img.click(function(){ 
     // Toggle handles on click if no drag occurred 
     if(!dragged){ 
      if(ft.handles.center === null){ 
       ft.showHandles(); 
       console.log('front'); 
       r_img.toFront(); 
       //r_img.remove(); 
      }else{ 
       ft.hideHandles(); 
      } 
     } 
    }); 
    ft = paper.freeTransform(r_img, {draw:[ 'bbox' ], keepRatio: true, size: 3 }, function(ft, events){ 
     if(events.indexOf('drag start') !== -1){ 
      dragged = false; 
     } 
     if(events.indexOf('drag') !== -1){ 
      dragged = true; 
     } 
    }); 
}; 
img.src = 'img/'+path; 

Answer 1

您不能綁定鼠標按下，並在同一時間拖動事件的工作。

鼠標懸停不起作用，因爲鼠標懸停在手柄上會觸發對象上的鼠標懸停。

您可以在點擊時顯示手柄，釋放鼠標並再次點擊拖動。如果沒有使用FreeTransform的回調函數發生拖動，您可以在點擊時隱藏控點。如果這是你所追求的，我可以給你一個例子。

編輯

示例代碼（http://jsfiddle.net/nNwx8/1/）：

var 
    paper = Raphael(0, 0, 500, 500), 
    red = paper.rect(200, 200, 100, 100).attr('fill', '#f00'), 
    blue = paper.rect(260, 260, 100, 100).attr('fill', '#00f') 
    ; 

register(red); 
register(blue); 

function register(el) { 
    el.data('dragged', false); 

    el.click(function() { 
     // Toggle handles on click if no drag occurred 
     if (!this.data('dragged')) { 
      if (this.freeTransform.handles.center === null) { 
       this.toFront(); 

       this.freeTransform.showHandles(); 
      } else { 
       this.freeTransform.hideHandles(); 
      } 
     } 
    }); 

    paper.freeTransform(el, {}, function(ft, events) { 
     if (events.indexOf('drag start') !== -1) { 
      el.data('dragged', false); 
     } 

     if (events.indexOf('drag') !== -1) { 
      el.data('dragged', true); 
     } 
    }).hideHandles(); 
}