20,741
edits
Canvas snippets: Difference between revisions
Jump to navigation
Jump to search
→Adding Vector Images
| Line 148: | Line 148: | ||
! Screenshot !! Code | ! Screenshot !! Code | ||
|- | |- | ||
| [[ | | [[File:Canvas-svg-support.png|thumb|screen shot demonstrating how the scripted Nasal-based SVG parser can be used to dynamically turn SVG files into OpenVG instructions understood by Canvas]] | ||
| {{Note|This assumes that you already have a top-level root group set up, and named it '''root'''.}} | | {{Note|This assumes that you already have a top-level root group set up, and named it '''root'''.}} | ||
<syntaxhighlight lang="nasal" enclose="div"> | <syntaxhighlight lang="nasal" enclose="div"> | ||
# change the background color | |||
myCanvas.set("background", "#ffaac0"); | |||
# creating the top-level/root group which will contain all other elements/group | |||
var root = myCanvas.createGroup(); | |||
var filename = "/Nasal/canvas/map/Images/boeingAirplane.svg"; | var filename = "/Nasal/canvas/map/Images/boeingAirplane.svg"; | ||
var svg_symbol = root.createChild('group'); | var svg_symbol = root.createChild('group'); | ||
canvas.parsesvg(svg_symbol, filename); | canvas.parsesvg(svg_symbol, filename); | ||
svg_symbol.setTranslation(width/2,height/2); | |||
#svg_symbol.setScale(0.2); | #svg_symbol.setScale(0.2); | ||
#svg_symbol.setRotation(radians) | #svg_symbol.setRotation(radians) | ||
</syntaxhighlight> | </syntaxhighlight> | ||