Add support for shadows.

Closes #36.
This commit is contained in:
Jürg Lehni 2013-07-19 17:48:29 -07:00
parent ec121ca04c
commit f466473bfb
2 changed files with 61 additions and 6 deletions

View file

@ -2887,8 +2887,7 @@ var Item = Base.extend(Callback, /** @lends Item# */{
limit = style.getMiterLimit(),
fillColor = style.getFillColor(),
strokeColor = style.getStrokeColor(),
dashArray = style.getDashArray(),
dashOffset = style.getDashOffset();
shadowColor = style.getShadowColor();
if (width != null)
ctx.lineWidth = width;
if (join)
@ -2901,6 +2900,8 @@ var Item = Base.extend(Callback, /** @lends Item# */{
ctx.fillStyle = fillColor.toCanvasStyle(ctx);
if (strokeColor) {
ctx.strokeStyle = strokeColor.toCanvasStyle(ctx);
var dashArray = style.getDashArray(),
dashOffset = style.getDashOffset();
if (paper.support.nativeDash && dashArray && dashArray.length) {
if ('setLineDash' in ctx) {
ctx.setLineDash(dashArray);
@ -2911,6 +2912,13 @@ var Item = Base.extend(Callback, /** @lends Item# */{
}
}
}
if (shadowColor) {
ctx.shadowColor = shadowColor.toCanvasStyle(ctx);
ctx.shadowBlur = style.getShadowBlur();
var offset = this.getShadowOffset();
ctx.shadowOffsetX = offset.x;
ctx.shadowOffsetY = offset.y;
}
},
// TODO: Implement View into the drawing.

View file

@ -69,21 +69,26 @@ var Style = Base.extend(new function() {
// windingRule / resolution / fillOverprint / strokeOverprint are currently
// not supported.
var defaults = {
// path styles
// Paths
fillColor: undefined,
strokeColor: undefined,
selectedColor: undefined,
strokeWidth: 1,
strokeCap: 'butt',
strokeJoin: 'miter',
miterLimit: 10,
dashOffset: 0,
dashArray: [],
// character styles
// Shadows
shadowColor: undefined,
shadowBlur: 0,
shadowOffset: new Point(),
// Selection
selectedColor: undefined,
// Characters
font: 'sans-serif',
fontSize: 12,
leading: null,
// paragraph styles
// Paragraphs
justification: 'left'
};
@ -415,6 +420,48 @@ var Style = Base.extend(new function() {
* circle.fillColor = new Color(1, 0, 0);
*/
/**
* {@grouptitle Shadow Style}
*
* The shadow color.
*
* @property
* @name Style#shadowColor
* @type Color
*
* @example {@paperscript}
* // Setting the shadow color of a path to black:
*
* // Create a circle shaped path at { x: 80, y: 50 }
* // with a radius of 35:
* var circle = new Path.Circle(new Point(80, 50), 35);
*
* // Set the shadow color of the circle to RGB black:
* circle.shadowColor = new Color(0, 0, 0);
*
* // Set the shadow blur, offset to { x: 10, y: 10 }
* circle.shadowBlur = 10;
* circle.shadowOffset = new Poit(10, 10);
*/
/**
* The shadow's blur radius.
*
* @property
* @default 0
* @name Style#shadowBlur
* @type Number
*/
/**
* The shadow's offset.
*
* @property
* @default 0
* @name Style#shadowOffset
* @type Point
*/
/**
* {@grouptitle Selection Style}
*