鼠标向下的选择句柄表现得很奇怪

时间:2014-07-15 22:16:01

标签: javascript html canvas

我正在尝试使用中间选择手柄在矩形中创建间隙。我有两个中间选择手柄,如果我选择其中任何一个,它应该在中间创建一个间隙,就像将矩形划分为2个相等的一半。 (就像我们在剧中有窗帘:P)

在我的情况下,右选择句柄的行为与左选择句柄的行为相同。如果我将中间选择手柄放在右边,它应该在中间创建一个间隙,而不是它创建一个重叠。

请选择小提琴中的绿色矩形并尝试选择中间的绿色矩形并将其移动到右侧。它不会做正确的功能。而如果您选择中间手柄并将其向左移动就可以了。

请让我知道我的逻辑出错了。

小提琴:http://jsfiddle.net/q582L/7/

非常感谢任何帮助。

            switch (expectResize) {
            case 0:
                mySel.x = mx;
                mySel.y = my;
                mySel.w += oldx - mx;
                mySel.h += oldy - my;
                break;
            case 1:
                mySel.y = my;
                mySel.h += oldy - my;
                break;
             case 2:
                mySel.y = my;
                mySel.w = mx - oldx;
                mySel.h += oldy - my;
                break;
            case 3:
                mySel.x = mx;
                mySel.w += oldx - mx;
                break;
            case 4:
                mySel.w = mx - oldx;
                break;
            case 5:
                mySel.x = mx;
                mySel.w += oldx - mx;
                mySel.h = my - oldy;
                break;
            case 6:
                mySel.h = my - oldy;
                break;
            case 7:
                mySel.w = mx - oldx;
                mySel.h = my - oldy;
                break;
            case 8:

                //if(mx >= mySel.x + minGold)
               //     mx = mySel.x + minGold;

                // Enforce limits on mx:
                //     Should not be closer than 5 pixels to this.x (left side of metric box)
                //     Should not be > this.x + width/2 (middle of metric box)
                mySel.windowWidth = (mySel.x + mySel.w/2) - mx;
                console.log(mySel.windowWidth);
                break;
            case 9:
                // Enforce limits on mx:
                //     Should not be closer than 5 pixels to this.x (left side of metric box)
                //     Should not be > this.x + width/2 (middle of metric box)
                mySel.windowWidth = (mySel.x + mySel.w) - mx;
                console.log(mySel.windowWidth);
                break;

1 个答案:

答案 0 :(得分:1)

由于鼠标向左移动以增长窗口,因此您需要:

case 9: mySel.windowWidth = mx - (mySel.x + mySel.w / 2);

修改

创建限制的快速修复将是这样的:

case 8:
    mySel.windowWidth = Math.max(Math.min((mySel.x + mySel.w/2) - mx, mySel.w - 5), 0);
    break;
case 9:
    mySel.windowWidth = Math.max(Math.min(mx - (mySel.x + mySel.w/2), mySel.w - 5), 0);
    break;

A live demo at jsFiddle