94 lines
3.3 KiB
JavaScript
94 lines
3.3 KiB
JavaScript
|
var SVGParser = require('./core');
|
||
|
|
var Rectangle = require('../../shapes/rectangle');
|
||
|
|
var Ellipse = require('../../shapes/ellipse');
|
||
|
|
|
||
|
|
SVGParser.implement({
|
||
|
|
|
||
|
|
rectElement: function(element, styles){
|
||
|
|
var x = this.getLengthAttribute(element, styles, 'x', 'x'),
|
||
|
|
y = this.getLengthAttribute(element, styles, 'y', 'y'),
|
||
|
|
w = +this.getLengthAttribute(element, styles, 'width', 'x'),
|
||
|
|
h = +this.getLengthAttribute(element, styles, 'height', 'y'),
|
||
|
|
rx = this.getLengthAttribute(element, styles, 'rx', 'x'),
|
||
|
|
ry = this.getLengthAttribute(element, styles, 'ry', 'y'),
|
||
|
|
shape;
|
||
|
|
if (!w || !h) return null;
|
||
|
|
if (rx > w / 2) rx = w / 2;
|
||
|
|
if (ry > h / 2) ry = h / 2;
|
||
|
|
if (rx && ry && rx != ry){
|
||
|
|
shape = new this.MODE.Shape(
|
||
|
|
new this.MODE.Path()
|
||
|
|
.move(0, ry)
|
||
|
|
.arc(rx, -ry)
|
||
|
|
.line(w - rx - rx, 0)
|
||
|
|
.arc(rx, ry)
|
||
|
|
.line(0, h - ry - ry)
|
||
|
|
.arc(-rx, ry)
|
||
|
|
.line(-w + rx + rx, 0)
|
||
|
|
.arc(-rx, -ry)
|
||
|
|
.line(0, -h + ry + ry)
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
shape = new Rectangle(w, h, rx || ry);
|
||
|
|
}
|
||
|
|
this.shape(element, styles, shape, x, y);
|
||
|
|
return shape;
|
||
|
|
},
|
||
|
|
|
||
|
|
circleElement: function(element, styles){
|
||
|
|
var x = this.getLengthAttribute(element, styles, 'cx', 'x'),
|
||
|
|
y = this.getLengthAttribute(element, styles, 'cy', 'y'),
|
||
|
|
r = this.getLengthAttribute(element, styles, 'r'),
|
||
|
|
shape = new Ellipse(r * 2, r * 2);
|
||
|
|
if (r == 0) return null;
|
||
|
|
this.shape(element, styles, shape, x - r, y - r);
|
||
|
|
return shape;
|
||
|
|
},
|
||
|
|
|
||
|
|
ellipseElement: function(element, styles){
|
||
|
|
var x = this.getLengthAttribute(element, styles, 'cx', 'x'),
|
||
|
|
y = this.getLengthAttribute(element, styles, 'cy', 'y'),
|
||
|
|
rx = this.getLengthAttribute(element, styles, 'rx', 'x'),
|
||
|
|
ry = this.getLengthAttribute(element, styles, 'ry', 'y'),
|
||
|
|
shape = ry != 0 ? new Ellipse(rx * 2, ry * 2) : new this.MODE.Shape();
|
||
|
|
if (rx == 0 || ry == 0) return null;
|
||
|
|
this.shape(element, styles, shape, x - rx, y - ry);
|
||
|
|
return shape;
|
||
|
|
},
|
||
|
|
|
||
|
|
lineElement: function(element, styles){
|
||
|
|
var x1 = this.getLengthAttribute(element, styles, 'x1', 'x'),
|
||
|
|
y1 = this.getLengthAttribute(element, styles, 'y1', 'y'),
|
||
|
|
x2 = this.getLengthAttribute(element, styles, 'x2', 'x'),
|
||
|
|
y2 = this.getLengthAttribute(element, styles, 'y2', 'y'),
|
||
|
|
shape = new this.MODE.Shape(new this.MODE.Path().moveTo(x1, y1).lineTo(x2, y2));
|
||
|
|
if (x1 == x2 && y1 == y2) return null;
|
||
|
|
this.shape(element, styles, shape);
|
||
|
|
return shape;
|
||
|
|
},
|
||
|
|
|
||
|
|
parsePolypath: function(points){
|
||
|
|
if (!points) return new this.MODE.Path();
|
||
|
|
var pointMatcher = /([\-+]?(?:[\d\.]e[\-+]?|[^\s\-+,a-z])+)[\s\,]+([\-+]?(?:[\d\.]e[\-+]?|[^\s\-+,a-z])+)/ig,
|
||
|
|
first = true;
|
||
|
|
return new this.MODE.Path(points.replace(pointMatcher, function(match){
|
||
|
|
if (first){ first = false; return 'M' + match; }
|
||
|
|
return 'L' + match;
|
||
|
|
}));
|
||
|
|
},
|
||
|
|
|
||
|
|
polygonElement: function(element, styles){
|
||
|
|
var path = this.parsePolypath(element.getAttribute('points')),
|
||
|
|
shape = new this.MODE.Shape(path.close());
|
||
|
|
this.shape(element, styles, shape);
|
||
|
|
return shape;
|
||
|
|
},
|
||
|
|
|
||
|
|
polylineElement: function(element, styles){
|
||
|
|
var path = this.parsePolypath(element.getAttribute('points')),
|
||
|
|
shape = new this.MODE.Shape(path);
|
||
|
|
this.shape(element, styles, shape);
|
||
|
|
return shape;
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|