使い方
まず、「円を追加」「楕円を追加」「四角を追加」のいずれかのボタンを押します。
押すたびに上の画像枠に図形が追加され、下に緑の「円1」などのボタンが追加されます。
図形を追加した時点で、位置・サイズ・色はランダムで決められますが、黄緑のボタンを押すとその下にスライドバーやカラーパレットが現れ、その図形のパラメータを調節できます。
また、「SVGコードを取得する」ボタンを押すと、その下にリアルタイムに現在の画像データとなるSVGのコードが表示されるようになります。
…なんていう感じの
ものを考えているのですが、本当は一番作りたい「線」（pathタグ）がまだ全然手付かずです^^;
たくさんの「図形」は今回のバージョンでも扱う事ができますが、「線」は更にその中に複数の「点」をデータとして持つ必要があるので、どうしようかなー、と。
このツールのコードを表示する
<style><!--
.btnb{border-radius:5px;border:1px solid black;background-color:#aaffaa;padding:3px;}
--></style>
<div id="gamen"> </div>
<p><input id="btnccl" type="button" value="円を追加" /><input id="btnell" type="button" value="楕円を追加" /><input id="btnrct" type="button" value="四角を追加" /></p>
<div id="objbtn"> </div>
<div id="objctrl"> </div>
<div id="svgcb" style="border: 1px solid black; border-radius: 5px; padding: 0.6em; display: inline-block;">SVGコードを取得する</div>
<div id="gamenc" style="border: 1px solid black; border-radius: 5px; padding: 0.6em; display: none;"> </div>
<p>
<script>// <![CDATA[
class Svgccl{
constructor(cx,cy,r,sw,sc,fl){this.cx=cx;this.cy=cy;this.r=r;this.sw=sw;this.sc=sc;this.fl=fl;this.name='円'+objs.length;this.nameid='ccl';}
get svgtxt(){return '<circle cx="'+this.cx+'" cy="'+this.cy+'" r="'+this.r+'" fill="'+this.fl+'" stroke-width="'+this.sw+'" stroke="'+this.sc+'"></circle>';}
}
class Svgell{
constructor(cx,cy,rx,ry,sw,sc,fl){this.cx=cx;this.cy=cy;this.rx=rx;this.ry=ry;this.sw=sw;this.sc=sc;this.fl=fl;this.name='楕円'+objs.length;this.nameid='ell';}
get svgtxt(){return '<ellipse cx="'+this.cx+'" cy="'+this.cy+'" rx="'+this.rx+'" ry="'+this.ry+'" fill="'+this.fl+'" stroke-width="'+this.sw+'" stroke="'+this.sc+'"></ellipse>';}
}
class Svgrct{
constructor(x,y,w,h,sw,sc,fl){this.x=x;this.y=y;this.w=w;this.h=h;this.sw=sw;this.sc=sc;this.fl=fl;this.name='四角'+objs.length;this.nameid='rct';}
get svgtxt(){return '<rect x="'+this.x+'" y="'+this.y+'" width="'+this.w+'" height="'+this.h+'" fill="'+this.fl+'" stroke-width="'+this.sw+'" stroke="'+this.sc+'"></rect>';}
}
objs=[];
slct=0;
btnccl.addEventListener('click',addccl,false);
btnell.addEventListener('click',addell,false);
btnrct.addEventListener('click',addrct,false);
objbtn.addEventListener('click',objb,false);
objctrl.addEventListener('input',objc,false);
svgcb.addEventListener('click',gw2,false);
gw();
gbw();
rndm=a=>Math.floor(Math.random()*a);
function addccl(){objs.push(new Svgccl(rndm(100),rndm(100),5+rndm(10),0.1,'#888888','#'+('000000'+rndm(256*256*256).toString(16)).substr(-6)+'40'));slct=objs.length-1;gw();gbw();gcw();}
function addell(){objs.push(new Svgell(rndm(100),rndm(100),5+rndm(10),5+rndm(10),0.1,'#888888','#'+('000000'+rndm(256*256*256).toString(16)).substr(-6)+'40'));slct=objs.length-1;gw();gbw();gcw();}
function addrct(){objs.push(new Svgrct(rndm(100),rndm(100),5+rndm(10),5+rndm(10),0.1,'#888888','#'+('000000'+rndm(256*256*256).toString(16)).substr(-6)+'40'));slct=objs.length-1;gw();gbw();gcw();}
function objb(e){
if(e.srcElement.id.charAt(0)=='n'){
slct=parseInt(e.srcElement.id.substr(1));
gbw();gcw();
}
}
function objc(e){
if(e.srcElement.id=='r1'){objs[slct].x=parseFloat(r1.value);}
if(e.srcElement.id=='r2'){objs[slct].y=parseFloat(r2.value);}
if(e.srcElement.id=='r3'){objs[slct].w=parseFloat(r3.value);}
if(e.srcElement.id=='r4'){objs[slct].h=parseFloat(r4.value);}
if(e.srcElement.id=='r5'){objs[slct].cx=parseFloat(r5.value);}
if(e.srcElement.id=='r6'){objs[slct].cy=parseFloat(r6.value);}
if(e.srcElement.id=='r7'){objs[slct].r=parseFloat(r7.value);}
if(e.srcElement.id=='r8'){objs[slct].rx=parseFloat(r8.value);}
if(e.srcElement.id=='r9'){objs[slct].ry=parseFloat(r9.value);}
if(e.srcElement.id=='c1' || e.srcElement.id=='r10'){objs[slct].fl=c1.value+('00'+parseInt(r10.value).toString(16)).substr(-2);}
gw();
}
function gw(){
txt='<svg xmlns="http://www.w3.org/2000/svg" width="300px" viewbox="0 0 100 100" stroke="black" style="border: 1px solid black;">';
for(i=0;i<objs.length;i++){txt+=objs[i].svgtxt;}
txt+='</svg>';
gamen.innerHTML=txt;
gamenc.innerHTML=txt.replace(/</g,'<').replace(/>/g,'>')
}
function gbw(){
txtb='';
for(i=0;i<objs.length;i++){txtb+='<span id="n'+i+'" class="btnb"'+(i==slct?' style="background-image:radial-gradient(circle at 70% 40%,#ffffffc0,#ffffff40);"':'')+'>'+objs[i].name+'</span>';}
objbtn.innerHTML=txtb;
}
function gcw(){
txtc='';
if(objs[slct].nameid=='rct'){
txtc+='横位置<br/><input id="r1" type="range" min="0" max="100" step="0.1" value="'+objs[slct].x+'" style="width:100%"><br/>';
txtc+='縦位置<br/><input id="r2" type="range" min="0" max="100" step="0.1" value="'+objs[slct].y+'" style="width:100%"><br/>';
txtc+='幅<br/><input id="r3" type="range" min="0" max="100" step="0.1" value="'+objs[slct].w+'" style="width:100%"><br/>';
txtc+='高さ<br/><input id="r4" type="range" min="0" max="100" step="0.1" value="'+objs[slct].h+'" style="width:100%"><br/>';
}
if(objs[slct].nameid=='ccl'){
txtc+='横位置<br/><input id="r5" type="range" min="0" max="100" step="0.1" value="'+objs[slct].cx+'" style="width:100%"><br/>';
txtc+='縦位置<br/><input id="r6" type="range" min="0" max="100" step="0.1" value="'+objs[slct].cy+'" style="width:100%"><br/>';
txtc+='半径<br/><input id="r7" type="range" min="0" max="100" step="0.1" value="'+objs[slct].r+'" style="width:100%"><br/>';
}
if(objs[slct].nameid=='ell'){
txtc+='横位置<br/><input id="r5" type="range" min="0" max="100" step="0.1" value="'+objs[slct].cx+'" style="width:100%"><br/>';
txtc+='縦位置<br/><input id="r6" type="range" min="0" max="100" step="0.1" value="'+objs[slct].cy+'" style="width:100%"><br/>';
txtc+='横半径<br/><input id="r8" type="range" min="0" max="100" step="0.1" value="'+objs[slct].rx+'" style="width:100%"><br/>';
txtc+='縦半径<br/><input id="r9" type="range" min="0" max="100" step="0.1" value="'+objs[slct].ry+'" style="width:100%"><br/>';
}
txtc+='塗りつぶし色<input id="c1" type="color" value="'+objs[slct].fl.substr(0,7)+'"><br/>';
txtc+='塗り不透過度<br/><input id="r10" type="range" min="0" max="255" value="'+parseInt(objs[slct].fl.substr(7,2),16)+'" style="width:100%"><br/>';
objctrl.innerHTML=txtc;
}
function gw2(){
svgcb.style.display='none';
gamenc.style.display='block';
}
// ]]></script>
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
