mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-29 09:22:22 -05:00
Merge remote-tracking branch 'origin/master'
This commit is contained in:
Jürg Lehni
commit
b65ec49207
8 changed files with 282 additions and 4 deletions
74
examples/Scripts/PathStructure.html
Normal file
74
examples/Scripts/PathStructure.html
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Example</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript">var root = '../../'</script>
|
||||
<script type="text/javascript" src="../../src/load.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var y = view.size.height / 2;
|
||||
var width = view.size.width;
|
||||
var vector = new Point({
|
||||
angle: 45,
|
||||
length: width / 5
|
||||
});
|
||||
var offset = width / 30;
|
||||
var handleTexts = [];
|
||||
var path = new Path();
|
||||
path.segments = [
|
||||
[[offset, y], null, vector.rotate(-90)],
|
||||
[[width / 2, y], vector.rotate(-180), vector],
|
||||
[[width - offset, y], vector.rotate(90), null]
|
||||
];
|
||||
path.selected = true;
|
||||
|
||||
function onMouseMove(event) {
|
||||
var point = event.point.clone();
|
||||
// Constrain the event point, to not cut off the text:
|
||||
if (point.y < 22)
|
||||
point.y = 22;
|
||||
if (point.y > view.size.height - 24)
|
||||
point.y = view.size.height - 24;
|
||||
var delta = point - view.center;
|
||||
for (var i = 0; i < 2; i++) {
|
||||
var curve = path.curves[i];
|
||||
curve.handle1.y = curve.handle2.y = delta.y * (i % 2 ? 1 : -1);
|
||||
var firstPoint = curve.point1 + curve.handle1;
|
||||
var secondPoint = curve.point2 + curve.handle2;
|
||||
handleTexts[i * 2].point = secondPoint -
|
||||
(firstPoint.y < y ? [0, 10] : [0, -18]);
|
||||
handleTexts[i * 2 + 1].point = firstPoint -
|
||||
(firstPoint.y < y ? [0, 10] : [0, -18]);
|
||||
}
|
||||
}
|
||||
|
||||
project.currentStyle.fillColor = 'black';
|
||||
for (var i = 0; i < 3; i++) {
|
||||
var segment = path.segments[i];
|
||||
var text = new PointText(segment.point - [0, 10]);
|
||||
text.content = i;
|
||||
text.paragraphStyle.justification = 'center';
|
||||
}
|
||||
|
||||
for (var i = 0; i < 2; i++) {
|
||||
var handleInText = new PointText();
|
||||
handleInText.content = 'handleIn';
|
||||
handleInText.paragraphStyle.justification = 'center';
|
||||
handleInText.characterStyle.fontSize = 9;
|
||||
handleTexts.push(handleInText);
|
||||
|
||||
var handleOutText = new PointText();
|
||||
handleOutText.content = 'handleOut';
|
||||
handleOutText.paragraphStyle.justification = 'center';
|
||||
handleOutText.characterStyle.fontSize = 9;
|
||||
handleTexts.push(handleOutText);
|
||||
}
|
||||
|
||||
// Call onMouseMove once to correctly position the text items:
|
||||
onMouseMove({ point: view.center - vector.rotate(-90) });
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id='canvas' width=303 height=167 resize></canvas>
|
||||
</body>
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
},
|
||||
|
|
|
|||
32
src/text/CharacterStyle.js
Normal file
32
src/text/CharacterStyle.js
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
36
src/text/ParagraphStyle.js
Normal file
36
src/text/ParagraphStyle.js
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
80
src/text/PointText.js
Normal file
80
src/text/PointText.js
Normal file
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
43
src/text/TextItem.js
Normal file
43
src/text/TextItem.js
Normal file
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
Loading…
Reference in a new issue