20,741
edits
Canvas SVG parser: Difference between revisions
Jump to navigation
Jump to search
m
add a more trivial example that doesn't have additional dependencies or requires more knowledge
m (add a more trivial example that doesn't have additional dependencies or requires more knowledge) |
|||
| Line 6: | Line 6: | ||
<!-- Integration-wise, there are some lessons to be learnt from the way SMIL works via SVG and ECMAScript (JavaScript). --> | <!-- Integration-wise, there are some lessons to be learnt from the way SMIL works via SVG and ECMAScript (JavaScript). --> | ||
== Hello World == | |||
[[File:Svgpre.png|thumb|Demonstrate how to preview SVG Images using Canvas]] | |||
Paste this into your [[Nasal Console]] and click run: | |||
<syntaxhighlight lang="nasal"> | |||
var CanvasApplication = { | |||
## | |||
# constructor | |||
new: func(x=300,y=200,file="/gui/dialogs/images/ndb_symbol.svg") { | |||
var m = { parents: [CanvasApplication] }; | |||
m.file=file; | |||
m.dlg = canvas.Window.new([x,y],"dialog"); | |||
# you can change the background color here | |||
var color = {WHITE:[1,1,1,1],BLACK:[0,0,0,1]}; | |||
m.canvas = m.dlg.createCanvas().setColorBackground(color.BLACK); | |||
m.root = m.canvas.createGroup(); | |||
m.update(); | |||
return m; | |||
}, | |||
update: func() { | |||
var svg_symbols = me.root.createChild("group", "navaid"); | |||
canvas.parsesvg(svg_symbols, me.file); | |||
svg_symbols.setScale(0.35); # resize the image so that it can be fully seen (35%) | |||
}, | |||
init: func() { | |||
var filename = "/Aircraft/Instruments/gyro.xml"; | |||
}, # init | |||
}; # end of CanvasApplication | |||
var SVGMapPreview= { | |||
new: func(x,y,svg) { | |||
var m = CanvasApplication.new(x:x, y:y, file:svg); | |||
return m; | |||
}, | |||
}; | |||
var preview= SVGMapPreview.new(x:400, y:400, svg:"Nasal/canvas/map/boeingND.svg"); | |||
print("SVGPreviewer loaded ...!"); | |||
</syntaxhighlight> | |||
== Basic example == | == Basic example == | ||