Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

.isPointInside() is not working with transformed paths #538

Closed
alerizzo opened this Issue · 7 comments

8 participants

@alerizzo

When a path has a transformation applied, .isPointInside() does not take into account these transformations. Instead, it keeps considering the original path, not the element itself.

Here a sample: http://jsfiddle.net/jA5bB/1/

@alerizzo alerizzo referenced this issue from a commit in alerizzo/raphael
@alerizzo alerizzo Fixed issue #538. isPointInside() now considers all transformations
applied.
8ecddf9
@markct

Can we get this fix added? This seems to work for me:

elproto.isPointInside = function (x, y) {
    var rp = this.realPath = this.realPath || getPath[this.type](this);
    if (this.attr('transform') && this.attr('transform').length) {
        rp = R.transformPath(rp, this.attr('transform'));
    }
    return R.isPointInsidePath(rp, x, y);
};
@marcusatbang

Seconded, this code fragment just fixed a problem I was having.

@WayneCBarker

Has this fix been released yet? i have Raphael 2.1.0 and my isPointInside does not work on Scaled paths.

I have taken the code from example above and added scaling.

var paper = new Raphael($('#raphael')[0], 500, 400);

var triangle = paper.path('M0 400L250 0L500 400Z').attr({fill: 'black', transform: 'R180'});

paper.circle(100,20,10).attr({ stroke: '#f60' }); // p1
paper.circle(100,380,10).attr({ stroke: '#f60' }); // p2

document.write ( triangle.isPointInside( 100, 20 ) ); // p1 gives false
document.write ( triangle.isPointInside( 100, 380 ) ); // p2 gives true

triangle.scale(0.5,0.5);

document.write ( triangle.isPointInside( 100, 20 ) ); // p1 gives false
document.write ( triangle.isPointInside( 100, 380 ) ); // p2 gives true

@valent-novem

I've made visual test case for this issue. Try it here http://jsfiddle.net/jTDGK/3/

@tomgruner

The fix by markct really helped my situation. Thanks!

@tomasAlabes
Collaborator

Pushed in v2.1.1 branch.
Thanks guys

@tomasAlabes tomasAlabes closed this
@shamasis

For better performance:

elproto.isPointInside = function (x, y) {
    var rp = this.realPath = this.realPath || getPath[this.type](this),
        tr;
    return R.isPointInsidePath(((tr = this.attr('transform')) && 
        tr.length && R.transformPath(rp, tr)) || rp, x, y);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.