20,741
edits
FlightGear Newsletter April 2015: Difference between revisions
Jump to navigation
Jump to search
m
→In the hangar
m (→In the hangar) |
|||
| Line 117: | Line 117: | ||
|- | |- | ||
| [[File:Be for SVG Transparent.png|400px|Before patches]] || [[File:After SVG Transparent.png|400px|After patches]] | | [[File:Be for SVG Transparent.png|400px|Before patches]] || [[File:After SVG Transparent.png|400px|After patches]] | ||
|} | |||
=== Nasal & Canvas 101: Loading SVG Images === | |||
{| class="wikitable" | |||
|- | |||
! 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'''.}} | |||
<syntaxhighlight lang="nasal" enclose="div"> | |||
var (width,height) = (320,160); | |||
var title = 'My new Window'; | |||
# create a new window, dimensions are WIDTH x HEIGHT, using the dialog decoration (i.e. titlebar) | |||
var window = canvas.Window.new([width,height],"dialog") | |||
.set('title',title); | |||
# adding a canvas to the new window and setting up background colors/transparency | |||
var myCanvas = window.createCanvas().set("background", canvas.style.getColor("bg_color")); | |||
# Using specific css colors would also be possible: | |||
# myCanvas.set("background", "#ffaac0"); | |||
# creating the top-level/root group which will contain all other elements/group | |||
var root = myCanvas.createGroup(); | |||
# 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 svg_symbol = root.createChild('group'); | |||
canvas.parsesvg(svg_symbol, filename); | |||
svg_symbol.setTranslation(width/2,height/2); | |||
#svg_symbol.setScale(0.2); | |||
#svg_symbol.setRotation(radians) | |||
</syntaxhighlight> | |||
|- | |||
|} | |} | ||