mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-03 19:45:44 -05:00
Implement PathStyle and Document#currentStyle.
This commit is contained in:
parent
9adb668d2a
commit
4000853c2f
3 changed files with 110 additions and 6 deletions
|
@ -1,4 +1,6 @@
|
||||||
Doc = Base.extend({
|
Doc = Base.extend({
|
||||||
|
beans: true,
|
||||||
|
|
||||||
initialize: function(canvas) {
|
initialize: function(canvas) {
|
||||||
if (canvas) {
|
if (canvas) {
|
||||||
this.canvas = canvas;
|
this.canvas = canvas;
|
||||||
|
@ -9,6 +11,15 @@ Doc = Base.extend({
|
||||||
this.activate();
|
this.activate();
|
||||||
this.layers = [];
|
this.layers = [];
|
||||||
this.activeLayer = new Layer();
|
this.activeLayer = new Layer();
|
||||||
|
this.currentStyle = null;
|
||||||
|
},
|
||||||
|
|
||||||
|
getCurrentStyle: function() {
|
||||||
|
return this._currentStyle;
|
||||||
|
},
|
||||||
|
|
||||||
|
setCurrentStyle: function(style) {
|
||||||
|
this._currentStyle = new PathStyle(this, style);
|
||||||
},
|
},
|
||||||
|
|
||||||
activate: function() {
|
activate: function() {
|
||||||
|
|
|
@ -2,8 +2,8 @@ Item = Base.extend({
|
||||||
beans: true,
|
beans: true,
|
||||||
|
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
this.parent = Paper.document.activeLayer;
|
Paper.document.activeLayer.appendTop(this);
|
||||||
this.parent.children.push(this);
|
this.style = this.document.currentStyle;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -448,9 +448,9 @@ Item = Base.extend({
|
||||||
* Default: ['objects', 'children']
|
* Default: ['objects', 'children']
|
||||||
*/
|
*/
|
||||||
transform: function(matrix, flags) {
|
transform: function(matrix, flags) {
|
||||||
|
// TODO: Walk DOM and call transform on chidren, depending on flags
|
||||||
// TODO: Handle flags, add TransformFlag class and convert to bit mask
|
// TODO: Handle flags, add TransformFlag class and convert to bit mask
|
||||||
// for quicker checking
|
// for quicker checking
|
||||||
// TODO: Call transform on chidren only if 'children' flag is provided
|
|
||||||
if (this.transformContent)
|
if (this.transformContent)
|
||||||
this.transformContent(matrix, flags);
|
this.transformContent(matrix, flags);
|
||||||
if (this.children) {
|
if (this.children) {
|
||||||
|
@ -544,5 +544,26 @@ Item = Base.extend({
|
||||||
shy = shx;
|
shy = shx;
|
||||||
}
|
}
|
||||||
this.transform(new Matrix().shear(shx, shy, center || this.position));
|
this.transform(new Matrix().shear(shx, shy, center || this.position));
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The path style of the item.
|
||||||
|
*
|
||||||
|
* Sample code:
|
||||||
|
* <code>
|
||||||
|
* var circle = new Path.Circle(new Point(10, 10), 10);
|
||||||
|
* circle.style = {
|
||||||
|
* fillColor: new RGBColor(1, 0, 0),
|
||||||
|
* strokeColor: new RGBColor(0, 1, 0),
|
||||||
|
* strokeWidth: 5
|
||||||
|
* };
|
||||||
|
* </code>
|
||||||
|
*/
|
||||||
|
getStyle: function() {
|
||||||
|
return this._style;
|
||||||
|
},
|
||||||
|
|
||||||
|
setStyle: function(style) {
|
||||||
|
this._style = new PathStyle(this, style);
|
||||||
}
|
}
|
||||||
});
|
});
|
72
src/item/PathStyle.js
Normal file
72
src/item/PathStyle.js
Normal file
|
@ -0,0 +1,72 @@
|
||||||
|
new function() {
|
||||||
|
var keys = ['windingRule', 'resolution', 'strokeColor',
|
||||||
|
'strokeWidth', 'strokeCap', 'strokeJoin', 'dashOffset','dashArray',
|
||||||
|
'miterLimit', 'strokeOverprint', 'fillColor', 'fillOverprint'];
|
||||||
|
|
||||||
|
PathStyle = Base.extend({
|
||||||
|
initialize: function(item, style) {
|
||||||
|
this.item = item;
|
||||||
|
if(style) {
|
||||||
|
for (var i = 0, l = keys.length; i < l; i++) {
|
||||||
|
var key = keys[i];
|
||||||
|
if(style[key])
|
||||||
|
this[key] = style[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_setChildrenStyle: function(name, value) {
|
||||||
|
for(var i = 0, l = this.item.children.length; i < l; i++) {
|
||||||
|
this.item.children[i].style[name] = value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_getChildrenStyle: function(name) {
|
||||||
|
var style;
|
||||||
|
for (var i = 0, l = this.item.children.length; i < l; i++) {
|
||||||
|
if(!style) {
|
||||||
|
style = this.item.children[i].style[name];
|
||||||
|
} else if(style != this.item.children[i].style[name]) {
|
||||||
|
// If there is another item with a different style:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return style;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var pathStyleProps = { beans: true };
|
||||||
|
var itemProps = { beans: true };
|
||||||
|
function addStyleBean(key) {
|
||||||
|
pathStyleProps['set' + key.capitalize()] = function(value) {
|
||||||
|
if(this.item && this.item.children) {
|
||||||
|
this._setChildrenStyle(key, value);
|
||||||
|
} else {
|
||||||
|
this['_' + key] = value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
pathStyleProps['get' + key.capitalize()] = function() {
|
||||||
|
if(this.item && this.item.children) {
|
||||||
|
return this._getChildrenStyle(key);
|
||||||
|
} else {
|
||||||
|
return this['_' + key];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
function addItemBean(key) {
|
||||||
|
itemProps['set' + key.capitalize()] = function(value) {
|
||||||
|
this.style[key] = value;
|
||||||
|
};
|
||||||
|
itemProps['get' + key.capitalize()] = function() {
|
||||||
|
return this.style[key];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
for (var i = 0, l = keys.length; i < l; i++) {
|
||||||
|
var key = keys[i];
|
||||||
|
addStyleBean(key);
|
||||||
|
addItemBean(key);
|
||||||
|
}
|
||||||
|
PathStyle.inject(pathStyleProps);
|
||||||
|
Item.inject(itemProps);
|
||||||
|
};
|
Loading…
Reference in a new issue