mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-05 20:32:00 -05:00
More work on SvgStyles.
This commit is contained in:
Jürg Lehni
parent
03b94a92b5
commit
6211bc7ed6
4 changed files with 55 additions and 75 deletions
|
|
@ -347,11 +347,8 @@ var SvgExporter = this.SvgExporter = new function() {
|
|||
parent = item.getParent(),
|
||||
parentStyle = parent && parent._style;
|
||||
|
||||
if (item._id != null)
|
||||
attrs.id = item._id;
|
||||
// Same thing as stroke color except with the item name
|
||||
if (item._name != null)
|
||||
attrs.name = item._name;
|
||||
attrs.id = item._name;
|
||||
|
||||
Base.each(SvgStyles.properties, function(entry) {
|
||||
// Get a given style only if it differs from the value on the parent
|
||||
|
|
|
|||
|
|
@ -262,58 +262,44 @@ var SvgImporter = this.SvgImporter = new function() {
|
|||
function applyAttributeOrStyle(svg, item, name, value) {
|
||||
if (value == null)
|
||||
return;
|
||||
switch (name) {
|
||||
case 'id':
|
||||
item.setName(value);
|
||||
break;
|
||||
case 'fill':
|
||||
if (value !== 'none')
|
||||
item.setFillColor(value);
|
||||
break;
|
||||
case 'stroke':
|
||||
if (value !== 'none')
|
||||
item.setStrokeColor(value);
|
||||
break;
|
||||
case 'stroke-width':
|
||||
item.setStrokeWidth(parseFloat(value, 10));
|
||||
break;
|
||||
case 'stroke-linecap':
|
||||
item.setStrokeCap(value);
|
||||
break;
|
||||
case 'stroke-linejoin':
|
||||
item.setStrokeJoin(value);
|
||||
break;
|
||||
case 'stroke-dasharray':
|
||||
value = value.replace(/px/g, '').replace(/, /g, ',')
|
||||
.replace(/ /g, ',').split(',');
|
||||
for (var i = 0, l = value.length; i < l; i++)
|
||||
value[i] = parseFloat(value[i], 10);
|
||||
item.setDashArray(value);
|
||||
break;
|
||||
case 'stroke-dashoffset':
|
||||
item.setDashOffset(parseFloat(value, 10));
|
||||
break;
|
||||
case 'stroke-miterlimit':
|
||||
item.setMiterLimit(parseFloat(value, 10));
|
||||
break;
|
||||
case 'transform':
|
||||
applyTransform(svg, item);
|
||||
break;
|
||||
case 'opacity':
|
||||
item.setOpacity(parseFloat(value, 10));
|
||||
break;
|
||||
case 'visibility':
|
||||
item.setVisibility(value === 'visible');
|
||||
break;
|
||||
case 'font':
|
||||
case 'font-family':
|
||||
case 'font-size':
|
||||
case 'text-anchor':
|
||||
applyTextStyle(svg, item, name, value);
|
||||
break;
|
||||
default:
|
||||
// Not supported yet.
|
||||
break;
|
||||
if (value === 'none')
|
||||
value = null;
|
||||
var entry = SvgStyles.attributes[name];
|
||||
if (entry) {
|
||||
var style = item._style;
|
||||
if (entry.type === 'number') {
|
||||
value = parseFloat(value, 10);
|
||||
} else if (entry.type === 'array') {
|
||||
value = value.replace(/px/g, '').replace(/, /g, ',')
|
||||
.replace(/ /g, ',').split(',');
|
||||
for (var i = 0, l = value.length; i < l; i++)
|
||||
value[i] = parseFloat(value[i], 10);
|
||||
}
|
||||
style[entry.set](value);
|
||||
} else {
|
||||
switch (name) {
|
||||
case 'id':
|
||||
item.setName(value);
|
||||
break;
|
||||
case 'transform':
|
||||
applyTransform(svg, item);
|
||||
break;
|
||||
case 'opacity':
|
||||
item.setOpacity(parseFloat(value, 10));
|
||||
break;
|
||||
case 'visibility':
|
||||
item.setVisibility(value === 'visible');
|
||||
break;
|
||||
case 'font':
|
||||
case 'font-family':
|
||||
case 'font-size':
|
||||
case 'text-anchor':
|
||||
applyTextStyle(svg, item, name, value);
|
||||
break;
|
||||
default:
|
||||
// Not supported yet.
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,24 +15,20 @@
|
|||
*/
|
||||
|
||||
var SvgStyles = Base.each({
|
||||
fillColor: 'fill',
|
||||
strokeColor: 'stroke',
|
||||
strokeWidth: 'stroke-width',
|
||||
strokeCap: 'stroke-linecap',
|
||||
strokeJoin: 'stroke-linejoin',
|
||||
miterLimit: 'stroke-miterlimit',
|
||||
dashArray: 'stroke-dasharray',
|
||||
dashOffset: 'stroke-dashoffset'
|
||||
}, function(attr, prop) {
|
||||
var part = Base.capitalize(prop);
|
||||
this.attributes[attr] = this.properties[prop] = {
|
||||
type: /Color$/.test(prop)
|
||||
? 'color'
|
||||
: prop == 'dashArray'
|
||||
? 'array'
|
||||
: 'value',
|
||||
property: prop,
|
||||
attribute: attr,
|
||||
fillColor: ['fill', 'color'],
|
||||
strokeColor: ['stroke', 'color'],
|
||||
strokeWidth: ['stroke-width', 'number'],
|
||||
strokeCap: ['stroke-linecap', 'string'],
|
||||
strokeJoin: ['stroke-linejoin', 'string'],
|
||||
miterLimit: ['stroke-miterlimit', 'number'],
|
||||
dashArray: ['stroke-dasharray', 'array'],
|
||||
dashOffset: ['stroke-dashoffset', 'number']
|
||||
}, function(entry, key) {
|
||||
var part = Base.capitalize(key);
|
||||
this.attributes[entry[0]] = this.properties[key] = {
|
||||
type: entry[1],
|
||||
property: key,
|
||||
attribute: entry[0],
|
||||
get: 'get' + part,
|
||||
set: 'set' + part
|
||||
};
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@
|
|||
/**
|
||||
* To shrink code, we automatically replace the long SVGPathSeg and SVGTransform
|
||||
* constants with their actual numeric values on preprocessing time, using
|
||||
* *#=* statements. To do so, we need their values defined, which happens here.
|
||||
* prepro statements.
|
||||
* To do so, we need their values defined, which happens here.
|
||||
*/
|
||||
|
||||
// http://dxr.mozilla.org/mozilla-central/dom/interfaces/svg/nsIDOMSVGPathSeg.idl.html
|
||||
|
|
|
|||
Loading…
Reference in a new issue