前回はHTML文書作成にSvgを簡単に使えるようにするにはInline Svgを超えてマウスclickの動きをInline Svgに置き換えるDOM構築レベルのUI（ユーザインターフェイス）が必要だと述べその概要について書きました。今回は更に具体的にDOM構築に至るまでのプログラムレベルの手順について書きたいと思います。
左の図が折れ線を描画しつつ点列を記憶し、最後にDOM形式に変換して保存するアルゴリズムです。DOM形式に変換すると書いていますがInline Svgの形の文字列を生成し、それをSvgタグ中にDOM要素として書き込むことでSvgタグが呼ばれる度に再描画されることになります。
javascriptソースは以下の通りです。
- //clickされた点列は変数drawingPointsに記憶している
- drawingPoints.push({x: x0,y: y0});
- //折れ線ラインを描画する関数
- function line_seq(){
- if (first_point){ //前回までのポイントの描画を消す
- container.removeChild(first_point);
- first_point=null;
- }
- //直前にclickされたﾎﾟｲﾝﾄ新たに定義して描画する
- first_point=createFirstPoint([drawingPoints[drawingPoints.length-1]])
- Object.assign(first_point.style, defaultPointStyle);
- container.appendChild(first_point)
- if (drawingPath) { //前回までの折れ線を消す
- container.removeChild(drawingPath);
- }
- if(drawingPoints.length>1){ //直前に定義された点を含む折れ線を書き直す
- //DOM形式（Inline Svg）を生成する（関数createPathは下記に示す
- drawingPath = createPath(drawingPoints,0,null,null);
- Object.assign(drawingPath.style, defaultPathStyle);
- container.appendChild(drawingPath); //DOMとして書き込む
- }
- }
- } //end of line_seq
- //DOM形式（Inline Svgの文字列）を生成する関数
- function createPath(points,close,rect,def_points) {
- var path = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘path’);
- var attribute = ”;
- points.forEach((point, index) => {
- if (index === 0) {
- attribute += `M${point.x}, ${point.y}`;
- } else {
- attribute += `L${point.x}, ${point.y}`;
- }
- });
- if(close==”close”){ //閉じた折れ線の場合の処理
- attribute += ` Z`;
- }
- path.setAttributeNS(null, ‘d’, attribute);
- return path;
- }
コメント
Excellent write-up
Nice post, learn something new and challenging on blogs I stumbleupon on a daily basis.
This was beautiful Admin. Thank you for your reflections.
Pretty great post. I just stumbled upon your weblog and wanted to mention that I have really
enjoyed browsing your weblog posts. In any case I’ll be
subscribing in your feed and I hope you write once more soon!
I loved as much as you will receive carried out
right here. The sketch is attractive, your authored subject
matter stylish. nonetheless, you command get got an shakiness over that
you wish be delivering the following. unwell unquestionably come further formerly
again as exactly the same nearly a lot often inside case you shield this hike.
I do not even know the way I finished up here, however I believed
this publish was once great. I don’t know who
you are but certainly you’re going to a well-known blogger in the event
you aren’t already. Cheers!
Hi there everyone, it’s my first pay a visit at this website, and
article is actually fruitful in support of me, keep up posting these articles.
Can I just say what a comfort to discover an individual who genuinely knows what they’re discussing
on the web. You certainly know how to bring an issue to light and make it important.
More and more people need to read this and understand this side of the story.
It’s surprising you are not more popular since you certainly possess the gift.
I’m not that much of a internet reader to be honest but your blogs really nice, keep it up!
I’ll go ahead and bookmark your site to come back
later. Many thanks
I like it when people come together and share views. Great site, keep it up!
Thank you for the good writeup. It in fact was a amusement
account it. Look advanced to more added agreeable from you!
By the way, how can we communicate?
Hi there mates, fastidious piece of writing and fastidious arguments commented here,
I am truly enjoying by these.