Ik had een korte vraagje.
Ik zocht op het internet over hoe ik een clickable item kon maken in een canvas, kan er namelijk nix in toevoegen.
In mijn canvas wil ik een menu lijst onder elkaar zoals de bovenstaande url.
Heb wat antwoorden gevonden maar kwam er niet uit was niet volgens mijn wensen en kon het niet veranderen in iets anders.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IIS7</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
// the document to load....in this case a simple JSON Object
var jsonDocument =
[
{
"type": "draw2d.shape.basic.Rectangle",
"id": "354fa3b9-a834-0221-2009-abc2d6bd852a",
"x": 225,
"y": 97,
"width": 201,
"height": 82,
"radius": 2,
"bgColor": {"red":0, "green":255, "blue":0}
},
{
"type": "draw2d.shape.basic.Rectangle",
"id": "354fa3b9-a834-0221-2009-abc2d6bd852a",
"x": 225,
"y": 197,
"width": 201,
"height": 82,
"radius": 2,
"bgColor": {"red":0, "green":255, "blue":0}
},
{
"type": "draw2d.shape.basic.Rectangle",
"id": "354fa3b9-a834-0221-2009-abc2d6bd852a",
"x": 225,
"y": 297,
"width": 201,
"height": 82,
"radius": 2,
"bgColor": {"red":0, "green":255, "blue":0}
},
{
"type": "draw2d.shape.basic.Rectangle",
"id": "354fa3b9-a834-0221-2009-abc2d6bd852a",
"x": 225,
"y": 397,
"width": 201,
"height": 82,
"radius": 2,
"bgColor": {"red":0, "green":255, "blue":0}
}
,
{
"type": "draw2d.shape.basic.Rectangle",
"id": "354fa3b9-a834-0221-2009-abc2d6bd852a",
"x": 225,
"y": 497,
"width": 201,
"height": 82,
"radius": 2,
"bgColor": {"red":0, "green":255, "blue":0}
}
];
$(window).load(function () {
// create the canvas for the user interaction
//
var canvas = new draw2d.Canvas("gfx_holder");
// unmarshal the JSON document into the canvas
// (load)
var reader = new draw2d.io.json.Reader();
reader.unmarshal(canvas, jsonDocument);
// display the JSON document in the preview DIV
//
displayJSON(canvas);
// add an event listener to the Canvas for change notifications.
// We just dump the current canvas document into the DIV
//
canvas.getCommandStack().addEventListener(function(e){
if(e.isPostChangeEvent()){
displayJSON(canvas);
}
});
});
function displayJSON(canvas){
var writer = new draw2d.io.json.Writer();
writer.marshal(canvas,function(json){
$("#json").text(JSON.stringify(json, null, 2));
});
}
</script>
</head>
<body>
<b>Nodes</b>
<br>
<div class="scrollbar" id="ex3">
<div class="content"> <canvas id="NodeList" style="border:2px solid black;" width="200" height="1400">
</canvas>
</div>
</div>
</div>
</body>
</html>
het script probeerde ik te runnen maar lukte ook niet
Heeft iemand een enig idee hoe ik verder kan ???
Of een tip dat mij verder helpt ?