<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>
<div>
<input id="b2" type="button" value="reset" />
</div>
</body></html>
var x=new Array();
var y=new Array();
var number;
function sample(){
$("#but").click(function () {
strike();
});
$("#b2").click(function () {
re();
});
number=0;
var sub=new svgpaint();
str="<svg width=\"500\" height=\"500\">";
str=str+img("13.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 re(){
number=0;
}
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("13.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日 09:43
