Canvas snippets: Difference between revisions

Jump to navigation Jump to search
Line 231: Line 231:
! 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]]  
| [[File:Canvas-SymbolCache-Instancing.png|thumb|Screen shot showing a Canvas based GUI dialog that is using the SymbolCache for instancing multiple symbols (including support for styling)]]  
| {{Caution|This is currently untested code}}
| {{Caution|This is currently untested code}}
<syntaxhighlight lang="nasal" enclose="div">
<syntaxhighlight lang="nasal" enclose="div">
##
##
# this is the function that draws a symbol using OpenVG paths
# this is the function that draws a symbol using OpenVG paths
Line 258: Line 259:


# create a new cache entry for the styled symbol
# create a new cache entry for the styled symbol
var myCachedSymbol = StyleableCacheable.new(
var myCachedSymbol = canvas.StyleableCacheable.new(
     name:'myVOR', draw_func: drawVOR,
     name:'myVOR', draw_func: drawVOR,
     cache: canvas.SymbolCache32x32, # the cache to be used
     cache: canvas.SymbolCache32x32, # the cache to be used
     draw_mode: SymbolCache.DRAW_CENTERED,
     draw_mode: canvas.SymbolCache.DRAW_CENTERED,
     relevant_keys: ['line_width', 'color'], # styling related attributes
     relevant_keys: ['line_width', 'color'], # styling related attributes
);
);


var target = root.createChild('group');
var target = root.createChild('group');
var offset=50;
var x=0;
var y=height/2;
for (var i=0;i<5;i+=1) {
# look up the raster image for the symbol
# look up the raster image for the symbol
# render it using the passed style and adjust scaling
# render it using the passed style and adjust scaling
var instanced = myCachedSymbol.render(target, style).setScale(0.3);
var instanced = myCachedSymbol.render(target, style).setScale(style.scale_factor).setTranslation(x+=offset,y)
 
}</syntaxhighlight>
</syntaxhighlight>
|-
|-
|}
|}

Navigation menu