どうも！LSSです！！
先日、
の記事で「ベジェ曲線」というモノに触れましたが、これがやはり、文章で説明しづらい・感覚的につかみづらい！
というわけで、LSS自身もちょっとベジェ曲線にお近づきになるべく、JavaScriptの力を借りてベジェれるものを作って遊んでみる事にしました！
ベジェ曲線とお近づきになりたいツール
この四角形の枠組の中で、マウスクリックすると、
「クリックした位置を制御点とした、座標250,50～50,350の曲線」
が描かれます。
ついでに、そのベジェ曲線を書き出したい時のコードも出てきます。
一応、ツールのコードも載せておきます。
コード
<p>[]<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400" id="gamen" style="border: 1px solid black;"></svg>[]</p>
<div id="gamen2" style="background-color: #eeeeee; padding: 0.6em; border-radius: 5px;"> </div>
<script>// <![CDATA[
gamen.addEventListener("click",mm,false);
function mm(ev){
txt='<path d="M 250 50 Q '+ev.offsetX+' '+ev.offsetY+' 50 350" stroke="black" stroke-width="3" fill="none"></path>';
gamen.innerHTML=txt;
txt='<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" viewbox="0 0 300 400" id="gamen" style="border: 1px solid black;"><br/><path d="M 250 50 Q '+ev.offsetX+' '+ev.offsetY+' 50 350" stroke="black" stroke-width="3" fill="none"></path><br/></svg>';
gamen2.innerHTML=txt;
}
// ]]></script>
※2020/11/13 少しコード修正しました。
スクリプト的には、
↑ここで行った実験のうち、offset座標を利用しています^^
あとがき
ベジェ曲線の「制御点」。
やっぱり「そっちに引っ張られる感じ」としか表現のしようがない感じですね^^;
理論としては確立されていて、計算式もあるそうなのですが、実はまだ見てもいませんｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
