Question

我不知道如何在矩形中找到光标的位置部分（4个三角形中的一个）。

这张图片比我的解释更有效：s

enter image description here

我在javascript（所以矩形是DIV，0,0放置）我有那些可变的东西：

var cursor_x = e.clientX + $(document).scrollLeft()
var cursor_y = e.clientY + $(document).scrollTop()

var rect_w = $( rectangle ).width()
var rect_h = $( rectangle ).height()

我只是想在数学上知道光标在哪里，在三角形1,2,3或4中

THX

Answer 1

我认为最简单的方法是首先将y标准化，以便计算与正方形相同，然后检查对角线的哪一侧...

var ynorm = y * w / h;
var s1 = x > ynorm ? 0 : 1;
var s2 = (w - x) > ynorm ? 0 : 1;
var area = s1*2 + s2;

最终的area变量是0到3之间的数字，告诉您四个部分中的哪一个。

Answer 2

@ 6502：求你了，非常有帮助。

有关更多信息，我正在开发一个实验性轻型可排序jquery插件，可以使用浮动放置（顶部，左侧，右侧，底部）

代码：

simply use $( ..selector.. ).sortable({ items: ..selector.. })

-

$.fn.sortable = function( o ) {     
        o.self = this;
        o.helper = null;        
        $(document).bind('mouseup.sortable', function(e) {
            if( o.sortable ) {
                o.sortable.css({ opacity: ''});
                if( o.target ) {
                    if( o.area == 's' ) {   
                        o.sortable.css({ float: '' })                                           
                    }
                    else if( o.area == 'n' ) {
                        o.sortable.css({ float: '' })
                        o.target.css({ float: '' })
                    }
                    else if( o.area == 'w' ) {                      
                        o.target.css({ float: 'left' })
                        o.sortable.css({ float: 'left' })
                    }
                    else if( o.area == 'e' ) {                      
                        o.target.css({ float: 'left' })
                        o.sortable.css({ float: 'left' })                           
                    }                   
                    o.target[ o.area == 's' || o.area == 'e' ? 'before':'after']( o.sortable );
                    o.target[0].style.setProperty( 'cursor', false , false);
                    o.target = null;                
                }   
                o.helper.remove();
                o.sortable = null;              
            }
        }).bind('mousemove.sortable', function(e) {         
            if( o.sortable ) {
                o.ex = e.clientX  + $(document).scrollLeft() + 10
                o.ey = e.clientY + $(document).scrollTop() - o.sortable[0]._height - 10
                o.helper.css({ left: o.ex, top: o.ey });
            }
        });
        return $( this.selector ).delegate( o.items, 'mousemove.sortable', function(e) {            
            if( o.sortable && o.sortable[0] != this ) {
                var self = $(this)
                var x = e.clientX  + $(document).scrollLeft() - self.offset().left 
                var y = e.clientY + $(document).scrollTop() - self.offset().top
                var w = self.width()
                var h = self.height()               
                var ynorm = y * w / h;
                o.area = (w - x) > ynorm ? ( x > ynorm ? 's':'e' ) : ( x > ynorm ? 'w':'n' );                   
                this.style.setProperty( 'cursor', o.area+'-resize', 'important');
                o.target = self;
            }
        }).delegate( o.items, 'mousedown.sortable', function( e ) {         
            o.sortable = $(this).css({ opacity: 0.4 });
            this._width = o.sortable.width();
            this._height = o.sortable.height();         
            o.helper = o.sortable.clone().css({ position: 'absolute', left: -99999, top: 0 })
            $('body').append( o.helper )            
            return false;


}); 
    }

在矩形中找到光标的位置

2 个答案: