Changes

Jump to: navigation, search

Talk:Canvas Snippets

1,542 bytes added, 20:01, 22 January 2018
Drag & Drop snippet: new section
need to add snippet showing use of checkboxes
 
== Drag & Drop snippet ==
 
<syntaxhighlight lang="nasal">
var (width,height) = (640,480);
var title = 'Canvas Drag & Drop demo';
 
# 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();
 
##############
 
# http://wiki.flightgear.org/Canvas_Event_Handling
var setupEventHandler = func(element) {
 
 
element.addEventListener("mouseover", func(event) {
 
var path = element.get('src');
# http://wiki.flightgear.org/Tooltips
gui.popupTip("Filename is:"~path);
 
 
}); # mouseover event handler
 
 
element.addEventListener("drag", func(event) {
element.setTranslation(event.clientX, event.clientY);
}); # drag event
 
}
 
var images = ['Splash1.png','Splash2.png','Splash3.png'];
 
var padding = 30;
var xOffset = padding;
var (width, height) = (150,150);
 
foreach(var img; images) {
 
# create an image child for the texture
var newImage = root.createChild("image")
.setFile("Textures/"~ img)
.setTranslation(xOffset, 10)
.setSize(width, height);
 
setupEventHandler(element: newImage);
 
xOffset += width + padding;
}
 
 
</syntaxhighlight>
18,328
edits

Navigation menu