hyperandroid / CAAT

Canvas Advanced Animation Toolkit
hyperandroid.github.com/CAAT
MIT License
727 stars 117 forks source link

allow custom clipping path to actors #6

Closed ruthlessfish closed 12 years ago

ruthlessfish commented 12 years ago

added setClipPath() function to CAAT.Actor to allow masking of actors and actor containers.

example usage:

var p= new CAAT.Path().
        beginPath(10,10).
        addCubicTo( 30,80, 90,30, 50,70 ).
        addQuadricTo( 80,60, 65,85).
        addLineTo( 10, 100).
        addLineTo( 25, 250).
        addLineTo( 99,40 ).
        closePath();

var c0= new CAAT.ActorContainer().
            setBounds( 10, 10, 90, 90 ).
            setClipPath(p).
            setClip(true);

var child0= new CAAT.Actor().
                setBounds( 10, 10, 180, 180 ).
                setFillStyle( 'red' );

var child1= new CAAT.ShapeActor().
                setShape( CAAT.ShapeActor.prototype.SHAPE_CIRCLE ).
                setFillStyle( 'green' ).
                setBounds( 20, 20, 140, 140 );

c0.addChild(child0);
c0.addChild(child1);
hyperandroid commented 12 years ago

Hi Bubbafoley.

First of all I'd like to thank you for the time taken to make fix this issue which has been hanging around for a while. I have taken some long to answer, excuse me for that.

Just one thing to note about your implementation is that forces us to deal with two methods to enable clipping on actors: setClip and setClipPath. I know there were no out-of-the-box rectangle shaped paths and that's why I guess you did it that way. I've included a CAAT.ShapePath which now is able to set rectangle path segments, as well as added methods to CAAT.Path such as setAsRectangle and addRectangle to handle complex paths with rectangled segments.

With all these additions, I'd be glad if you decided to include all clipping logic uniquely under the method setClip instead having to deal with two. I think it could be more consistent to do it in this way since after all, a rectangle could be considered a path as well.

Let me know what you think. Regards,

-ibon

ruthlessfish commented 12 years ago

Hi Ibon,

Now I must apologize for taking so long to get back to you. I don't use github that often and forgot to enable email notifications.

I like your idea to just use setClip. I will work on reworking this and open a new pull request.

I am thinking it would go something like this:

c = new CAAT.ActorContainer().setClip(true, new CAAT.ShapePath()...)

Is that more along the lines of what you are thinking?

ruthlessfish commented 12 years ago

Scratch that. I'm looking through your latest commits and I see you already finished this. Most excellent work and thank you very much!

hyperandroid commented 12 years ago

Hey bubbafoley,

no worries. I thank you very much the time you took in geting into CAAT and build a mas solution from scratch. Since you didn't get back, I decided to put my hands on the masking feature so besides the mask feature, I added some pending features on CAAT such as CAAT.Path affine transformation which were as well nice additions to the mask. I also took the time to improve CAAT.Path's control point management.

All your CAAT improvements will be more that welcome. There's still missing an arc path segment management object. With this one, I think the CAAT.Path object will be fully powered :).

Thanks again for your interest. Regards, -ibon

2011/10/7 bubbafoley < reply@reply.github.com>

Scratch that. I'm looking through your latest commits and I see you already finished this. Most excellent work and thank you very much!

Reply to this email directly or view it on GitHub: https://github.com/hyperandroid/CAAT/pull/6#issuecomment-2328709