Question

我碰到了以下问题，希望有人知道如何帮助我：

我使用JavaScript库Raphael。现在，我想做的是，当我有许多Raphael SVG元素时，只需选择更多带有“矩形选择”的元素，即从图形背景开始拖动鼠标来创建一个选择矩形（我希望我足够清楚）），并移动此矩形中的元素。

目前，我发现了类似的内容（有人是从previous question of mine发布的）：

var paper = Raphael(0, 0, '100%', '100%');

var circle = paper.circle(75, 75, 50);
var rect = paper.rect(150, 150, 50, 50);

var set = paper.set();

set.push(circle, rect);
set.attr({
    fill: 'red',
    stroke: 0
});

var ox = 0;
var oy = 0;
var dragging = false;

set.mousedown(function(event) {
    ox = event.screenX;
    oy = event.screenY;
    set.attr({
        opacity: .5
    });
    dragging = true;
});

set.mousemove(function(event) {
    if (dragging) {
        set.translate(event.screenX - ox, event.screenY - oy);
        ox = event.screenX;
        oy = event.screenY;
    }
});

set.mouseup(function(event) {
    dragging = false;
    set.attr({
        opacity: 1
    });
});

此代码可以在jsfiddle上执行。但是，正如您所看到的，只需将它们添加到Raphael集中即可选择所有元素。

现在，我认为我的问题将通过以下方式解决：

进行矩形选择
将矩形中的节点添加到Raphael集
仅移动所选项目（即仅移动使用set.mousemove设置的Raphael项目）

我现在的问题是前两个问题。

任何想法如何做到这一点？

提前谢谢！

Answer 1

有趣的问题。你可以通过放置一个矩形的垫子来做到这一点。所有其他对象后面的画布大小，并将拖动事件附加到其上以选择其他元素。（注意此解决方案使用较新版本的Raphael，2.1.0：

var paper = Raphael(0, 0, '100%', '100%');

//make an object in the background on which to attach drag events
var mat = paper.rect(0, 0, paper.width, paper.height).attr("fill", "#FFF");

var circle = paper.circle(75, 75, 50);
var rect = paper.rect(150, 150, 50, 50);
var set = paper.set();

set.push(circle, rect);
set.attr({
    fill: 'red',
    stroke: 0
});
//the box we're going to draw to track the selection
var box;
//set that will receive the selected items
var selections = paper.set();

现在，我们添加一个拖动事件 - 类似于鼠标悬停事件但有三个函数（see documentation），并绘制一个框来跟踪选择空间：

//DRAG FUNCTIONS
//when mouse goes down over background, start drawing selection box
function dragstart (x, y, event) {
    box = paper.rect(x, y, 0, 0).attr("stroke", "#9999FF");    
}

// When mouse moves during drag, adjust box.
// If the drag is to the left or above original point,
// you have to translate the whole box and invert the dx 
// or dy values since .rect() doesn't take negative width or height
function dragmove (dx, dy, x, y, event) {
    var xoffset = 0,
        yoffset = 0;
    if (dx < 0) {
        xoffset = dx;
        dx = -1 * dx;
    }
    if (dy < 0) {
        yoffset = dy;
        dy = -1 * dy;
    }
    box.transform("T" + xoffset + "," + yoffset);
    box.attr("width", dx);    
    box.attr("height", dy);    
}

function dragend (event) {
    //get the bounds of the selections
    var bounds = box.getBBox();
    box.remove();
    reset();
    console.log(bounds);
    for (var c in set.items) {
        // Here, we want to get the x,y vales of each object
        // regardless of what sort of shape it is.
        // But rect uses rx and ry, circle uses cx and cy, etc
        // So we'll see if the bounding boxes intercept instead

        var mybounds = set[c].getBBox();
        //do bounding boxes overlap?
        //is one of this object's x extremes between the selection's xe xtremes?
        if (mybounds.x >= bounds.x && mybounds.x <= bounds.x2 || mybounds.x2 >= bounds.x && mybounds.x2 <= bounds.x2) {
            //same for y
            if (mybounds.y >= bounds.y && mybounds.y <= bounds.y2 || mybounds.y2 >= bounds.y && mybounds.y2 <= bounds.y2) {
                selections.push(set[c]);       
            }
        }
        selections.attr("opacity", 0.5);
    }
}

function reset () {
    //empty selections and reset opacity;
    selections = paper.set();
    set.attr("opacity", 1);    
}

mat.drag(dragmove, dragstart, dragend);
mat.click(function(e) {
   reset(); 
});

就像那样，你有一个新的集合（选择），包含鼠标拖动选择的每个对象。然后，您可以将鼠标悬停事件从原始事件应用到该集。

请注意，如果您使用选择框在其边界框的角上划线，即使它与圆的区域不重叠，也会选择圆形对象。如果这是一个问题，你可以为圆圈做一个特例。

jsFiddle

SVG元素的矩形选择（适用于Raphael）

1 个答案: