jquery - Raphael Freetransform 切换显示/隐藏句柄，对象位于前面，并且对象可以删除

Question

更新

我正在使用 Raphael Freetransform 来显示用户上传的图像，
找了好久，下面的事情怎么办
1) 点击切换showhandle``hidehandle？ 已解决

2) 每次创建新的 Freetransform 对象时添加一个新按钮。
- 点击按钮可以删除对象。

3) Raphael对象可以使用toFront，Freetransform怎么做

使用 Raphael 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});

用户在canvas中上传2个img后，输出源代码将是:

<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)
如果点击，图像可以使用toFrontresoure ，但是 handle 怎么也在前面呢？

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

不能同时绑定(bind) mousedown 和拖动事件。

鼠标悬停也不起作用，因为将鼠标悬停在 handle 上会触发对象上的鼠标悬停。

您可以在单击时显示 handle ，释放鼠标并再次单击以拖动。如果没有发生拖动，您可以使用 FreeTransform 的回调函数隐藏单击 handle 。如果这就是您想要的，我可以给您举个例子。

编辑

示例代码(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();
}