4

更新

我正在使用 Raphael Freetransform 显示来自用户上传的 imgs，
搜索了很长时间，如何在下面的事情
1)click切换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});

用户在画布中上传 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)
如果click，image可以使用toFront 资源，但是手柄怎么在前面呢？

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;
4

1 回答 1

2

您不能同时绑定 mousedown 和拖动事件。

鼠标悬停也不起作用，因为鼠标悬停在手柄上会触发对象上的鼠标移出。

您可以在单击时显示手柄，释放鼠标并再次单击以拖动。然后，如果没有使用 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();
}
于 2013-03-25T22:59:42.993 回答