mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-07-07 02:04:04 -04:00
Add support for conversion of text-anchor to justification.
This commit is contained in:
parent
81f8c32d7b
commit
4cd6d6f230
2 changed files with 40 additions and 16 deletions
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
*
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue