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 にあるアイテムのみを移動します)。

今のところ私の問題は最初の 2 つの問題です。

これを行う方法はありますか？

前もって感謝します！

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();

ここで、ドラッグ イベントを追加します -- マウスオーバー イベントに似ていますが、3 つの機能があり (ドキュメントを参照)、ボックスを描画して選択スペースを追跡します。

//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(); 
});

このように、マウスのドラッグによって選択されたすべてのオブジェクトを含む新しいセット (選択) ができました。次に、元のマウスオーバー イベントをそのセットに適用できます。

選択ボックスでバウンディング ボックスの角に切り込みを入れると、円の領域と重なっていなくても、円オブジェクトが選択されることに注意してください。これが問題になる場合は、円の特別なケースを作成できます。

jsフィドル

于 2013-02-11T22:26:03.190 に答える