Draw pictures with getCommandsFromString()

[rcbeuker]

The Sencha explorer demo shows a nice Draw example with logo's;

http://www.sencha.com/examples/#ExamplePlace:logos

 PathSprite senchaPath1 = new PathSprite();
    senchaPath1.setCommands(getCommandsFromString("M66.218,210.846l-6.824-3.421c-0.016-0.009-0.033-0.018-0.048-0.025"
        + "c-0.006-0.003-0.013-0.007-0.019-0.01c-0.01-0.005-0.017-0.009-0.028-0.015c-0.009-0.005-0.016-0.008-0.025-0.013"
        + "c-0.008-0.005-0.012-0.007-0.021-0.011c-0.009-0.005-0.018-0.01-0.027-0.014c-0.007-0.005-0.013-0.008-0.02-0.012"
        + "c-0.009-0.005-0.02-0.01-0.029-0.015c-0.006-0.003-0.007-0.004-0.014-0.007c-0.038-0.021-0.074-0.039-0.113-0.06"
        + "c-0.002-0.001-0.006-0.003-0.008-0.005c-0.013-0.006-0.023-0.011-0.035-0.018c-0.005-0.002-0.007-0.003-0.011-0.006"
        + "c-0.011-0.005-0.025-0.014-0.036-0.02c-0.004-0.002-0.005-0.002-0.009-0.004c-0.013-0.007-0.025-0.014-0.038-0.02l-0.003-0.002"
        + "c-29.686-15.598-51.36-44.362-57.28-78.53c5.306,1.575,10.887,2.541,16.665,2.804c1.084,0.05,2.161,0.075,3.235,0.075"
        + "c11.18-0.001,21.795-2.669,31.203-7.424C50.44,154.002,55.248,183.676,66.218,210.846"));
    senchaPath1.setFill(senchaGrad1);

This logo's are build with a sequence off command in the method getCommandsFromString(). I want to draw my own pictures this way, is there a way to convert vector graphics into this command sequence? (or the other way around; how are this logo's created?)

[Colin Alworth]

I will need to verify (I didn't write that sample), but I'm pretty sure this is a SVG path. The getCommandsFromString private method parses out this string as SVG would, and turns it into a PathSprite that can be drawn in either SVG or VML. This idea can be used to generate SVG paths in your preferred vector graphics program, and have them display consistently in all browsers.

This doesn't support full SVG xml, just the path spec. But yes, using this you can draw your own paths in a cross browser way. This would be especially handy for graphics that must be scalable, or are very simple to represent as SVG but need to draw large. Beyond that, you may find it easier to build an image file and display that in your app (either using ImageResource to process the file in your codebase, or with a String url from elsewhere in your app).