Add support for conversion of text-anchor to justification.

This commit is contained in:
Jürg Lehni 2012-11-02 21:11:30 -07:00
parent 81f8c32d7b
commit 4cd6d6f230
2 changed files with 40 additions and 16 deletions

View file

@ -40,7 +40,7 @@
<path d="m 100 350 Q 200 50 200 350 T 300 350 t 50 0" stroke="black" stroke-width="4px" fill="none" />
<path d="m 100 350 Q 200 50 200 350 T 300 350 T 350 350" stroke="black" stroke-width="4px" fill="none" />
<path d="M 50 75 c 25 -50 25 -50 100 0 s 100 100 100 0 s 25 -50 100 0" stroke="blue" stroke-width="4px" fill="none"/>
<text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text">I love SVG</text>
<text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text" text-anchor="start">I love SVG</text>
</svg>
<canvas id="canvas" width="500px" height="1000px"></canvas>
</body>

View file

@ -105,9 +105,6 @@ var SvgImporter = this.SvgImporter = new function() {
},
text: function(svg) {
var bottomLeft = getPoint(svg, 'x', 'y', 0),
textLength = getValue(svg, 'textLength'),
delta = getPoint(svg, 'dx', 'dy', 0);
// Not supported by Paper.js
// x: multiple values for x
// y: multiple values for y
@ -115,8 +112,8 @@ var SvgImporter = this.SvgImporter = new function() {
// dy: multiple values for y
// rotate: character rotation
// lengthAdjust:
var point = bottomLeft.add(delta).subtract(textLength / 2, 0);
var text = new PointText(point);
var text = new PointText(getPoint(svg, 'x', 'y', 0)
.add(getPoint(svg, 'dx', 'dy', 0)));
text.content = svg.textContent || '';
return text;
},
@ -298,18 +295,10 @@ var SvgImporter = this.SvgImporter = new function() {
item.setVisibility(value === 'visible');
break;
case 'font':
var text = document.createElement('span');
text.style.font = value;
for (var i = 0; i < text.style.length; i++) {
var n = text.style[i];
applyAttributeOrStyle(svg, item, n, text.style[n]);
}
break;
case 'font-family':
item.setFont(value.split(',')[0].replace(/^\s+|\s+$/g, ""));
break;
case 'font-size':
item.setFontSize(parseFloat(value, 10));
case 'text-anchor':
applyTextStyle(svg, item, name, value);
break;
default:
// Not supported yet.
@ -317,6 +306,41 @@ var SvgImporter = this.SvgImporter = new function() {
}
}
function applyTextStyle(svg, item, name, value) {
if (item instanceof TextItem) {
switch (name) {
case 'font':
var text = document.createElement('span');
text.style.font = value;
for (var i = 0; i < text.style.length; i++) {
var n = text.style[i];
applyAttributeOrStyle(svg, item, n, text.style[n]);
}
break;
case 'font-family':
item.setFont(value.split(',')[0].replace(/^\s+|\s+$/g, ""));
break;
case 'font-size':
item.setFontSize(parseFloat(value, 10));
break;
case 'text-anchor':
item.setJustification({
start: 'left',
middle: 'center',
end: 'right'
}[value]);
break;
}
} else if (item instanceof Group) {
// Text styles need to be recursively passed down to children that
// might be TextItems explicitely.
var children = item._children;
for (var i = 0, l = children.length; i < l; i++) {
applyTextStyle(svg, children[i], name, value);
}
}
}
/**
* Applies the transformations specified on the SVG node to a Paper.js item
*