diff --git a/examples/Scripts/PathStructure.html b/examples/Scripts/PathStructure.html new file mode 100644 index 00000000..ee6ddb18 --- /dev/null +++ b/examples/Scripts/PathStructure.html @@ -0,0 +1,74 @@ + + + + + Example + + + + + + + + \ No newline at end of file diff --git a/src/load.js b/src/load.js index f914b7c6..61a8d393 100644 --- a/src/load.js +++ b/src/load.js @@ -57,6 +57,11 @@ var sources = [ 'src/path/CompoundPath.js', 'src/path/Path.Constructors.js', + 'src/text/ParagraphStyle.js', + 'src/text/CharacterStyle.js', + 'src/text/TextItem.js', + 'src/text/PointText.js', + 'src/color/Color.js', 'src/color/RGBColor.js', 'src/color/HSBColor.js', diff --git a/src/paper.js b/src/paper.js index 06976999..4b2d7cb5 100644 --- a/src/paper.js +++ b/src/paper.js @@ -74,6 +74,12 @@ var paper = new function() { //#include "path/CompoundPath.js" //#include "path/Path.Constructors.js" +//#include "text/ParagraphStyle.js" +//#include "text/CharacterStyle.js" +//#include "text/TextItem.js" +//#include "text/PointText.js" + + //#include "color/Color.js" //#include "color/RGBColor.js" //#include "color/HSBColor.js" diff --git a/src/path/Path.js b/src/path/Path.js index f7c9a17c..4bb1e4ac 100644 --- a/src/path/Path.js +++ b/src/path/Path.js @@ -132,10 +132,12 @@ var Path = this.Path = PathItem.extend({ for (var i = 0, l = this._segments.length; i < l; i++) { this._segments[i]._transformCoordinates(matrix, coords, true); } - if (this.fillColor && this.fillColor.transform) - this.fillColor.transform(matrix); - if (this.strokeColor && this.strokeColor.transform) - this.strokeColor.transform(matrix); + var fillColor = this.getFillColor(), + strokeColor = this.getStrokeColor(); + if (fillColor && fillColor.transform) + fillColor.transform(matrix); + if (strokeColor && strokeColor.transform) + strokeColor.transform(matrix); } this._changed(ChangeFlags.GEOMETRY); }, diff --git a/src/text/CharacterStyle.js b/src/text/CharacterStyle.js new file mode 100644 index 00000000..b666686f --- /dev/null +++ b/src/text/CharacterStyle.js @@ -0,0 +1,32 @@ +/* + * Paper.js + * + * This file is part of Paper.js, a JavaScript Vector Graphics Library, + * based on Scriptographer.org and designed to be largely API compatible. + * http://paperjs.org/ + * http://scriptographer.org/ + * + * Distributed under the MIT license. See LICENSE file for details. + * + * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey + * http://lehni.org/ & http://jonathanpuckey.com/ + * + * All rights reserved. + */ + +var CharacterStyle = this.CharacterStyle = PathStyle.extend({ + initialize: function(style) { + this.fontSize = style.fontSize || 10; + this.font = style.font || 'Helvetica Regular'; + this.base(style); + }, + + statics: { + create: function(item, other) { + var style = new CharacterStyle(CharacterStyle.dont); + style._item = item; + style.initialize(other); + return style; + } + } +}); diff --git a/src/text/ParagraphStyle.js b/src/text/ParagraphStyle.js new file mode 100644 index 00000000..d1a49515 --- /dev/null +++ b/src/text/ParagraphStyle.js @@ -0,0 +1,36 @@ +/* + * Paper.js + * + * This file is part of Paper.js, a JavaScript Vector Graphics Library, + * based on Scriptographer.org and designed to be largely API compatible. + * http://paperjs.org/ + * http://scriptographer.org/ + * + * Distributed under the MIT license. See LICENSE file for details. + * + * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey + * http://lehni.org/ & http://jonathanpuckey.com/ + * + * All rights reserved. + */ + +var ParagraphStyle = this.ParagraphStyle = Base.extend({ + beans: true, + + initialize: function(style) { + this.justification = (style && style.justification) || 'left'; + }, + + clone: function() { + return new PathStyle(this); + }, + + statics: { + create: function(item, other) { + var style = new ParagraphStyle(PathStyle.dont); + style._item = item; + style.initialize(other); + return style; + } + } +}); diff --git a/src/text/PointText.js b/src/text/PointText.js new file mode 100644 index 00000000..369ba428 --- /dev/null +++ b/src/text/PointText.js @@ -0,0 +1,80 @@ +/* + * Paper.js + * + * This file is part of Paper.js, a JavaScript Vector Graphics Library, + * based on Scriptographer.org and designed to be largely API compatible. + * http://paperjs.org/ + * http://scriptographer.org/ + * + * Distributed under the MIT license. See LICENSE file for details. + * + * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey + * http://lehni.org/ & http://jonathanpuckey.com/ + * + * All rights reserved. + */ + +var PointText = this.PointText = TextItem.extend({ + beans: true, + + initialize: function(point) { + this.base(); + point = Point.read(arguments, 0, 1); + this._point = point || new Point(); + this.matrix = new Matrix().translate(this._point); + }, + + getPoint: function() { + return this._point; + }, + + setPoint: function(point) { + point = Point.read(arguments); + if (point) { + var delta = point.subtract(this._point); + this.matrix.preConcatenate(new Matrix().translate(delta)); + this._point = point; + } + }, + + getPosition: function() { + return this._point; + }, + + setPosition: function(point) { + // TODO: position should be the center point of the bounds + // but we currently don't support bounds for PointText. + this.setPoint.apply(this, arguments); + }, + + _transform: function(matrix, flags) { + this.matrix.preConcatenate(matrix); + if (!matrix.isIdentity()) { + matrix._transformPoint(this._point); + } + }, + + draw: function(ctx) { + if (this.content == null) + return; + ctx.save(); + ctx.font = this._characterStyle.fontSize + 'pt ' + + this._characterStyle.font; + ctx.textAlign = this._paragraphStyle.justification; + this.matrix.applyToContext(ctx); + + var fillColor = this.getFillColor(); + var strokeColor = this.getStrokeColor(); + if (!fillColor || !strokeColor) + ctx.globalAlpha = this.opacity; + if (fillColor) { + ctx.fillStyle = fillColor.getCanvasStyle(ctx); + ctx.fillText(this.content, 0, 0); + } + if (strokeColor) { + ctx.strokeStyle = strokeColor.getCanvasStyle(ctx); + ctx.strokeText(this.content, 0, 0); + } + ctx.restore(); + } +}); diff --git a/src/text/TextItem.js b/src/text/TextItem.js new file mode 100644 index 00000000..444c4ff0 --- /dev/null +++ b/src/text/TextItem.js @@ -0,0 +1,43 @@ +/* + * Paper.js + * + * This file is part of Paper.js, a JavaScript Vector Graphics Library, + * based on Scriptographer.org and designed to be largely API compatible. + * http://paperjs.org/ + * http://scriptographer.org/ + * + * Distributed under the MIT license. See LICENSE file for details. + * + * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey + * http://lehni.org/ & http://jonathanpuckey.com/ + * + * All rights reserved. + */ + +var TextItem = this.TextItem = Item.extend({ + beans: true, + + initialize: function() { + this.base(); + point = Point.read(arguments, 0, 1); + this.content = null; + this.setCharacterStyle(this._project.getCurrentStyle()); + this.setParagraphStyle(); + }, + + getCharacterStyle: function() { + return this._characterStyle; + }, + + setCharacterStyle: function(style) { + this._characterStyle = CharacterStyle.create(this, style); + }, + + getParagraphStyle: function() { + return this._paragraphStyle; + }, + + setParagraphStyle: function(style) { + this._paragraphStyle = ParagraphStyle.create(this, style); + } +});