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