30x30x30 - 経済統計練習帳

<!DOCTYPE html>
 
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">  
        <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
<script  src="jquery.js"></script>
<script  src="svgpaint.js"></script>
    <script  src="sample.js"></script>
    </head>
    <body onload="sample()">
 
 
        <p id="memo"></p> 
 
   <form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="card">
    <label class="mdl-textfield__label" for="card">T</label>
  </div>
  <div>  
  <input id="but" type="button" value="写真" />
  </div>
     <div>  
  <input id="but2" type="button" value="消去" />
  </div>
     <div>  
  <input id="but3" type="button" value="多角形" />
  </div>  
 <p id="point"></p>     
 </body>
</html>
 
var pic;
var x=new Array();
var y=new Array();
var number;
 
function sample() {
 
    $("#memo").click(function(e){
 
        number=number+1;
       x[number] = e.offsetX;
	y[number] = e.offsetY;
 
 
        paint();
 
        });
 
     $("#but2").click(function(){
 
        number=0;
 
 
        paint();
 
        });
 
    $("#but").click(function(){
 
       pic=$("#card").val();
 
       number=0;
 
       paint();
 
 
        });
 
 $("#but3").click(function(){
 
 
 
 
        paintx();
 
 
        var str="";
        for(s=1;s<number;s++){
        str=str+x[s]+","+y[s]+"E";    
        }
       str=str+x[number]+","+y[number];  
 
        $("#point").html(str);
 
 
        });
 
 
 
 
 }    
 
 function img(x,y,w,h,pic){
 
 str="<image x="+chop(x)+" y="+chop(y)+" width="+chop(w)+" height="+chop(h)+" xlink:href="+chop(pic)+"/>";
 
 return str;   
}
function chop(st){
 
strx="\""+st+"\"";    
 
return strx;
}
 
 
 
function paint(){
 
 var sub=new svgpaint();
 
str="<svg width=\"500\" height=\"500\">";
 
str=str+img(0,0,500,500,pic);   
for(s=1;s<number+1;s++){
str=str+sub.rect(x[s],y[s],5,5,"red");
}
 
str=str+"</svg>";
 
$("#memo").html(str);      
 
 
}
 function paintx(){
 
 var sub=new svgpaint();
 
str="<svg width=\"500\" height=\"500\">";
 
str=str+img(0,0,500,500,pic);   
 
for(s=1;s<number;s++){
str=str+sub.line(x[s],y[s],x[s+1],y[s+1],3,"red");
}
str=str+sub.line(x[number],y[number],x[1],y[1],3,"red");
 
str=str+"</svg>";
 
$("#memo").html(str);      
 
 
}