8

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

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

现在，我发现了类似的东西（有人从我的上一个问题中发布了它）：

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 集中即可。

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

  1. 进行矩形选择
  2. 将矩形中的节点添加到 Raphael 集中
  3. 仅移动选定的项目（即仅移动带有 set.mousemove 的 Raphael 集中的项目）

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

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

先感谢您！

4

1 回答 1

14

有趣的问题。您可以通过在所有其他对象后面放置一个与画布大小相同的矩形“垫子”，并在其上附加一个拖动事件以选择其他元素。（请注意，此解决方案使用较新版本的 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();

现在，我们添加一个拖动事件——类似于鼠标悬停事件，但具有三个功能（参见文档），并绘制一个框来跟踪选择空间：

//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

于 2013-02-11T22:26:03.190 回答