forked from dsqmoore/DrawJS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
executable file
·108 lines (91 loc) · 3.38 KB
/
test.html
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">
<title>DrawJS Feature Test</title>
<script type="text/javascript" src="mootools-core-1.3.js"></script>
<script type="text/javascript" src="mootools-more.js"></script>
<script type="text/javascript" src="draw.js"></script>
<script type="text/javascript" >
window.addEvent('domready',function(){
var width = 700, height = 500;
var canvas = new drawjs.Canvas('canvas');
canvas.setSize(width,height);
var background = new drawjs.Layer({system:true});
background.add(new drawjs.shape.Rect({
'fill':'#fff','width':width,'height':height,
}));
canvas.push(background);
canvas.add(new drawjs.Layer({name:'Layer 1'}));
window.myhistory = new drawjs.History();
var selection = new drawjs.Selection();
var styling = new drawjs.Styling(selection,myhistory);
window.clipboard = new drawjs.Clipboard(selection,canvas,myhistory);
window.toolset = new drawjs.Toolset(canvas,selection,myhistory,styling,[
drawjs.tool.Selector,
drawjs.tool.Pen,
drawjs.tool.Curves,
drawjs.tool.Rect,
drawjs.tool.Ellipse,
drawjs.tool.Text,
]);
toolset.setType('curves');
//keyboard shortcuts
var keyboard = new Keyboard({
defaultEventType: 'keydown',
events:{
'ctrl+z':function(){ myhistory.undo(); },
'ctrl+y':function(){ myhistory.redo(); },
'ctrl+x':function(){ clipboard.cut(); },
'ctrl+c':function(){ clipboard.copy(); },
'ctrl+v':function(){ clipboard.paste(); },
'delete':function(){ clipboard.hide(); }
}
});
Array.each(['lineWidth','stroke','fill'],function(type){
$('style-'+type).addEvent('change',function(){
styling.setStyle(type,this.value);
});
});
styling.addEvent('change',function(options){
Object.each(options,function(value,key){
if($('style-'+key))
$('style-'+key).set('value',value);
});
});
});
</script>
</head>
<body style="text-align:center;">
<h1>DrawJS Feature Test</h1>
<canvas style="border:#999 1px solid;" id="canvas" width="1" height="1" ></canvas>
<br />
<button type="button" onclick="toolset.setType('selector');" >Select</button>
<button type="button" onclick="toolset.setType('pen');" >Pencil</button>
<button type="button" onclick="toolset.setType('curves');" >Bézier Curves</button>
<button type="button" onclick="toolset.setType('rect');" >Rectangle</button>
<button type="button" onclick="toolset.setType('ellipse');" >Ellipse</button>
<br />
Line Width:
<select id="style-lineWidth">
<script type="text/javascript">
for(i=1;i<=10;i++){
document.write('<option value="'+i+'" '+(i==2?'selected="selected"':'')+'>'+i+'</option>');
}
</script>
</select>
Stroke:
<input type="text" id="style-stroke" value="#000" />
Fill:
<input type="text" id="style-fill" value="" />
<br />
<button type="button" onclick="myhistory.undo();" >Undo</button>
<button type="button" onclick="myhistory.redo();" >Redo</button>
<button type="button" onclick="clipboard.cut();" >Cut</button>
<button type="button" onclick="clipboard.copy();" >Copy</button>
<button type="button" onclick="clipboard.paste();" >Paste</button>
<button type="button" onclick="clipboard.hide();" >Delete</button>
</body>
</html>