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(), limit = style.getMiterLimit(),
fillColor = style.getFillColor(), fillColor = style.getFillColor(),
strokeColor = style.getStrokeColor(), strokeColor = style.getStrokeColor(),
dashArray = style.getDashArray(), shadowColor = style.getShadowColor();
dashOffset = style.getDashOffset();
if (width != null) if (width != null)
ctx.lineWidth = width; ctx.lineWidth = width;
if (join) if (join)
@ -2901,6 +2900,8 @@ var Item = Base.extend(Callback, /** @lends Item# */{
ctx.fillStyle = fillColor.toCanvasStyle(ctx); ctx.fillStyle = fillColor.toCanvasStyle(ctx);
if (strokeColor) { if (strokeColor) {
ctx.strokeStyle = strokeColor.toCanvasStyle(ctx); ctx.strokeStyle = strokeColor.toCanvasStyle(ctx);
var dashArray = style.getDashArray(),
dashOffset = style.getDashOffset();
if (paper.support.nativeDash && dashArray && dashArray.length) { if (paper.support.nativeDash && dashArray && dashArray.length) {
if ('setLineDash' in ctx) { if ('setLineDash' in ctx) {
ctx.setLineDash(dashArray); 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. // TODO: Implement View into the drawing.

View file

@ -69,21 +69,26 @@ var Style = Base.extend(new function() {
// windingRule / resolution / fillOverprint / strokeOverprint are currently // windingRule / resolution / fillOverprint / strokeOverprint are currently
// not supported. // not supported.
var defaults = { var defaults = {
// path styles // Paths
fillColor: undefined, fillColor: undefined,
strokeColor: undefined, strokeColor: undefined,
selectedColor: undefined,
strokeWidth: 1, strokeWidth: 1,
strokeCap: 'butt', strokeCap: 'butt',
strokeJoin: 'miter', strokeJoin: 'miter',
miterLimit: 10, miterLimit: 10,
dashOffset: 0, dashOffset: 0,
dashArray: [], dashArray: [],
// character styles // Shadows
shadowColor: undefined,
shadowBlur: 0,
shadowOffset: new Point(),
// Selection
selectedColor: undefined,
// Characters
font: 'sans-serif', font: 'sans-serif',
fontSize: 12, fontSize: 12,
leading: null, leading: null,
// paragraph styles // Paragraphs
justification: 'left' justification: 'left'
}; };
@ -415,6 +420,48 @@ var Style = Base.extend(new function() {
* circle.fillColor = new Color(1, 0, 0); * 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} * {@grouptitle Selection Style}
* *