Question

更新

我正在使用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 resoure，但处理方法也是如此？

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

您无法绑定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(); }

Raphael Freetransform切换显示/隐藏处理，对象在前面，对象可以删除

1 个答案: