Created
October 30, 2015 11:47
-
-
Save falkolab/1c7bb6858cbffb8c3cbc to your computer and use it in GitHub Desktop.
How to use SVG as autogenerated raster image
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var svgProductConfig = require('data/SVGProductConfig'); | |
Alloy.Globals.SVGProducts = require('SVGProduct').getProducts(svgProductConfig, true /*forceCache*/); | |
svgProductConfig = null; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"Window": { | |
backgroundRepeat: true, | |
backgroundImage : Alloy.Globals.SVGProducts.guestMenuHearts | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// app/lib/SVGProduct.js | |
function getImageFileFromSVG(svgOpts, name) { | |
var file = Ti.Filesystem.getFile(Ti.Filesystem.applicationCacheDirectory, | |
Ti.Utils.md5HexDigest(JSON.stringify(svgOpts))); | |
if (!file.exists()) { | |
var SVG = require('com.geraudbourdin.svgview'); | |
if (!file.write(SVG.createView(svgOpts).toImage())) { | |
Ti.API.error("Can't save to file. Product:", name); | |
return null; | |
} else { | |
Ti.API.debug('SVG product cached:', name); | |
} | |
} else { | |
Ti.API.debug('SVG product is already cached:', name); | |
} | |
return file.exists() ? file.getNativePath(): null; | |
} | |
exports.getProducts = function(config, forceCache) { | |
var product = {}; | |
_.each(config, function(opts, key) { | |
Object.defineProperty(product, key, { | |
get: _.partial(getImageFileFromSVG, opts, key) | |
}); | |
forceCache && product[key]; | |
}); | |
return product; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//app/lib/data/SVGProductConfig | |
module.exports = { | |
// place here your configurations | |
'guestMenuHearts': { | |
image : "/images/hearts_blue.svg", | |
width : 280, | |
height : 280, | |
top : 0, | |
left : 0 | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, @falkolab
Thanks for great work! It's very useful, but unfortunately it works fine on Android but doesn't work on iOs.
Images doesn't appear on my app.
May be I made something wrong... Could you help me?