scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-07-22 19:58:52 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add support for conversion of text-anchor to justification.

Browse source
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

2
examples/SVG Import/Multiple Paths Test 1.html
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 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 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"/> <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> </svg>
<canvas id="canvas" width="500px" height="1000px"></canvas> <canvas id="canvas" width="500px" height="1000px"></canvas>
</body> </body>

54
src/svg/SvgImporter.js
View file

@ -105,9 +105,6 @@ var SvgImporter = this.SvgImporter = new function() {
}, },
text: function(svg) { 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 // Not supported by Paper.js
// x: multiple values for x // x: multiple values for x
// y: multiple values for y // y: multiple values for y
@ -115,8 +112,8 @@ var SvgImporter = this.SvgImporter = new function() {
// dy: multiple values for y // dy: multiple values for y
// rotate: character rotation // rotate: character rotation
// lengthAdjust: // lengthAdjust:
var point = bottomLeft.add(delta).subtract(textLength / 2, 0); var text = new PointText(getPoint(svg, 'x', 'y', 0)
var text = new PointText(point); .add(getPoint(svg, 'dx', 'dy', 0)));
text.content = svg.textContent || ''; text.content = svg.textContent || '';
return text; return text;
}, },
@ -298,18 +295,10 @@ var SvgImporter = this.SvgImporter = new function() {
item.setVisibility(value === 'visible'); item.setVisibility(value === 'visible');
break; break;
case 'font': 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': case 'font-family':
item.setFont(value.split(',')[0].replace(/^\s+|\s+$/g, ""));
break;
case 'font-size': case 'font-size':
item.setFontSize(parseFloat(value, 10)); case 'text-anchor':
applyTextStyle(svg, item, name, value);
break; break;
default: default:
// Not supported yet. // 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 * Applies the transformations specified on the SVG node to a Paper.js item
* *