アットウィキロゴ

報告

<html>
<head>
<meta charset="utf-8">
<title>ヘクサス</title>
<script src="jquery.js"></script>
<script src="sample.js"></script>
<script src="mouse.js"></script>
<script src="svgpaint.js"></script>
</head>
<body onload="sample()">
<div id="memo"></div> 
<div id="report"></div>
<div>    
<input id="but" type="button" value="ハンドル" />
</div></body></html>
 
 
var x=new Array();
var y=new Array();
var number;
 
function sample(){
 
 $("#but").click(function () {
        strike();
    });
 
 
 
 
 
 number=0;
 
var sub=new svgpaint();
 
str="<svg width=\"500\" height=\"500\">";
str=str+img("12.jpg",0,0,500,500);
str=str+sub.rect(100,100,50,50,"green");
str=str+"</svg>";
$("#memo").html(str);
 
}
 
function strike(){
 
    str="";
    for(s=1;s<number;s++){
    str=str+x[s]+","+y[s]+"△";
    }
    s=number;
    str=str+x[s]+","+y[s];
 
   $("#report").html(str); 
 
} 
 
 
function img(im,x1,y1,w1,h1){
 
var str;
 
str="<image xlink:href=";
str=str+chop(im); 
str=str+"x="+chop(x1)+" ";
str=str+"y="+chop(y1)+" ";
str=str+"width="+chop(w1)+" ";
str=str+"height="+chop(h1);
str=str+"/>"
 
 
return str;
 
}
 
function chop(str){ 
 
var strx;
 
strx="\""+str+"\"";
 
return strx;
}
 
 
$(document).ready(function () {
    $("#memo").click(function (e) {
 
       var cx=e.offsetX;
var cy=e.offsetY;
 
       number=number+1;
       x[number]=cx;
        y[number]=cy;
 
var sub2=new svgpaint();
 
str="<svg width=\"500\" height=\"500\">";
str=str+img("12.jpg",0,0,500,500);
for(s=1;s<number+1;s++){
str=str+sub2.rect(x[s],y[s],5,5,"red");
}
 
for(s=1;s<number;s++){
str=str+sub2.line(x[s],y[s],x[s+1],y[s+1],2,"red");
}
str=str+"</svg>";
$("#memo").html(str);
 
 
 
    });
 
});
最終更新:2015年07月03日 04:47