scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Rename GradientStop#rampPoint to #offset

Browse source
This commit is contained in:
Jürg Lehni 2016-05-31 12:35:44 +02:00
parent f07927a95e
commit f19d0c8134
6 changed files with 52 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
CHANGELOG.md
View file

@ -256,7 +256,7 @@ contribute to the code.
It is replaced by `Project#addLayer()` and `Project#insertLayer()`.
### Deprecated
- `#windingRule` on `Item` and `Style` → `#fillRule`.
- `#windingRule` on `Item` and `Style` → `#fillRule`
- `Curve#getNormalAt(time, true)` → `#getNormalAtTime(true)`
- `Curve#divide()` → `#divideAt(offset)` / `#divideAtTime(time)`
- `Curve#split()` → `#splitAt(offset)` / `#splitAtTime(time)`
@ -273,6 +273,7 @@ contribute to the code.
- `Symbol#definition` → `SymbolDefinition#item`
- `PlacedSymbol#symbol` → `SymbolItem#definition`
- `Project#symbols` → `#symbolDefinitions`
- `Matrix#concatenante` → `#append`.
- `Matrix#preConcatenate` → `#prepend`.
- `Matrix#chain` → `#appended`.
- `Matrix#concatenate` → `#append`
- `Matrix#preConcatenate` → `#prepend`
- `Matrix#chain` → `#appended`
- `GradientStop#rampPoint` → `#offset`

6
src/style/Color.js
View file

