20,741
edits
Talk:Canvas snippets: Difference between revisions
→Drag & Drop snippet: new section
(→checkbox snippet missing: new section) |
(→Drag & Drop snippet: new section) |
||
| Line 425: | Line 425: | ||
need to add snippet showing use of checkboxes | 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> | |||