Dojo gfx：onmousemove連接到破壞形狀的onmouseup嗎？

Question

我正在嘗試使用Canvas作為渲染器在Dojo的gfx中實現橡皮筋選擇框。 我的意圖是在單擊鼠標並拖動時繪制選擇框，然后在釋放鼠標后消失。 不幸的是，我遇到了一個問題。

jsFiddle示例： http : //jsfiddle.net/7F9fy/

主要問題在於onmousemove中的某個地方（或與其相關的地方）：

whiteRect.connect("onmousemove",function(e) {
    if(isMouseDown) {
        if(whiteRect.groupSelector_) {
            pStat.innerHTML = "dragging...";
            console.debug("dragging...");
            e.stopImmediatePropagation();
            e.preventDefault();
            var ex = (e.x ? e.x : e.clientX);
            var ey = (e.y ? e.y : e.clientY);                   

            if(groupSelector) {
                // Also tried getShape, editing that shape, and setShape on groupSelector--same
                // behavior, though.                    
                var rectX = (ex - cnvDiv.offsetLeft < whiteRect.groupSelector_.x ? ex - cnvDiv.offsetLeft : whiteRect.groupSelector_.x);
                var rectY = (ey - cnvDiv.offsetTop < whiteRect.groupSelector_.y ? ey - cnvDiv.offsetTop : whiteRect.groupSelector_.y);

                surface.remove(groupSelector);
                groupSelector = surface.createRect({
                    x: rectX,
                    y: rectY, 
                    width: Math.abs(ex - cnvDiv.offsetLeft - whiteRect.groupSelector_.x), 
                    height: Math.abs(ey - cnvDiv.offsetTop - whiteRect.groupSelector_.y)
                }).setStroke({color: "blue", width: 3});

            } else {
                groupSelector = surface.createRect({
                    x: whiteRect.groupSelector_.x,
                    y: whiteRect.groupSelector_.y,
                    width: Math.abs(ex - cnvDiv.offsetLeft - whiteRect.groupSelector_.x), 
                    height: Math.abs(ey - cnvDiv.offsetTop - whiteRect.groupSelector_.y)
                }).setStroke({color: "blue", width: 3});
            }
            e.stopPropagation();
        }
    }
});

如果我在鼠標事件所連接的形狀/組（在上面的示例中為白色正方形）上按住鼠標左鍵並開始拖動，則在拖動動作之后，該框開始繪制。 當我釋放鼠標時，有時該框消失，有時卻不消失。 如果沒有，則該框將繼續繪制，並按照定義的鼠標移動進行拖動。

在jsFiddle中，如果您觀看console.debug或畫布下的段落報告器，您會發現有時釋放鼠標時onmouseup不會觸發（我也檢查過mouseup，但是存在相同的問題）。 在onmouseup永不觸發的情況下，onmousemove繼續觸發。 如果再次單擊，有時會觸發完整的鼠標單擊系列（向下，向上，單擊和移動），然后使繪制的矩形消失。 有時候，這不會發生，並且onmousemove會繼續觸發。 如果在拖動/ onmousemove被“卡住”后單擊，並且什么都沒有發生，則這些事件沒有調試行或對報告程序的更改，因此，好像所有鼠標事件（除了onmousemove一樣）都被抑制。 我嘗試添加stopPropagation，stopImmediatePropagation和preventDefault，但這沒有幫助。 我也嘗試使用Dojo事件的stop，但是並沒有改變行為。

為了在onmousemove中重新繪制該框，我嘗試了“ getShape->編輯屬性-> setShape”以及刪除形狀並制作一個新形狀。 這些方法都不能解決問題，並且它們之間沒有任何明顯的區別。

我使用的是Dojo 1.8.3，這種情況發生在Chrome（v25）和Firefox（v19）中，使用Canvas或SVG作為渲染器。

有什么想法嗎？ 我在這里錯過明顯的東西嗎？

Answer 1

整理出來。 問題是onmouseup事件，當您決定停止拖出形狀時，可能會在基礎/附加形狀或要拖動的形狀上觸發。 它是隨機的，具體取決於光標的位置，但是如果拖動沒有偏移或延遲，則偏向於繪制形狀。 （dojox / gfx中的Moveable.js和Mover.js為我指明了正確的方向。）

在嘗試使其工作的過程中，我將盒子更改為一條路徑，這看起來效果更好，但這不是必需的。

關鍵是要創建一個通用的“ onMouseUp”函數，然后從原始形狀的onmouseup以及拖動的形狀的onmouseup中調用它。 我的例子很草率，但我希望它能說明問題。

jsFiddle： http : //jsfiddle.net/n3KGY/1/

關鍵代碼：

// General method to clear out a selector if
// one was being drawn.
var selectorMouseUp = function(e) {
    reporter.innerHTML = "onmouseup";
    isMouseDown = false;
    whiteRect.groupSelector_ = null;
    if(groupSelector) {
        if(selectorUp) {
            groupSelector.disconnect(selectorUp);
        }               
        surface.remove(groupSelector);
        groupSelector = null;
    }
    e.stopImmediatePropagation();
    e.stopPropagation();
    e.preventDefault();
};

// Mouseup event for the background/workspace
whiteRect.connect("onmouseup",function(e){
    selectorMouseUp(e);
});

// Make a selector as a path on the surface
// and attach a mouseup to it
var makeSelector = function(x,y,w,h) {
    groupSelector = surface.createPath()
        .moveTo(x,y)
        .hLineTo(x+w).vLineTo(y+h).hLineTo(x).vLineTo(y)
        .setStroke({color: "blue", width: 3})
        .closePath();
    // Attach the same mouseup method as the workspace/background
    selectorUp = groupSelector.connect("onmouseup",function(e){
        reporter.innerHTML = "onmouseup (selector)";
        selectorMouseUp(e);
    });         
};

bigRect.connect("onmousemove",function(e){  
    if(isMouseDown) {
        if(bigRect.groupSelector_) {
            var ex = e.clientX;
            var ey = e.clientY;

            reporter.innerHTML = "dragging at " + ex+","+ey;

            var downX = bigRect.groupSelector_.x;
            var downY = bigRect.groupSelector_.y;
            var leadingX = (ex - grn.offsetLeft < downX ? ex - grn.offsetLeft : downX);
            var leadingY = (ey - grn.offsetTop < downY ? ey - grn.offsetTop : downY);
            var selWidth = Math.abs(ex - grn.offsetLeft - downX);
            var selHeight = Math.abs(ey - grn.offsetTop - downY);

            if(groupSelector) {
                // If there's already a selector being drawn, get rid of it.
                groupSelector.disconnect(selectorUp);
                surface.remove(groupSelector);
            }
            // Draw the current selector
            makeSelector(leadingX,leadingY,selWidth,selHeight);
            e.stopImmediatePropagation();
            e.stopPropagation();
            e.preventDefault();
        }
    }
});