@ -858,9 +858,9 @@ var Color = Base.extend(new function() {
var stop = stops[i];
// Use the defined offset, and fall back to automatic linear
// calculation.
// NOTE: that if _rampPoint is 0 for the first entry, the fall
// back will be so too.
canvasGradient.addColorStop(stop._rampPoint || i / (l - 1),
// NOTE: that if _offset is 0 for the first entry, the fall-back
// will be so too.
canvasGradient.addColorStop(stop._offset || i / (l - 1),
stop._color.toCanvasStyle());
}
return this._canvasStyle = canvasGradient;

57
src/style/GradientStop.js
View file

@ -23,30 +23,31 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
* Creates a GradientStop object.
*
* @param {Color} [color=new Color(0, 0, 0)] the color of the stop
* @param {Number} [rampPoint=null] the position of the stop on the gradient
* @param {Number} [offset=null] the position of the stop on the gradient
* ramp as a value between `0` and `1`; `null` or `undefined` for automatic
* assignment.
*/
initialize: function GradientStop(arg0, arg1) {
// (color, rampPoint)
// (color, offset)
var color = arg0,
rampPoint = arg1;
offset = arg1;
if (typeof arg0 === 'object' && arg1 === undefined) {
// Make sure the first entry in the array is not a number, in which
// case the whole array would be a color, and the assignments would
// already have occurred correctly above.
if (Array.isArray(arg0) && typeof arg0[0] !== 'number') {
// ([color, rampPoint])
// ([color, offset])
color = arg0[0];
rampPoint = arg0[1];
} else if ('color' in arg0 || 'rampPoint' in arg0) {
offset = arg0[1];
} else if ('color' in arg0 || 'offset' in arg0
|| 'rampPoint' in arg0) {
// (stop)
color = arg0.color;
rampPoint = arg0.rampPoint;
offset = arg0.offset || arg0.rampPoint || 0;
}
}
this.setColor(color);
this.setRampPoint(rampPoint);
this.setOffset(offset);
},
// TODO: Do we really need to also clone the color here?
@ -54,13 +55,13 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
* @return {GradientStop} a copy of the gradient-stop
*/
clone: function() {
return new GradientStop(this._color.clone(), this._rampPoint);
return new GradientStop(this._color.clone(), this._offset);
},
_serialize: function(options, dictionary) {
var color = this._color,
rampPoint = this._rampPoint;
return Base.serialize(rampPoint == null ? [color] : [color, rampPoint],
offset = this._offset;
return Base.serialize(offset == null ? [color] : [color, offset],
options, true, dictionary);
},
@ -106,23 +107,31 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
* // This function is called each frame of the animation:
* function onFrame(event) {
* var blackStop = gradient.stops[2];
* // Animate the rampPoint between 0.7 and 0.9:
* blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
* // Animate the offset between 0.7 and 0.9:
* blackStop.offset = Math.sin(event.time * 5) * 0.1 + 0.8;
*
* // Animate the rampPoint between 0.2 and 0.4
* // Animate the offset between 0.2 and 0.4
* var redStop = gradient.stops[1];
* redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
* redStop.offset = Math.sin(event.time * 3) * 0.1 + 0.3;
* }
*/
getRampPoint: function() {
return this._rampPoint;
getOffset: function() {
return this._offset;
},
setRampPoint: function(rampPoint) {
this._rampPoint = rampPoint;
setOffset: function(offset) {
this._offset = offset;
this._changed();
},
/**
* @private
* @bean
* @deprecated use {@link #getOffset()} instead.
*/
getRampPoint: '#getOffset',
setRampPoint: '#setOffset',
/**
* The color of the gradient stop.
*
@ -154,11 +163,11 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
*
* // This function is called each frame of the animation:
* function onFrame(event) {
* // Animate the rampPoint between 0.7 and 0.9:
* blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
* // Animate the offset between 0.7 and 0.9:
* blackStop.offset = Math.sin(event.time * 5) * 0.1 + 0.8;
*
* // Animate the rampPoint between 0.2 and 0.4
* redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
* // Animate the offset between 0.2 and 0.4
* redStop.offset = Math.sin(event.time * 3) * 0.1 + 0.3;
* }
*/
getColor: function() {
@ -178,7 +187,7 @@ var GradientStop = Base.extend(/** @lends GradientStop# */{
equals: function(stop) {
return stop === this || stop && this._class === stop._class
&& this._color.equals(stop._color)
&& this._rampPoint == stop._rampPoint
&& this._offset == stop._offset
|| false;
}
});

2
src/svg/SvgExport.js
View file

@ -234,7 +234,7 @@ new function() {
stopColor = stop._color,
alpha = stopColor.getAlpha();
attrs = {
offset: stop._rampPoint || i / (l - 1)
offset: stop._offset || i / (l - 1)
};
if (stopColor)
attrs['stop-color'] = stopColor.toCSS(true);

7
src/svg/SvgImport.js
View file

@ -453,10 +453,9 @@ new function() {
offset: function(item, value) {
// http://www.w3.org/TR/SVG/pservers.html#StopElementOffsetAttribute
if (item.setRampPoint) {
var percentage = value.match(/(.*)%$/);
item.setRampPoint(percentage ? percentage[1] / 100
: parseFloat(value));
if (item.setOffset) {
var percent = value.match(/(.*)%$/);
item.setOffset(percent ? percent[1] / 100 : parseFloat(value));
}
},

11
test/tests/Color.js
View file

@ -224,14 +224,17 @@ test('Color#divide', function() {
});
test('Gradient', function() {
var stop1 = new GradientStop({ rampPoint: 0 });
var stop1 = new GradientStop({ offset: 0.5 });
var stop2 = new GradientStop('red', 0.75);
var stop3 = new GradientStop(['white', 1]);
var stop4 = new GradientStop({ rampPoint: 0.5 }); // deprecated
var gradient = new Gradient([stop1, stop2, stop3], true);
equals(function() { return stop1.color; }, new Color(0, 0, 0));
equals(function() { return stop2.color; }, new Color(1, 0, 0));
equals(function() { return stop3.color; }, new Color(1, 1, 1));
equals(function() { return stop1.rampPoint; }, 0);
equals(function() { return stop2.rampPoint; }, 0.75);
equals(function() { return stop3.rampPoint; }, 1);
equals(function() { return stop4.color; }, new Color(0, 0, 0));
equals(function() { return stop1.offset; }, 0.5);
equals(function() { return stop2.offset; }, 0.75);
equals(function() { return stop3.offset; }, 1);
equals(function() { return stop4.offset; }, 0.5);
});