Canvas
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.
http://tympanus.net/Development/OffCanvasMenuEffects/index.html
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!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>
<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 ?
