scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-20 22:39:50 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'master' of github.com:scriptographer/paper.js

Browse source
This commit is contained in:
Jonathan Puckey 2011-05-19 15:41:34 +02:00
commit df15cf6970
6 changed files with 228 additions and 245 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
examples/Animated/AnimatedStar.html
View file

@ -28,10 +28,10 @@
}
path.smooth();
var placedSymbol = new PlacedSymbol(path);
placedSymbol.position = view.center;
layer.appendBottom(placedSymbol);
}
layer.position = view.center;
function onFrame(event) {
for (var i = 0, l = layer.children.length; i < l; i++) {
var item = layer.children[i];
@ -42,7 +42,7 @@
// Reposition the paths whenever the window is resized:
function onResize(event) {
project.activeLayer.position = view.center;
layer.position = view.center;
}
</script>
</head>

383
src/color/Color.js
View file

@ -15,6 +15,12 @@
*/
var Color = this.Color = Base.extend(new function() {
var components = {
gray: ['gray'],
rgb: ['red', 'green', 'blue'],
hsb: ['hue', 'saturation', 'brightness']
};
var colorCache = {},
colorContext;
@ -54,160 +60,8 @@ var Color = this.Color = Base.extend(new function() {
}
return RGBColor.read(rgb);
}
};
}
return {
beans: true,
_readNull: true,
initialize: function(arg) {
var isArray = Array.isArray(arg);
if (typeof arg === 'object' && !isArray) {
if (!this._colorType) {
// Called on the abstract Color class. Guess color type
// from arg
return arg.red !== undefined
? new RGBColor(arg.red, arg.green, arg.blue, arg.alpha)
: arg.gray !== undefined
? new GrayColor(arg.gray, arg.alpha)
: arg.hue !== undefined
? new HSBColor(arg.hue, arg.saturation, arg.brightness,
arg.alpha)
: new RGBColor(); // Fallback
} else {
// Called on a subclass instance. Return the converted
// color.
var color = Color.read(arguments, 0, 1);
return this._colorType
? color.convert(this._colorType)
: color;
}
} else if (typeof arg === 'string') {
var rgbColor = arg.match(/^#[0-9a-f]{3,6}$/i)
? hexToRGBColor(arg)
: nameToRGBColor(arg);
return this._colorType
? rgbColor.convert(this._colorType)
: rgbColor;
} else {
var components = isArray ? arg
: Array.prototype.slice.call(arguments);
if (!this._colorType) {
// Called on the abstract Color class. Guess color type
// from arg
//if (components.length >= 4)
// return new CMYKColor(components);
if (components.length >= 3)
return new RGBColor(components);
return new GrayColor(components);
} else {
// Called on a subclass instance. Just copy over
// components.
Base.each(this._components,
function(name, i) {
var value = components[i];
// TODO: Should we call the setter?
// this['set' + name.capitalize()]
this[name] = value !== undefined
? value
// TODO: Is this correct?
// Shouldn't alpha be set to -1?
: name === 'alpha' ? 1 : null;
},
this);
}
}
},
getType: function() {
return this._colorType;
},
getComponents: function() {
var l = this._components.length;
var components = new Array(l);
for (var i = 0; i < l; i++) {
components[i] = this['_' + this._components[i]];
}
return components;
},
/**
* A value between 0 and 1 that specifies the color's alpha value.
* All colors of the different subclasses support alpha values.
*/
getAlpha: function() {
return this._alpha != null ? this._alpha : 1;
},
setAlpha: function(alpha) {
this._alpha = Math.min(Math.max(alpha, 0), 1);
this._cssString = null;
},
/**
* Checks if the color has an alpha value.
*
* @return true if the color has an alpha value, false otherwise.
*/
hasAlpha: function() {
return this._alpha != null;
},
/**
* Checks if the component color values of the color are the
* same as those of the supplied one.
*
* @param obj the GrayColor to compare with
* @return true if the GrayColor is the same, false otherwise.
*/
equals: function(color) {
if (color && color._colorType === this._colorType) {
for (var i = 0, l = this._components.length; i < l; i++) {
var component = '_' + this._components[i];
if (this[component] !== color[component])
return false;
}
return true;
}
return false;
},
toString: function() {
var parts = [],
format = Base.formatNumber;
for (var i = 0, l = this._components.length; i < l; i++) {
var component = this._components[i],
value = this['_' + component];
if (component === 'alpha' && value == null)
value = 1;
parts.push(component + ': ' + format(value));
}
return '{ ' + parts.join(', ') + ' }';
},
toCssString: function() {
if (!this._cssString) {
var color = this._colorType === 'rgb'
? this
: this.convert('rgb');
var alpha = color.getAlpha();
var components = [
Math.round(color.getRed() * 255),
Math.round(color.getGreen() * 255),
Math.round(color.getBlue() * 255),
alpha != null ? this.alpha : 1
];
this._cssString = 'rgba(' + components.join(', ') + ')';
}
return this._cssString;
},
getCanvasStyle: function() {
return this.toCssString();
}
};
}, new function() {
var converters = {
'rgb-hsb': function(color) {
var r = color._red,
@ -270,13 +124,12 @@ var Color = this.Color = Base.extend(new function() {
},
'gray-rgb': function(color) {
var component = 1 - color.getGray();
return new RGBColor(component, component, component, color._alpha);
var comp = 1 - color.getGray();
return new RGBColor(comp, comp, comp, color._alpha);
},
'hsb-gray': function(color) {
var rgbColor = converters['hsb-rgb'](color);
return converters['rgb-gray'](rgbColor);
return converters['rgb-gray'](converters['hsb-rgb'](color));
},
'gray-hsb': function(color) {
@ -284,28 +137,120 @@ var Color = this.Color = Base.extend(new function() {
}
};
return {
var fields = {
beans: true,
_readNull: true,
initialize: function(arg) {
var isArray = Array.isArray(arg);
if (typeof arg === 'object' && !isArray) {
if (!this._colorType) {
// Called on the abstract Color class. Guess color type
// from arg
return arg.red !== undefined
? new RGBColor(arg.red, arg.green, arg.blue, arg.alpha)
: arg.gray !== undefined
? new GrayColor(arg.gray, arg.alpha)
: arg.hue !== undefined
? new HSBColor(arg.hue, arg.saturation, arg.brightness,
arg.alpha)
: new RGBColor(); // Fallback
} else {
// Called on a subclass instance. Return the converted
// color.
var color = Color.read(arguments, 0, 1);
return this._colorType
? color.convert(this._colorType)
: color;
}
} else if (typeof arg === 'string') {
var rgbColor = arg.match(/^#[0-9a-f]{3,6}$/i)
? hexToRGBColor(arg)
: nameToRGBColor(arg);
return this._colorType
? rgbColor.convert(this._colorType)
: rgbColor;
} else {
var components = isArray ? arg
: Array.prototype.slice.call(arguments);
if (!this._colorType) {
// Called on the abstract Color class. Guess color type
// from arg
//if (components.length >= 4)
// return new CMYKColor(components);
if (components.length >= 3)
return new RGBColor(components);
return new GrayColor(components);
} else {
// Called on a subclass instance. Just copy over
// components.
Base.each(this._components,
function(name, i) {
var value = components[i];
// TODO: Should we call the setter?
// this['set' + name.capitalize()]
this[name] = value !== undefined
? value
// TODO: Is this correct?
// Shouldn't alpha be set to -1?
: name === 'alpha' ? 1 : null;
},
this);
}
}
},
convert: function(type) {
return this._colorType == type
? this
: converters[this._colorType + '-' + type](this);
},
statics: {
/**
* Override Color.extend() to produce getters and setters based
* on the component types defined in _components.
*/
extend: function(src) {
src.beans = true;
if (src._colorType) {
var comps = components[src._colorType];
// Automatically produce the _components field, adding alpha
src._components = comps.concat(['alpha']);
Base.each(comps, function(name) {
var part = Base.capitalize(name),
name = '_' + name,
set = 'set' + part;
this['get' + part] = function() {
return this[name];
};
// Only define setters if they are not provided already
// in a specialy required version, e.g. hue.
if (!this[set]) {
this[set] = function(value) {
this[name] = Math.min(Math.max(value, 0), 1);
this._cssString = null;
return this;
};
}
}, src)
}
return this.base(src);
}
}
};
}, new function() {
// Injection scope to produce conversion methods for the various color
// components known by the possible color types. Requesting any of these
// components on any color internally converts the color to the required
// type and then returns its component, using bean access.
return Base.each({
rgb: ['red', 'green', 'blue'],
hsb: ['hue', 'saturation', 'brightness'],
gray: ['gray']
}, function(components, colorType) {
Base.each(components, function(component) {
this['get' + Base.capitalize(component)] = function() {
// Produce conversion methods for the various color components known by the
// possible color types. Requesting any of these components on any color
// internally converts the color to the required type and then returns its
// component, using bean access.
Base.each(components, function(comps, colorType) {
Base.each(comps, function(component) {
var part = Base.capitalize(component);
fields['get' + part] = function() {
return this.convert(colorType)[component];
};
this['set' + Base.capitalize(component)] = function(value) {
fields['set' + part] = function(value) {
var color = this.convert(colorType);
color[component] = value;
color = color.convert(this._colorType);
@ -313,6 +258,98 @@ var Color = this.Color = Base.extend(new function() {
this[this._components[i]] = color[this._components[i]];
}
};
}, this);
}, { beans: true });
});
});
return fields;
}, {
beans: true,
getType: function() {
return this._colorType;
},
getComponents: function() {
var length = this._components.length;
var comps = new Array(length);
for (var i = 0; i < length; i++)
comps[i] = this['_' + this._components[i]];
return comps;
},
/**
* A value between 0 and 1 that specifies the color's alpha value.
* All colors of the different subclasses support alpha values.
*/
getAlpha: function() {
return this._alpha != null ? this._alpha : 1;
},
setAlpha: function(alpha) {
this._alpha = Math.min(Math.max(alpha, 0), 1);
this._cssString = null;
return this;
},
/**
* Checks if the color has an alpha value.
*
* @return true if the color has an alpha value, false otherwise.
*/
hasAlpha: function() {
return this._alpha != null;
},
/**
* Checks if the component color values of the color are the
* same as those of the supplied one.
*
* @param obj the GrayColor to compare with
* @return true if the GrayColor is the same, false otherwise.
*/
equals: function(color) {
if (color && color._colorType === this._colorType) {
for (var i = 0, l = this._components.length; i < l; i++) {
var component = '_' + this._components[i];
if (this[component] !== color[component])
return false;
}
return true;
}
return false;
},
toString: function() {
var parts = [],
format = Base.formatNumber;
for (var i = 0, l = this._components.length; i < l; i++) {
var component = this._components[i],
value = this['_' + component];
if (component === 'alpha' && value == null)
value = 1;
parts.push(component + ': ' + format(value));
}
return '{ ' + parts.join(', ') + ' }';
},
toCssString: function() {
if (!this._cssString) {
var color = this._colorType === 'rgb'
? this
: this.convert('rgb');
var alpha = color.getAlpha();
var components = [
Math.round(color.getRed() * 255),
Math.round(color.getGreen() * 255),
Math.round(color.getBlue() * 255),
alpha != null ? this.alpha : 1
];
this._cssString = 'rgba(' + components.join(', ') + ')';
}
return this._cssString;
},
getCanvasStyle: function() {
return this.toCssString();
}
});

19
src/color/GrayColor.js
View file

@ -15,22 +15,5 @@
*/
var GrayColor = this.GrayColor = Color.extend({
beans: true,
_colorType: 'gray',
_components: ['gray', 'alpha'],
/**
* A value between 0 and 1 that specifies the amount of gray in the gray
* color.
*/
getGray: function() {
return this._gray;
},
setGray: function(value) {
this._cssString = null;
this._gray = Math.min(Math.max(value, 0), 1);
return this;
}
_colorType: 'gray'
});

41
src/color/HSBColor.js
View file

@ -14,35 +14,16 @@
* All rights reserved.
*/
var HSBColor = this.HSBColor = Color.extend(new function() {
var components = ['hue', 'saturation', 'brightness', 'alpha'];
return Base.each(components, function(name) {
var internalName = '_' + name;
name = Base.capitalize(name);
if (name !== 'alpha') {
this['get' + name] = function() {
return this[internalName];
};
// Avoid overriding setHue:
if (!this['set' + name]) {
this['set' + name] = function(value) {
this._cssString = null;
this[internalName] = Math.min(Math.max(value, 0), 1);
return this;
};
}
}
}, {
beans: true,
_colorType: 'hsb',
_components: components,
var HSBColor = this.HSBColor = Color.extend({
_colorType: 'hsb',
setHue: function(hue) {
if (hue < 0)
hue = 360 + hue;
this._cssString = null;
this._hue = hue % 360;
return this;
}
});
// Hue needs a special setter, bug getter is produced for it in Color.extend
// No need to set beans: true here since Color.extend() does that for us.
setHue: function(hue) {
if (hue < 0)
hue = 360 + hue;
this._cssString = null;
this._hue = hue % 360;
return this;
}
});

22
src/color/RGBColor.js
View file

@ -14,24 +14,6 @@
* All rights reserved.
*/
var RGBColor = this.RGBColor = Color.extend(new function() {
var components = ['red', 'green', 'blue', 'alpha'];
return Base.each(components, function(name) {
var internalName = '_' + name;
name = Base.capitalize(name);
if (name !== 'alpha') {
this['get' + name] = function() {
return this[internalName];
};
this['set' + name] = function(value) {
this._cssString = null;
this[internalName] = Math.min(Math.max(value, 0), 1);
return this;
};
}
}, {
beans: true,
_colorType: 'rgb',
_components: components
});
var RGBColor = this.RGBColor = Color.extend({
_colorType: 'rgb'
});

2
src/path/Path.js
View file

@ -1102,7 +1102,7 @@ var Path = this.Path = PathItem.extend({
*/
getStrokeBounds: function(/* matrix */) {
if (!this._style._strokeColor || !this._style._strokeWidth)
return this.getBounds();
return this.getBounds.apply(this, arguments);
var useCache = arguments.length == 0;
if (this._strokeBounds && useCache)
return this._strokeBounds;