<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Graphics Path Tool</title>
<style>
</style>
<link rel="stylesheet" href="../../build/cssreset/cssreset-min.css" type="text/css" charset="utf-8">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<style>
html {
background-color:#000;
}
body{
font-family:verdana;
font-size:78%;
}
#mygraphiccontainer {
position:absolute;
top:100px;
left:100px;
width:1000px;
height:480px;
background-color:#333;
}
#pencil {
position:absolute;
top:200px;
left:200px;
z-index:10;
cursor:pointer;
}
.control-point{
border:solid 1px #fff;
position:absolute;
top:0;
left:0;
z-index:11;
color:#fff;
visibility:hidden;
cursor:pointer;
}
.control-point:hover{
border:solid 1px #f00;
}
.control-point .drag-disc{
position:absolute;
top:-10px;
left:-10px;
width:20px;
height:20px;
background-color:#fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
filter:alpha(opacity=10);
opacity:0.1;
}
#pencil .pencil-img-container{
position:absolute;
top:-47px;
left:0px;
height:47px;
width:46px;
background-image:url(../assets/graphics/img/icon_pencil.png);
opacity:0.8;
filter:alpha(opacity=40);
}
#pencil .pencil-img-container-moving{
background-position:-46px, 0;
}
.pencil-xy{
margin: 0.3em;
width: 5em;
color: #ccc;
}
.obj-name{
width:100px;
}
.code-div{
position:absolute;
top: 10px;
right: 5px;
text-align:left;
}
#txt-code{
height:200px;
width:279px;
}
.code-div label{
color:#ccc;
}
.tips{
margin:1em;
color:#777;
}
.tips li,
.code-div li {
margin-bottom: 0.3em;
}
</style>
<ul class="tips">
<li>lineTo - Drag Pencil</li>
<li>moveTo - Shift + Drag</li>
<li>curveTo - Alt + Drag</li>
<li>New Path Object - Change 'Graphic Object Name', then click New button</li>
</ul>
<div id="mygraphiccontainer">
<div id="pencil">
<div class="pencil-img-container"></div>
</div>
<div class="control-point cp1"><div class="drag-disc"></div></div>
<div class="control-point cp2"><div class="drag-disc"></div></div>
</div>
<div class="code-div">
<ul>
<li>
<label>Graphic Object Name</label>
<input class="obj-name" type="text" value="bob"/>
<input type="button" value="New"/>
</li>
<li>
<label>Copy code from here</label>
</li>
<li>
<textarea id="txt-code" rows="8" cols="5000"></textarea>
</li>
<li>
<label>Pencil X,Y: </label> <span class="pencil-xy">200,200</span>
</li>
</ul>
</div>
</body>
<script src="../assets/graphics/js/path-tool.js"></script>
</html>