paperJS (paper.js) JavaScript Library walk through by Brett Paufler - 10-16-13

Styles

All the action (for what I added today) is happening in the checkClickBox(event) function, per below.  And I have highlighted the various thisGroup.style codes in red.


function checkClickBox(event){
    for (i = 1; i <= 6; i++){
        if (clickBox[i].contains(event.point)){
            switch (i){
            case 1:
                thisGroup.style = {
                    fillColor : 'red',
                    strokeColor : 'blue',
                    strokeWidth : 10,
                    dashArray : [1 , 0],
                    strokeCap : 'square'
                };
                updateFeedbackPointText();
                break;
            case 2:
                thisGroup.style = {
                    fillColor : 'blue',
                    strokeColor : 'red',
                    strokeWidth : 5,
                    dashArray : [3 , 9],
                    strokeCap : 'round'
                };
                updateFeedbackPointText();
                break;
            case 3:
                thisGroup.style = {
                    fillColor : 'red',
                    strokeColor : 'blue',
                    strokeWidth : 1,
                    dashArray : [1 , 0],
                    strokeCap : 'square',
                    shadowColor : 'black',  // shadow doesn't work
                    shadowBlur : 10,          // I couldn't get it to work
                    shadowOffset : new Point(10 , 10)  // I don't know why
                };             // this spur goes into shadowColor in more detail
                               // but I still didn't get it to work
                updateFeedbackPointText();
                break;
            case 4:
                thisGroup.style = {
                    strokeColor : 'red',
                    strokeWidth : 2,
                    dashArray : [1 , 0],
                    strokeCap : 'square',
                    fillColor : {
                        gradient : {
                            stops : ['yellow', 'red','blue']
                        },
                        origin : OP,  // OP = Origin Point(0,0)
                        destination : CP  // CP = Point(view.center)
                                           // so gradient extends from Origin to Center
                    }
                };
                updateFeedbackPointText();
                break;
            case 5:
                thisGroup.style = {
                    strokeColor : 'blue',
                    strokeWidth : 2,
                    dashArray : [1 , 0],
                    strokeCap : 'square',
                    fillColor : {
                        gradient : {
                            stops : ['red', 'black','yellow']  // begin, middle, end color
                        },
                        origin : OP,
                        destination : BR  // BR = Point(BottomRightOfScreen)
                                                 // so gradient extends the full screen
                    }
                };
                updateFeedbackPointText();
                break;
            case 6:  // this one just redraws the board
                thisGroup.removeChildren();
                paper.project.activeLayer.removeChildren();
                createHexaGonBoard();  // order is important
                createDefaultPage();
                updateFeedbackPointText();
                break;
            } // end switch
        } // end contains if
    }  // end for
}  // end checkClickBox function


It's way faster to change all the boxes using styles than using for loops, so I'll be doing that in the future.

I never did get shadowColor, shadowBlur, shadowOffset to work (not in this link either), so I don't know what's up with that.  Precious little on the web that I found, so maybe it just doesn't work.

Next up is a full exploration of the gradient property.  Started looking at that here and the potential seems... huge.



previous (Group)        paper.js tutorial index       next (.gradient)



Back to BrettCode Home



Brett Words
my writing site (Home to the writing of Celli the Happy Go Lucky Celaphopod, Eddie Takosori, Fritz Heinmillerstein, Morgan Feldstone, Kevin Stillwater, and of course, me, your host, Brett Paufler)

paper.js official site = http://www.paperJS.org

© Copyright 2013 Brett Paufler