mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -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/CompoundPath.js',
|
||||||
'src/path/Path.Constructors.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/Color.js',
|
||||||
'src/color/RGBColor.js',
|
'src/color/RGBColor.js',
|
||||||
'src/color/HSBColor.js',
|
'src/color/HSBColor.js',
|
||||||
|
|
|
||||||
|
|
@ -74,6 +74,12 @@ var paper = new function() {
|
||||||
//#include "path/CompoundPath.js"
|
//#include "path/CompoundPath.js"
|
||||||
//#include "path/Path.Constructors.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/Color.js"
|
||||||
//#include "color/RGBColor.js"
|
//#include "color/RGBColor.js"
|
||||||
//#include "color/HSBColor.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++) {
|
for (var i = 0, l = this._segments.length; i < l; i++) {
|
||||||
this._segments[i]._transformCoordinates(matrix, coords, true);
|
this._segments[i]._transformCoordinates(matrix, coords, true);
|
||||||
}
|
}
|
||||||
if (this.fillColor && this.fillColor.transform)
|
var fillColor = this.getFillColor(),
|
||||||
this.fillColor.transform(matrix);
|
strokeColor = this.getStrokeColor();
|
||||||
if (this.strokeColor && this.strokeColor.transform)
|
if (fillColor && fillColor.transform)
|
||||||
this.strokeColor.transform(matrix);
|
fillColor.transform(matrix);
|
||||||
|
if (strokeColor && strokeColor.transform)
|
||||||
|
strokeColor.transform(matrix);
|
||||||
}
|
}
|
||||||
this._changed(ChangeFlags.GEOMETRY);
|
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