mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-07-08 02:34:20 -04:00
Allow direct passing of color arguments to gradient constructors as well as arrays.
This commit is contained in:
parent
58fad6ed72
commit
5afa1b1688
6 changed files with 13 additions and 12 deletions
examples
src/color
|
@ -7,7 +7,7 @@
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas1">
|
<script type="text/paperscript" canvas="canvas1">
|
||||||
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
||||||
var gradient = new RadialGradient([ 'yellow', 'red', 'black']);
|
var gradient = new RadialGradient('yellow', 'red', 'black');
|
||||||
var from = path.position;
|
var from = path.position;
|
||||||
var to = path.bounds.rightCenter;
|
var to = path.bounds.rightCenter;
|
||||||
var gradientColor = new GradientColor(gradient, from, to);
|
var gradientColor = new GradientColor(gradient, from, to);
|
||||||
|
|
|
@ -6,8 +6,8 @@
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css">
|
||||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||||
<script type="text/paperscript" canvas="canvas">
|
<script type="text/paperscript" canvas="canvas">
|
||||||
var radial = new RadialGradient([ new RgbColor(1, 1, 0, 0), 'red', 'black']);
|
var radial = new RadialGradient(new RgbColor(1, 1, 0, 0), 'red', 'black');
|
||||||
var linear = new LinearGradient([ new RgbColor(1, 1, 0, 0), 'red', 'black']);
|
var linear = new LinearGradient(new RgbColor(1, 1, 0, 0), 'red', 'black');
|
||||||
|
|
||||||
var radius = view.bounds.width * 0.4,
|
var radius = view.bounds.width * 0.4,
|
||||||
from = new Point(view.center.x),
|
from = new Point(view.center.x),
|
||||||
|
|
|
@ -32,14 +32,14 @@
|
||||||
new Path.Circle(overlayPos, this.radius / 2)
|
new Path.Circle(overlayPos, this.radius / 2)
|
||||||
]);
|
]);
|
||||||
var color = new HsbColor(Math.random() * 360, 1, 1);
|
var color = new HsbColor(Math.random() * 360, 1, 1);
|
||||||
var gradient = new RadialGradient([color, 'black']);
|
var gradient = new RadialGradient(color, 'black');
|
||||||
compound.fillColor = new GradientColor(gradient, this.point,
|
compound.fillColor = new GradientColor(gradient, this.point,
|
||||||
this.point + this.radius, overlayPos);
|
this.point + this.radius, overlayPos);
|
||||||
var overlay = new Path.Circle(overlayPos, this.radius / 2);
|
var overlay = new Path.Circle(overlayPos, this.radius / 2);
|
||||||
var overlayColor = color.clone();
|
var overlayColor = color.clone();
|
||||||
var fullOverlay = color.clone();
|
var fullOverlay = color.clone();
|
||||||
overlayColor.alpha = 0.5;
|
overlayColor.alpha = 0.5;
|
||||||
var overlayGradient = new LinearGradient([new RgbColor(1, 1, 1, 0.5), new RgbColor(1, 1, 1, 1)]);
|
var overlayGradient = new LinearGradient(new RgbColor(1, 1, 1, 0.5), new RgbColor(1, 1, 1, 1));
|
||||||
overlay.fillColor = new GradientColor(overlayGradient, overlayPos, overlayPos + this.radius / 2);
|
overlay.fillColor = new GradientColor(overlayGradient, overlayPos, overlayPos + this.radius / 2);
|
||||||
this.item = new Group(compound, overlay);
|
this.item = new Group(compound, overlay);
|
||||||
},
|
},
|
||||||
|
|
|
@ -17,13 +17,14 @@
|
||||||
*/
|
*/
|
||||||
var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
|
var Gradient = this.Gradient = Base.extend(/** @lends Gradient# */{
|
||||||
initialize: function(stops, _type) {
|
initialize: function(stops, _type) {
|
||||||
// Support old way of creating gradients.
|
// Keep supporting the old way of creating gradients for the time being.
|
||||||
if (this.constructor === Gradient)
|
if (this.constructor === Gradient)
|
||||||
return new (_type === 'radial' ? RadialGradient : LinearGradient)(
|
return new (_type === 'radial' ? RadialGradient : LinearGradient)(
|
||||||
stops);
|
stops);
|
||||||
// Define this Gradient's unique id.
|
// Define this Gradient's unique id.
|
||||||
this._id = ++Base._uid;
|
this._id = ++Base._uid;
|
||||||
this.setStops(stops || ['white', 'black']);
|
this.setStops((arguments.length > 1 ? arguments : stops)
|
||||||
|
|| ['white', 'black']);
|
||||||
},
|
},
|
||||||
|
|
||||||
_serialize: function(options, dictionary) {
|
_serialize: function(options, dictionary) {
|
||||||
|
|
|
@ -41,7 +41,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
|
||||||
*
|
*
|
||||||
* // Create the gradient, passing it an array of colors to be converted
|
* // Create the gradient, passing it an array of colors to be converted
|
||||||
* // to evenly distributed color stops:
|
* // to evenly distributed color stops:
|
||||||
* var gradient = new LinearGradient(['yellow', 'red', 'blue']);
|
* var gradient = new LinearGradient('yellow', 'red', 'blue');
|
||||||
*
|
*
|
||||||
* // Have the gradient color run between the topLeft and
|
* // Have the gradient color run between the topLeft and
|
||||||
* // bottomRight points we defined earlier:
|
* // bottomRight points we defined earlier:
|
||||||
|
@ -118,7 +118,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
|
||||||
* // Create a rectangle shaped path with the same dimensions as
|
* // Create a rectangle shaped path with the same dimensions as
|
||||||
* // that of the view and fill it with a gradient color:
|
* // that of the view and fill it with a gradient color:
|
||||||
* var path = new Path.Rectangle(view.bounds);
|
* var path = new Path.Rectangle(view.bounds);
|
||||||
* var gradient = new LinearGradient(['yellow', 'red', 'blue']);
|
* var gradient = new LinearGradient('yellow', 'red', 'blue');
|
||||||
*
|
*
|
||||||
* // Have the gradient color run from the top left point of the view,
|
* // Have the gradient color run from the top left point of the view,
|
||||||
* // to the bottom right point of the view:
|
* // to the bottom right point of the view:
|
||||||
|
@ -162,7 +162,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
|
||||||
* // and fill it with a radial gradient color:
|
* // and fill it with a radial gradient color:
|
||||||
* var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
* var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
||||||
*
|
*
|
||||||
* var gradient = new RadialGradient(['yellow', 'red', 'black']);
|
* var gradient = new RadialGradient('yellow', 'red', 'black');
|
||||||
* var from = view.center;
|
* var from = view.center;
|
||||||
* var to = view.bounds.bottomRight;
|
* var to = view.bounds.bottomRight;
|
||||||
* var gradientColor = new GradientColor(gradient, from, to);
|
* var gradientColor = new GradientColor(gradient, from, to);
|
||||||
|
@ -200,7 +200,7 @@ var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor#
|
||||||
* // using 40% of the height of the view as its radius
|
* // using 40% of the height of the view as its radius
|
||||||
* // and fill it with a radial gradient color:
|
* // and fill it with a radial gradient color:
|
||||||
* var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
* var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
||||||
* var gradient = new RadialGradient(['yellow', 'red', 'black']);
|
* var gradient = new RadialGradient('yellow', 'red', 'black');
|
||||||
* var from = path.position;
|
* var from = path.position;
|
||||||
* var to = path.bounds.rightCenter;
|
* var to = path.bounds.rightCenter;
|
||||||
* var gradientColor = new GradientColor(gradient, from, to);
|
* var gradientColor = new GradientColor(gradient, from, to);
|
||||||
|
|
|
@ -128,7 +128,7 @@ var GradientStop = this.GradientStop = Base.extend(/** @lends GradientStop# */{
|
||||||
* var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
* var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
||||||
*
|
*
|
||||||
* // Create a radial gradient that mixes red and black evenly:
|
* // Create a radial gradient that mixes red and black evenly:
|
||||||
* var gradient = new RadialGradient(['red', 'black']);
|
* var gradient = new RadialGradient('red', 'black');
|
||||||
*
|
*
|
||||||
* // Fill the path with a gradient color that runs from its center,
|
* // Fill the path with a gradient color that runs from its center,
|
||||||
* // to the right center of its bounding rectangle:
|
* // to the right center of its bounding rectangle:
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue