Pfad exportieren in XML

[shredding]

Ich bastele ja gerade an einer Weltkarte (Flash)

Da würde ich gerne die Karte entlang eines Pfades animieren. Da das aus verschiedenen Gründen mit Actionscript gemacht wird (Interaktivität, Dynamik, wer mit der Timeline arbeitet hört auch Pur), dachte ich eigentlich es gäbe eine Tween Bibliothek, mit der man einfach einen Pfad als SVG einliest und gut ist.

Scheinbar ist dem nicht so.

Wie dem auch sei, ich arbeite jetzt mit LinePath2D aus der TweenLite Bibliothek, die als Parameter beliebig viele Punkte übernimmt. Das funktioniert auch alles sehr gut.

Jetzt habe ich eine Illustrator Datei mit einem Pfad mit sehr vielen Punkten, die ich nicht von Hand eingeben möchte. Ich werde aber aus dem SVG Export nicht schlau.

Wie würdet ihr das machen? Ich kann mir auch einen Parser schreiben, wenn ich denn NUR die Punkte aus der Datei kriege.

Toll wäre sowas:

<path>
   <point x="123" y="456"/>
   <!-- weitere Punkte -->
</path>

Jemand eine idee / Best practise?

Danke.

[Martin Kraft]

Wenn Du dem SVG Standard entsprechen möchtest, ist sowas ja definiert.

Sollte es Dir nur darum gehen, eine möglichst einfach zu handhabende Punktmenge zu speichern, würde ich (allein aus Gründen der Dateigröße) so eine Art csv-Format verwenden (das man natürlich auch in einem XML kapseln kann):

123,456 123,400 256,186 123,856 ...

Das liese sich dann in AS3 so auslesen:

PHP-Code:

import flash.geom.Point;

var pointArray:Array = pointStr.split[" "];
var coordArray:Array;
var points:Array = [];

for each(var str:String in pointArray){
  coordArray = str.split(",");
  if(coordArray .length>1) points.push( new Point(coordArray[0], coordArray[1]) );
} 


SVG macht das übrigens auch so:

Zitat von SVG Export aus Illustrator CS4

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<polyline fill="#FFFFFF" stroke="#000000" points="236,124 197,309 367,454 412,573 367.416,600.865 292,648 176,555 139,446 130,353 114,246 151,149 333,182 395,214 419,324 326,409 258,495 281,556 401,661 404,691 320,723 156,690 "/>
</svg>

Du müsstest Dir also nur das entsprechende polyline-Node raussuchen und dort die Property points auslesen.

[shredding]

Ja, das ist mir im Prinzip egal, hauptsache maschinenlesbar. Ich habe allerdings bei Illustrator keine Möglichkeit CS4 als CSV zu speichern.

Irgendwie sind da auch immer Metadaten bei, die ich nicht wegkriege (-> wenig Erfahrung mit AI), wenn ich es als SVG speichere ...

Ich hab es mal angehängt, falls du zuuuufällig mal reinschauen möchtest

[shredding]

Ah, das hatte ich gar nicht gesehen bei mir.

Zu was sind die Sachen denn dann eigentlich relativ?

Ich hätte es gerne so, dass der erste Punkt bei (0,0) ist, dann kann ich selber den Offset berechen.

[Martin Kraft]

Zitat von shredding

Ich hätte es gerne so, dass der erste Punkt bei (0,0) ist, dann kann ich selber den Offset berechen.

Dann zieh doch einfach den ersten Punkt von allen anderen ab:

PHP-Code:

point = point.subtract(firstPoint); 


P.S.:

Zitat von shredding

wer mit der Timeline arbeitet hört auch Pur

[shredding]

So ganz verstehe ich es noch nicht.

Hier ein Extrakt aus meiner SVG oben:

<path fill="#C8E7EF" d="M414.473,333.875c0.036,0.103,1.828,5.96,2.39,5.982c0,0,1.205-0.923,3.609-1.36
			c2.363-0.43,2.85,1.476,2.85,1.476c0.943,3.503-1.385,15.677-2.525,16.952c-0.644,0.718-1.725,1.067-3.306,1.067
			c-0.668,0-1.331-0.063-1.891-0.139c-0.012,0.297-0.02,0.681-0.019,1.171c0.004,1.203-0.346,2.165-1.037,2.858
			c-1.26,1.263-3.217,1.358-6.058,1.358c-0.993,0-2.333-0.183-3.629-0.359c-1.089-0.148-2.323-0.316-3.063-0.316
			c-0.021,0-0.041,0-0.06,0c-0.604,1.705-1.631,8.777-2.033,11.55c-0.233,1.607-0.433,2.972-0.583,3.862
			c-0.676,3.976-3.848

Wo sind denn da genau die Punkte?

[Martin Kraft]

Zitat von shredding

Wo sind denn da genau die Punkte?

Im Attribute d des Nodes path. Da es sich hier aber offensichtlich um eine kubische Bezierkurve handelt ist die Syntax etwas komplexer.
Kann TweenLite überhaupt Bézierkurven verarbeiten?

[shredding]

Nein. Ich brauche aber auch nicht unbedingt die Bezier Kurve.

Ich hätte daher auch gerne die Informationen OHNE die Kurven, also nur die Punkte.

[Martin Kraft]

Zitat von shredding

Ich hätte daher auch gerne die Informationen OHNE die Kurven, also nur die Punkte.

Wenn Du Dir in Illustrator eine Linie ohne Kurven anlegst, sollte diese auch in dem polyline-Format ausgeben werden, das ich oben bescchrieben habe....

Um hingegen das vorliegende path-Format umzuwandeln bzw. auszudünnen, müsstest Du Dir eigentlich einen SVG-Interpreter schreiben, weil die Buchstaben zwischen den Koordinaten quasi relativen oder absoluten lineTo/curveTo-Befehlen entsprechen und man sie deshalb nicht einfach löschen kann.

[shredding]

Ich hab aber nur den Pfad mit Kurven.

Kann man da nix machen?

[Martin Kraft]

Zitat von shredding

Ich hab aber nur den Pfad mit Kurven.

Kann man da nix machen?

Du könntest z.B. den Pfad in Illustrator in grade Linien umwandeln:
Einfach unter »Object > Pfad > Vereinfachen« die CheckBox »gerade Linien« auswählen.

[shredding]

Jetzt sieht es so aus:

<path fill="#C8E7EF" d="M414.473,333.875l2.39,5.982l3.609-1.36l2.85,1.476l-2.525,16.952l-3.306,1.067l-1.891-0.139l-0.019,1.171
			l-1.037,2.858l-6.058,1.358l-3.629-0.359l-3.063-0.316l-0.06,0l-2.033,11.55l-0.583,3.862l-6.45,15.798l-5.494,4.991l-0.349,0.156
			l-1.034-0.331l-0.194-0.316l-3.23-4.921l-1.72-0.397l-1.206,0.016l-1.572-0.144l-1.387-2.862l-0.21-1.71l-0.932-0.237
			l-5.066-0.797l-3.384-0.59l-0.229-0.003l-13.571,2.842l-0.405,0.112l-5.505,1.44l-1.988,0.213l-9.074-3.353l-2.809-1.56
			l-13.254-12.88l-12.167-12.196l-2.231-1.467l1.286,8.102l-18.335,8.464l-1.063,0.04l-11.186-3.823l-0.55-0.785l-3.66-7.123
			l-7.057-8.819l-8.65-10.323l-1.282-5.483l-0.485-2.62l-4.912-1.679l-2.165-0.074l-28.065-6.099l-11.923-7.056l-2.57,3.536
			l-14.828,2.825l-3.323,0.289l-5.513,0.43l-5.355-1.053l-2.953-18l14.867-18.234l14.81-2.255l1.4-0.029l0.72-1.452l0.555-1.161
			l-6.052-3.725l0.026-0.708l1.8-0.561l0.567,0.754l2.294,0.879l1.302,0.465l2.316,1.168l0.569,0.826l-0.212,1.367l-0.897,1.744
			l-1.959,2.76l-2.391,0.171l-13.652,1.95l-13.579,16.322l1.596,15.485l4.227,0.784l5.152-0.405l3.487-0.307l13.201-2.042
			l2.709-4.024l0.173-0.4l1.172-0.417l0.388,0.205l13.296,7.81l26.701,5.657l2.29,0.079l7.151,3.555l0.517,2.751l0.966,4.673
			l8.34,9.915l7.703,10.164l3.233,6.048l0.555,0.792l9.103,2.754l0.901-0.034l16.165-6.787l-2.443-9.495l-6.383-3.925l-0.713-0.433
			l0.771-2.014l0.817,0.15l3.757,0.341l2.266,1.549l1.456,2.613l5.233,3.359l12.541,12.524l12.573,12.366l2.872,1.593l7.883,3.037
			l1.442-0.153l5.363-1.405l14.725-3.044l0.19,0.001l3.981,0.673l4.456,0.714l2.715,1.014l0.896,3.522l-0.012,0.406l0.463,0.011
			l0.574-0.007l0.674-0.01l3.606,1.296l2.804,4.16l3.556-3.604l6.01-14.75l0.568-3.773l3.309-13.522l1.288-0.197l3.374,0.339
			l3.292,0.336l4.288-0.624l0.307-1.086l0.893-3.734l0.156-0.082l0.521-0.07l0.174,0.038l2.692,0.305l1.421-0.232l2.116-14.313
			l-4.298,1.948l-0.396,0.265l-1.278-0.395l-3.444-8.497l-0.089-0.588l1.078-1.125L414.473,333.875L414.473,333.875z
			 M416.664,340.011l3.912-1.529"/>

Also schon "punktueller", aber so richtig was machen kann ich damit noch nicht. Was ollen zb die Buchstaben zwischendrin?

[Martin Kraft]

Zitat von shredding

JAlso schon "punktueller", aber so richtig was machen kann ich damit noch nicht.

Kann das sein, dass diese ein Pfad mit Binnenformen oder mehreren Teilen ist?

Um eine polyline bzw. ein polygon zubekommen, darf das nur ein einzelner durchgehender Pfad sein. Etwas anderes kannst Du mit TweenLite, doch eh nicht verarbeiten, oder?

Zitat von shredding

JWas ollen zb die Buchstaben zwischendrin?

Den Link zur zugehörigen Referenz hab ich doch oben schon ein paar mal gepostet?!

[shredding]

Danke

Leider kenne ich mich mit Illustrator nicht aus.

Ich werde mich mal einlesen.

[thomas_E]

hier mal ein Parser auf die Schnelle:

var path:XML = <path fill="#C8E7EF" d="M414.473,333.875l2.39,5.982l3.609-1.36l2.85,1.476l-2.525,16.952l-3.306,1.067l-1.891-0.139l-0.019,1.171l-1.037,2.858l-6.058,1.358l-3.629-0.359l-3.063-0.316l-0.06,0l-2.033,11.55l-0.583,3.862l-6.45,15.798l-5.494,4.991l-0.349,0.156l-1.034-0.331l-0.194-0.316l-3.23-4.921l-1.72-0.397l-1.206,0.016l-1.572-0.144l-1.387-2.862l-0.21-1.71l-0.932-0.237l-5.066-0.797l-3.384-0.59l-0.229-0.003l-13.571,2.842l-0.405,0.112l-5.505,1.44l-1.988,0.213l-9.074-3.353l-2.809-1.56l-13.254-12.88l-12.167-12.196l-2.231-1.467l1.286,8.102l-18.335,8.464l-1.063,0.04l-11.186-3.823l-0.55-0.785l-3.66-7.123l-7.057-8.819l-8.65-10.323l-1.282-5.483l-0.485-2.62l-4.912-1.679l-2.165-0.074l-28.065-6.099l-11.923-7.056l-2.57,3.536l-14.828,2.825l-3.323,0.289l-5.513,0.43l-5.355-1.053l-2.953-18l14.867-18.234l14.81-2.255l1.4-0.029l0.72-1.452l0.555-1.161l-6.052-3.725l0.026-0.708l1.8-0.561l0.567,0.754l2.294,0.879l1.302,0.465l2.316,1.168l0.569,0.826l-0.212,1.367l-0.897,1.744l-1.959,2.76l-2.391,0.171l-13.652,1.95l-13.579,16.322l1.596,15.485l4.227,0.784l5.152-0.405l3.487-0.307l13.201-2.042l2.709-4.024l0.173-0.4l1.172-0.417l0.388,0.205l13.296,7.81l26.701,5.657l2.29,0.079l7.151,3.555l0.517,2.751l0.966,4.673l8.34,9.915l7.703,10.164l3.233,6.048l0.555,0.792l9.103,2.754l0.901-0.034l16.165-6.787l-2.443-9.495l-6.383-3.925l-0.713-0.433l0.771-2.014l0.817,0.15l3.757,0.341l2.266,1.549l1.456,2.613l5.233,3.359l12.541,12.524l12.573,12.366l2.872,1.593l7.883,3.037l1.442-0.153l5.363-1.405l14.725-3.044l0.19,0.001l3.981,0.673l4.456,0.714l2.715,1.014l0.896,3.522l-0.012,0.406l0.463,0.011l0.574-0.007l0.674-0.01l3.606,1.296l2.804,4.16l3.556-3.604l6.01-14.75l0.568-3.773l3.309-13.522l1.288-0.197l3.374,0.339l3.292,0.336l4.288-0.624l0.307-1.086l0.893-3.734l0.156-0.082l0.521-0.07l0.174,0.038l2.692,0.305l1.421-0.232l2.116-14.313l-4.298,1.948l-0.396,0.265l-1.278-0.395l-3.444-8.497l-0.089-0.588l1.078-1.125L414.473,333.875L414.473,333.875z M416.664,340.011l3.912-1.529"/>;
 
 
//var fillColor:int = parseInt(path.@fill.toString().replace('#', ''), 16);
var fillColor:int = parseInt(path.@fill.toString().replace(/^[^0-9A-F]+/i, ''), 16);
var g:Graphics = graphics;
    g.beginFill(fillColor);
 
/*
//V1
var commands:Array = parse2Commands(path.@d);
for each(var cmd:Array in commands){
    g[ cmd[0] ].apply(null, cmd[1]);    
}
*/
 
//V2
var dpCommands:Vector.<int> = new Vector.<int>();
var dpData:Vector.<Number> = new Vector.<Number>();
parse2DrawPath(path.@d, dpCommands, dpData);
g.drawPath(dpCommands, dpData);
g.drawPath(dpCommands, getOffsetData(dpData));
 
 
 
 
function getOffsetData(dpData:Vector.<Number>):Vector.<Number>
{
    const len:int = dpData.length;
    const d:Vector.<Number> = new Vector.<Number>();
    const ox:Number = dpData[0], oy:Number = dpData[1];
    for(var i:int = 0; i<len; ++i)
        d[i] = dpData[i] - (i&1? oy: ox);
    return d;
}
 
function parse2Commands(path:String):Array
{
    var commands:Array = [];
    path = path.replace(/[\r\n\t\s]/g, ",").replace(/([0-9])-/gi, "$1,-");
    
    var px:Number = 0, py:Number = 0, fp:Array;
    var d:Object, r:RegExp = new RegExp('([a-z])([0-9.,+-]+)', "gi");
    while(d = r.exec(path)){
        var p:Array = d[2].split(',');
        var cmd:String = d[1];
        var relative:Boolean = (cmd != (cmd = cmd.toUpperCase()));
        
        for(var i:int = p.length; i--; )
            p[i] = parseFloat(p[i]) + (relative? (i&1? py: px): 0);
        
        switch(cmd){
            case "M":
                commands.push(["moveTo", p]);
                fp = p;
                break;
            
            case "L":
                commands.push(["lineTo", p]);
                break;
                
            case "H":
                p.push(py);
                commands.push(["lineTo", p]);
                break;
                
            case "V":
                p.unshift(px);
                commands.push(["lineTo", p]);
                break;
                
            case "Z":
                commands.push(["lineTo", fp]);
                p = fp;
                break;
                
            case "Q":
                commands.push(["curveTo", p]);
                px = p[2];  py = p[3];
                continue;
            
            default:
                continue;
        }
        
        px = p[0];
        py = p[1];
    }
    
    return commands;
}
 
 
function parse2DrawPath(path:String, dpCommands:Vector.<int>, dpData:Vector.<Number>):void
{
    //ersetzt Whitespaces, und ergänzt fehlende Kommas von negativen Vorzeichen
    path = path.replace(/[\r\n\t\s]/g, ",").replace(/([0-9])-/gi, "$1,-");
    
    var px:Number = 0, py:Number = 0, fp:Array;
    var d:Object, r:RegExp = new RegExp('([a-z])([0-9.,+-]+)', "gi");
    while(d = r.exec(path)){
        var p:Array = d[2].split(',');
        var cmd:String = d[1];
        var relative:Boolean = (cmd != (cmd = cmd.toUpperCase()));
        
        for(var i:int = p.length; i--; )
            p[i] = parseFloat(p[i]) + (relative? (i&1? py: px): 0);
        
        switch(cmd){
            //moveTo
            case "M":   dpCommands.push(1);    dpData.push(p[0], p[1]);
                fp = p;
                break;
                
            //lineTo
            case "L":   dpCommands.push(2);    dpData.push(p[0], p[1]);    break;
                
            case "H":   dpCommands.push(2);    dpData.push(p[0], py);
                px = p[0];
                continue;
                
            case "V":   dpCommands.push(2);    dpData.push(px, p[0]);
                py = p[0];
                continue;
                
            //Quadratic Bezier
            case "Q":   dpCommands.push(3);    dpData.push(p[0], p[1], p[2], p[3]);
                px = p[2];  py = p[3];
                continue;
            
            //close Path
            case "Z":
                dpCommands.push(0); dpData.push(fp[0], fp[1]);
                p = fp;
                break;
            
            default:
                continue;
        }
        
        px = p[0];
        py = p[1];
    }
} 

hier hab ich schon zwei Varianten implementiert, wie du das weiter ausgeben könntest, was genau du machst, musst du wissen.

ach noch was:
1. ich bin mir fast sicher, dass du nur den eigentlichen Pfad möchtest, und nicht dessen Outline.
2. dieser sollte nicht mehr als eine moveTo-Anweisung haben