- SVG波形ライブラリ [転載禁止]©2ch.net
15 ：デフォルトの名無しさん[sage]：2015/09/27(日) 06:57:37.02 ID:ukB2xSyg - ベジェ曲線で描く円と真円の差について
http://cat-in-136.github.io/2014/03/bezier-2-diff.html
http://cat-in-136.github.io/images/diff-error-illustrator.png
円と誤差の関係。緑付近は正確、赤付近は若干真円よりも大きい
ベジェ曲線の近似円弧における真円との差異について、
下記特徴があることがわかった。
ベジェ曲線の近似円弧の方が、真円よりも若干大きい
0度、45度、90度の部分は円と重なる
19.44度、70.56度あたりが円と差があるところであり、
半径の0.00027倍程度の誤差がある
ベジェ曲線を使う限り円の精度は
有効数字4桁程度といったところのようである。
| - SVG波形ライブラリ [転載禁止]©2ch.net
16 ：デフォルトの名無しさん[sage]：2015/09/27(日) 17:25:08.73 ID:ukB2xSyg - SVG 1.1 仕様 （第２版） 日本語訳
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/
| - SVG波形ライブラリ [転載禁止]©2ch.net
17 ：デフォルトの名無しさん[]：2015/09/27(日) 18:29:37.68 ID:ukB2xSyg - <script>tx='SVG画像 ほぼ正円を描くための3種類の方法 (circle,rect,path)';
cc='blue';cr='red';cp='black';cf='none';s=1;x=500;y=500;r=500;k=(-1+Math.sqrt(2))/3*4;kr=k*r;mkr=(r-(k*r));
txt='<title>'+tx+'</title><center>'+tx+'<br><svg valign=top width=1024 viewBox=" -10 -10 1013 1013 ">'+
'<circle cx='+(x)+' cy='+(y)+' r='+(r)+' fill='+(cf)+' stroke='+(cc)+' stroke-width='+(s*5)+' />'+
'<rect x='+(x-r)+' y='+(y-r)+' width='+(x+r)+' height='+(x+r)+' rx='+(r)+' fill='+(cf)+' stroke='+(cr)+' stroke-width='+(s*3)+' />'+
'<path d="M'+(x+r)+','+(y)+' c'+(0)+','+(-kr)+' '+(-mkr)+','+(-r)+' '+(-r)+','+(-r)+' c'+(-kr)+','+(0)+' '+(-r)+','+(mkr)+' '+(-r)+','+(r)+' " fill='+(cf)+' stroke='+(cp)+' stroke-width='+(s)+' />'+
'<path d="M'+(x-r)+','+(y)+' c'+(0)+','+(kr)+' '+(mkr)+','+(r)+' '+(r)+','+(r)+' c'+(kr)+','+(0)+' '+(r)+','+(-mkr)+' '+(r)+','+(-r)+' " fill='+(cf)+' stroke='+(cp)+' stroke-width='+(s)+' />'+
'</svg></center>';document.write(txt);</script>
| - SVG波形ライブラリ [転載禁止]©2ch.net
18 ：デフォルトの名無しさん[sage]：2015/09/27(日) 19:02:01.29 ID:ukB2xSyg - <script>tx='SVG画像 ほぼ正円を描くための3種類の方法 (circle,rect,path) 正円にそって回転';
cc='blue';cr='red';cp='black';cf='none';s=1;x=250;y=250;r=250;k=(-1+Math.sqrt(2))/3*4;kr=k*r;mkr=(r-(k*r));
txt='<title>'+tx+'</title><center>'+tx+'<br><svg valign=top width=531 viewBox=" -10 -10 520 520 ">'+
'<circle cx='+(x)+' cy='+(y)+' r='+(r)+' fill='+(cf)+' stroke='+(cc)+' stroke-width='+(s*5)+' />'+
'<rect x='+(x-r)+' y='+(y-r)+' width='+(x+r)+' height='+(x+r)+' rx='+(r)+' fill='+(cf)+' stroke='+(cr)+' stroke-width='+(s*3)+' />'+
'<path id=path d="M'+(x+r)+','+(y)+' c'+(0)+','+(-kr)+' '+(-mkr)+','+(-r)+' '+(-r)+','+(-r)+' c'+(-kr)+','+(0)+' '+(-r)+','+(mkr)+' '+(-r)+','+(r)+' '+
'c'+(0)+','+(kr)+' '+(mkr)+','+(r)+' '+(r)+','+(r)+' c'+(kr)+','+(0)+' '+(r)+','+(-mkr)+' '+(r)+','+(-r)+' " fill='+(cf)+' stroke='+(cp)+' stroke-width='+(s)+' />'+
'<circle cx=0 cy=0 r=7 fill=red stroke=red stroke-width=1><animateMotion dur=10s repeatCount=indefinite rotate=none><mpath xlink:href=#path /></animateMotion></circle>'+
'<text x=-14 y=-14 font-family=Verdana font-size=16 fill=blue>t →<animateMotion dur=10s repeatCount=indefinite rotate=auto><mpath xlink:href=#path /></animateMotion></text>'+
'</svg></center>';document.write(txt);</script>
| - SVG波形ライブラリ [転載禁止]©2ch.net
19 ：デフォルトの名無しさん[sage]：2015/09/27(日) 22:35:32.51 ID:ukB2xSyg - <script>tx='SVG画像 ほぼ正円をcircle,rect,pathで描き正円にそって回転させ近似sin波形cos波形の誤差解析';
cc='blue';cr='red';cp='pink';cf='none';t=20;s=2;x=250;y=250;r=250;k=(-1+Math.sqrt(2))/3*4;kr=k*r;mkr=(r-(k*r));
function ani(tAni,rAni,pAni){return('<animateMotion dur='+(tAni)+'s repeatCount=indefinite rotate='+(rAni)+'><mpath xlink:href=#'+(pAni)+' /></animateMotion>');}
txt='<title>'+tx+'</title><center>'+tx+'<br><svg valign=top width=1031 viewBox=" -10 -10 520 520 ">'+
'<circle cx='+(x)+' cy='+(y)+' r='+(r)+' fill='+(cf)+' stroke='+(cc)+' stroke-width='+(1)+' />'+
'<rect x='+(x-r)+' y='+(y-r)+' width='+(x+r)+' height='+(x+r)+' rx='+(r)+' fill='+(cf)+' stroke='+(s)+' stroke-width='+(s)+' />'+
'<path id="PathX" d="M'+(x-r)+','+(y)+' '+(x+r)+','+(y)+'" fill=none stroke=none stroke-width='+(s)+' />'+
'<path id="PathY" d="M'+(x)+','+(y-r)+' '+(x)+','+(y+r)+'" fill=none stroke=none stroke-width='+(s)+' />'+
'<path id="PathZ" d="M'+(x-r)+','+(y-r)+' '+(x+r)+','+(y+r)+'" fill=pink stroke=pink stroke-width='+(s)+' />'+
'<path id="PathC" d="M'+(x+r)+','+(y)+' c'+(0)+','+(-kr)+' '+(-mkr)+','+(-r)+' '+(-r)+','+(-r)+' c'+(-kr)+','+(0)+' '+(-r)+','+(mkr)+' '+(-r)+','+(r)+' '+
'c'+(0)+','+(kr)+' '+(mkr)+','+(r)+' '+(r)+','+(r)+' c'+(kr)+','+(0)+' '+(r)+','+(-mkr)+' '+(r)+','+(-r)+' " fill='+(cf)+' stroke='+(cp)+' stroke-width='+(s)+' />'+
| - SVG波形ライブラリ [転載禁止]©2ch.net
20 ：デフォルトの名無しさん[sage]：2015/09/27(日) 22:36:03.13 ID:ukB2xSyg - '<path d="M0,250 c239,-865 261,865 500,0 " fill=none stroke=yellow stroke-width=1 />'+
'<path d="M250,-125 c865,240 -865,260 0,500 c865,240 -865,260 0,500" fill=none stroke=yellow stroke-width=1 />'+
'<path d="M0,250 c101,-333 149,-333 250,0 c101,333 149,333 250,0 " fill=none stroke=green stroke-width=1 />'+
'<path d="M500,0 q0,52 -250,125 c-333,101 -333,149 0,250 q250,73 250,125" fill=none stroke=red stroke-width=1 />'+
'<path d="M-250,250 c101,333 149,333 250,0 c101,-333 149,-333 250,0 c101,333 149,333 250,0 c101,-333 149,-333 250,0" fill=none stroke=red stroke-width=1 />'+
'<path d="M250,-125 c333,101 333,149 0,250 c-333,101 -333,149 0,250 c333,101 333,149 0,250" fill=none stroke=green stroke-width=1 />'+
'<path id=pathX d="M-10000,0 10000,0" fill=red stroke=red stroke-width=1>'+(ani(t,'none','PathC'))+'</path><path d="M0,-10000 0,10000" fill=green stroke=green stroke-width=1>'+(ani(t,'none','PathC'))+'</path>'+
'<circle cx=0 cy=0 r=2 fill=pink stroke=pink stroke-width=1>'+(ani(t,'auto','PathC'))+'</circle><text x=-14 y=-14 font-family=Verdana font-size=16 fill=pink>t →'+(ani(t,'auto','PathC'))+'</text>'+
'<path d="M0,-10000 0,10000" r=1 fill=red stroke=red stroke-width=1>'+(ani(t,'auto','PathX'))+'</path><text x=14 y=0 font-family=Verdana font-size=16 fill=red>t →'+(ani(t,'auto','PathX'))+'</text>'+
'<path d="M0,-10000 0,10000" r=1 fill=green stroke=green stroke-width=1>'+(ani(t,'auto','PathY'))+'</path><text x=14 y=0 font-family=Verdana font-size=16 fill=green>t →'+(ani(t,'auto','PathY'))+'</text>'+
'<circle cx=0 cy=0 r=2 fill=pink stroke=pink stroke-width=1>'+(ani(t,'auto','PathZ'))+'</circle>'+
'</svg></center>';document.write(txt);</script>
| - SVG波形ライブラリ [転載禁止]©2ch.net
21 ：デフォルトの名無しさん[sage]：2015/09/27(日) 23:15:06.13 ID:ukB2xSyg - in波形cos波形svg画像
http://faustus.xii.jp/uploda/src/file757.htm
SVG画像 ほぼ正円をcircle,rect,pathで描き
正円にそって回転させ近似sin波形cos波形の誤差解析
http://faustus.xii.jp/uploda/src/file756.htm
|
|